Typed Arrays      Binary Data in the Browser2012.09.19, 동국대 멀티미디어공학과 이창환
Contents       Introduction       Basics of using Typed Arrays       Browser APIs that use Typed Arrays       Third-pa...
Introduction       The need to have an efficient way to handle binary data in WebGL.       A slab of memory with a typed...
Introduction                  JavaScript               NativeSingle    Value: 123                     Value: 123Value    T...
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 arra...
DataView       DataView to the buffer           To use ArrayBuffers that contain data with            heterogenous types...
DataView       Writing values to buffers    9
A Discussion of Endianness    Endianness, or byte order        big-endian: the most significant byte first        littl...
Browser APIs that use Typed Arrays    WebGL    Canvas 2D    XMLHttpRequest2    File APIs    Transferable objects    ...
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    ...
Design considerations    Design of Typed Arrays        Need to efficiently pass binary data to native libraries.       ...
References    [1] http://www.khronos.org/registry/typedarray/specs/latest/    [2] https://developer.mozilla.org/en/JavaS...
Upcoming SlideShare
Loading in …5
×

W3C HTML5 KIG-Typed Arrays

1,673 views
1,525 views

Published on

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

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,673
On SlideShare
0
From Embeds
0
Number of Embeds
733
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

W3C HTML5 KIG-Typed Arrays

  1. 1. Typed Arrays Binary Data in the Browser2012.09.19, 동국대 멀티미디어공학과 이창환
  2. 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. 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 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
  4. 4. 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
  5. 5. Basics of using Typed Arrays Typed array views DataView A discussion of endianness 5
  6. 6. Typed Array Views To use Typed Arrays  Create an ArrayBuffer and a view to it 6
  7. 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. 8. DataView DataView to the buffer  To use ArrayBuffers that contain data with heterogenous types  Endian: optional littleEndian parameter 8
  9. 9. DataView Writing values to buffers 9
  10. 10. A Discussion of Endianness Endianness, or byte order  big-endian: the most significant byte first  little-endian: the least significant byte first. 10
  11. 11. Browser APIs that use Typed Arrays WebGL Canvas 2D XMLHttpRequest2 File APIs Transferable objects Media Source API Binary WebSockets 11
  12. 12. Third-party libraries jDataView stringencoding BitView.js DataStream.js 12
  13. 13. 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
  14. 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. 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

×