W3C HTML5 KIG-Typed Arrays

W3C HTML5 KIG-Typed Arrays

• 1.
  Typed Arrays Binary Data in the Browser 2012.09.19, 동국대 멀티미디어공학과 이창환
• 2.
  Contents  Introduction  Basics of using Typed Arrays  Browser APIs that use Typed Arrays  Third-party libraries  History of Typed Arrays  Design considerations  References 2
• 3.
  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 Canvas's 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
• 4.
  Introduction JavaScript Native Single Value: 123 Value: 123 Value Type: integer [0] Value: 123 [0]:123 [1] Type: integer [1]:123 [2] [2]:123 Value: 123 Values [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
• 5.
  Basics of usingTyped Arrays  Typed array views  DataView  A discussion of endianness 5
• 6.
  Typed Array Views  To use Typed Arrays  Create an ArrayBuffer and a view to it 6
• 7.
  Typed Array Views  Create an ArrayBuffer and views that point to it.  Copy a typed array to another typed array  set() method 7
• 8.
  DataView  DataView to the buffer  To use ArrayBuffers that contain data with heterogenous types  Endian: optional littleEndian parameter 8
• 9.
  DataView  Writing values to buffers 9
• 10.
  A Discussion ofEndianness  Endianness, or byte order  big-endian: the most significant byte first  little-endian: the least significant byte first. 10
• 11.
  Browser APIs thatuse Typed Arrays  WebGL  Canvas 2D  XMLHttpRequest2  File APIs  Transferable objects  Media Source API  Binary WebSockets 11
• 12.
  Third-party libraries  jDataView  stringencoding  BitView.js  DataStream.js 12
• 13.
  History of TypedArrays  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.  Mozilla's 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
• 14.
  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
• 15.
  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