• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
W3C HTML5 KIG-Typed Arrays

W3C HTML5 KIG-Typed Arrays



최신 웹 브라우저에서 지원하는 Typed Array의 개발 목적과 간단한 사용법을 소개한다.

최신 웹 브라우저에서 지원하는 Typed Array의 개발 목적과 간단한 사용법을 소개한다.



Total Views
Views on SlideShare
Embed Views



1 Embed 699

http://html5gamers.wordpress.com 699



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    W3C HTML5 KIG-Typed Arrays W3C HTML5 KIG-Typed Arrays Presentation Transcript

    • Typed Arrays Binary Data in the Browser2012.09.19, 동국대 멀티미디어공학과 이창환
    • Contents Introduction Basics of using Typed Arrays Browser APIs that use Typed Arrays Third-party libraries History of Typed Arrays Design considerations References 2
    • Introduction The need to have an efficient way to handle binary data in WebGL. A slab of memory with a typed view into it  Like how arrays work in C.  The JavaScript engine can pass the memory directly to native libraries  Better than JavaScript arrays for passing data to WebGL and other APIs dealing with binary data. Typed array views  Single-type arrays to a segment of an ArrayBuffer.  Views for all the usual numeric types  Float32Array, Float64Array, Int32Array and Uint8Array.  Special view Uint8ClampedArray  The pixel array type in Canvass ImageData DataView  Handling heterogeneous data.  A get/set API to read and write arbitrary data types at arbitrary byte offsets.  Reading and writing file headers and other such struct-like data. 3
    • Introduction JavaScript NativeSingle Value: 123 Value: 123Value Type: integer [0] Value: 123 [0]:123 [1] Type: integer [1]:123 [2] [2]:123 Value: 123Values [3] Type: integer [3]:123 in [4] [4]:123 [5] … [5]:123 Array … … [n-2] Value: 123 [n-2]:123 [n-1] Type: integer [n-1]:123 4
    • Basics of using Typed Arrays Typed array views DataView A discussion of endianness 5
    • Typed Array Views To use Typed Arrays  Create an ArrayBuffer and a view to it 6
    • Typed Array Views Create an ArrayBuffer and views that point to it. Copy a typed array to another typed array  set() method 7
    • DataView DataView to the buffer  To use ArrayBuffers that contain data with heterogenous types  Endian: optional littleEndian parameter 8
    • DataView Writing values to buffers 9
    • A Discussion of Endianness Endianness, or byte order  big-endian: the most significant byte first  little-endian: the least significant byte first. 10
    • Browser APIs that use Typed Arrays WebGL Canvas 2D XMLHttpRequest2 File APIs Transferable objects Media Source API Binary WebSockets 11
    • Third-party libraries jDataView stringencoding BitView.js DataStream.js 12
    • History of Typed Arrays Start in the early implementation stage of WebGL  JavaScript arrays  Native array  Allocate a native array  Fill it by walking over the JavaScript array  Cast every JavaScript object in the array to the required native type. Mozillas Vladimir Vukicevic  CanvasFloatArray: a C-style float array with a JavaScript interface Renamed WebGLFloatArray Renamed Float32Array  split into a backing ArrayBuffer and the typed Float32Array-view to access the buffer.  Types were added for other integer and floating-point sizes and signed/unsigned variants. 13
    • Design considerations Design of Typed Arrays  Need to efficiently pass binary data to native libraries.  The typed array views operate upon aligned data in the host CPU’s native endianness. DataView  Designed for file and network I/O The design split  in-memory data assembly (using the typed array views)  I/O (using DataView) Modern JavaScript engines  Optimize the typed array views heavily  Achieve high performance on numerical operations 14
    • References [1] http://www.khronos.org/registry/typedarray/specs/latest/ [2] https://developer.mozilla.org/en/JavaScript_typed_arrays [3] http://blogs.msdn.com/b/ie/archive/2011/12/01/working- with-binary-data-using-typed-arrays.aspx [4] http://weblog.bocoup.com/javascript-typed-arrays/ [5] http://blog.n01se.net/?p=248 [6] http://ie.microsoft.com/testdrive/HTML5/TypedArrays/ [7] TYPED ARRAYS: BINARY DATA IN THE BROWSER, http://www.html5rocks.com/en/tutorials/webgl/typed_arrays/ 15