WebGL 2014.04.15 X021 2014 3 1F Kageyama (Kobe Univ.) Visualization 2014.04.15 1 / 57
WebGL OpenGL GLSL Kageyama (Kobe Univ.) Visualization 2014.04.15 2 / 57
WebGL Kageyama (Kobe Univ.) Visualization 2014.04.15 3 / 57
WebGL http://bit.ly/1qxgljb Kageyama (Kobe Univ.) Visualization 2014.04.15 4 / 57
WebGL id if I id else kageyama.lecture Kageyama (Kobe Univ.) Visualization 2014.04.15 5 / 57
WebGL OpenGL glbegin/glend, glvertex, glnormal CG Computer Graphics OpenGL Kageyama (Kobe Univ.) Visualization 2014.04.15 6 / 57
WebGL WebGL Kageyama (Kobe Univ.) Visualization 2014.04.15 7 / 57
WebGL Kageyama (Kobe Univ.) Visualization 2014.04.15 8 / 57
WebGL 5 20 x 5 = 100 kageyama.lecture Kageyama (Kobe Univ.) Visualization 2014.04.15 9 / 57
WebGL WebGL WebGL - OpenGL ES 2.0 for the Web http://www.khronos.org/webgl/ Kageyama (Kobe Univ.) Visualization 2014.04.15 10 / 57
WebGL WebGL Firefox 4 Google Chrome 8 Safari 5 Opera 12 Internet Explorer 11 http://www.khronos.org/webgl/wiki/demo_repository Kageyama (Kobe Univ.) Visualization 2014.04.15 11 / 57
WebGL Professional WebGL Programming, A. Anyuru WebGL, Data Visualization Principles and Practice, C. Telea three.js HTML5 3D,, Kageyama (Kobe Univ.) Visualization 2014.04.15 12 / 57
WebGL Part 1 OpenGL WebGL CG GPU Part 2 WebGL Part 3 Kageyama (Kobe Univ.) Visualization 2014.04.15 13 / 57
講義の目標 WebGL とは 登攀ルート GPUを使いこなしたSci. Viz. 基本的可視化 アルゴリズム シェーダ言語 線形代数 コンピュータグラフィクス Kageyama (Kobe Univ.) Visualization 2014.04.15 14 / 57
OpenGL OpenGL Kageyama (Kobe Univ.) Visualization 2014.04.15 15 / 57
OpenGL OpenGL OpenGL 2.X OpenGL 1.X OpenGL 3.0 OpenGL 3.0 OpenGL 3.1 OpenGL 3.2 Kageyama (Kobe Univ.) Visualization 2014.04.15 16 / 57
OpenGL OpenGL Overview http://www.opengl.org OpenGL was first created as an open and reproducable alternative to Iris GL...Silicon Graphics workstations... OpenGL 1.0...non-SGI 3rd party...... OpenGL 2.0...OpenGL Shading Language (also called GLSL), a C like language with which the transformation and fragment shading stages of the pipeline can be programmed. OpenGL 3.0 adds the concept of deprecation... GL 3.1 removed most deprecated features, and GL 3.2 created the notion of core and compatibility OpenGL contexts. Official versions of OpenGL released to date are 1.0, 1.1, 1.2, 1.2.1, 1.3, 1.4, 1.5, 2.0, 2.1, 3.0, 3.1, 3.2, 3.3, 4.0, 4.1, 4.2, 4.3. Kageyama (Kobe Univ.) Visualization 2014.04.15 17 / 57
OpenGL OpenGL http://www.khronos.org OpenGL 4.3 OpenGL SL 4.3 OpenGL ES 3.0 ios, Android, Symbian WebGL 2.0 Kageyama (Kobe Univ.) Visualization 2014.04.15 18 / 57
OpenGL Shader-based OpenGL OpenGL OpenGL API OpenGL 3.0 OpenGL Shader-base Kageyama (Kobe Univ.) Visualization 2014.04.15 19 / 57
OpenGL OpenGL ver. 3.1 Kageyama (Kobe Univ.) Visualization 2014.04.15 20 / 57
OpenGL OpenGL ver. 3.1 // // H e l l o W o r l d. c // // To c o m p i l e on Mac. // gcc t h i s s o u r c e. c framework GLUT framework OpenGL // #i n c l u d e <GLUT/ g l u t. h> void d i s p l a y ( void ) { g l C l e a r ( GL COLOR BUFFER BIT ) ; g l B e g i n (GL POLYGON) ; g l V e r t e x 2 f ( 0.5, 0.5) ; g l V e r t e x 2 f ( 0.5, 0. 5 ) ; Kageyama (Kobe Univ.) Visualization 2014.04.15 21 / 57
OpenGL } g l V e r t e x 2 f ( 0. 5, 0. 5 ) ; g l V e r t e x 2 f ( 0. 5, 0.5) ; glend ( ) ; g l u t S w a p B u f f e r s ( ) ; i n t main ( i n t argc, char a r g v ) { g l u t I n i t (& argc, a r g v ) ; g l u t I n i t D i s p l a y M o d e (GLUT RGBA GLUT DOUBLE) ; glutcreatewindow ( H e l l o World ) ; g l u t D i s p l a y F u n c ( d i s p l a y ) ; glutmainloop ( ) ; } Listing 1: OpenGL Kageyama (Kobe Univ.) Visualization 2014.04.15 22 / 57
OpenGL WebGL link: webgl sample triangle 00.html Kageyama (Kobe Univ.) Visualization 2014.04.15 23 / 57
GLSL OpenGL OpenGL SL, GLSL 4.0 GPU CG = OpenGL + GLSL( + GLSL( Kageyama (Kobe Univ.) Visualization 2014.04.15 24 / 57
GLSL OpenGL GPU GPGPU Kageyama (Kobe Univ.) Visualization 2014.04.15 25 / 57
GLSL GPU GeForce GTX TITAN CUDA Cores 2688 Kageyama (Kobe Univ.) Visualization 2014.04.15 26 / 57
GLSL immediate-mode API GPU retained-mode API GPU WebGL API Kageyama (Kobe Univ.) Visualization 2014.04.15 27 / 57
GLSL OpenGL OpenGL 3.0 deprecation OpenGL 3.2 API glbegin/glend GL MODELVIEW, GL PROJECTION Kageyama (Kobe Univ.) Visualization 2014.04.15 28 / 57
GLSL OpenGL ES 2.0 OpenGL for Embedded Systems Immediate API glbegin/glend C/C++, Objective-C, Java OpenGL ES 2.0 WebGL WebGL JavaScript Kageyama (Kobe Univ.) Visualization 2014.04.15 29 / 57
GLSL HTML5 canvas HTML5 5 HTML canvas: JavaScript HTML5 canvas Kageyama (Kobe Univ.) Visualization 2014.04.15 30 / 57
CG Kageyama (Kobe Univ.) Visualization 2014.04.15 31 / 57
CG MPI Embarrassingly parallel problems Kageyama (Kobe Univ.) Visualization 2014.04.15 32 / 57
CG embarrassingly parallel etc. CG GPU (Graphics Processing Unit) Kageyama (Kobe Univ.) Visualization 2014.04.15 33 / 57
Kepler GeForce Nvidia white paper Kageyama (Kobe Univ.) Visualization 2014.04.15 34 / 57
Kepler GeForce Nvidia white paper Kageyama (Kobe Univ.) Visualization 2014.04.15 35 / 57
Graphics rendering pipeline グラフィックスレンダリング パイプライン input: 3 output: 2 Kageyama (Kobe Univ.) Visualization 2014.04.15 36 / 57
アプリケ ーション ジオメト リ ラスタラ イザ Kageyama (Kobe Univ.) Visualization 2014.04.15 37 / 57
Kageyama (Kobe Univ.) Visualization 2014.04.15 38 / 57
座標変換 ライティ ング 射影 クリッピ ング スクリー ンマッピ ング Kageyama (Kobe Univ.) Visualization 2014.04.15 39 / 57
canonical view volume 2 ( 1, 1, 1) (x, y, z) (1, 1, 1) Normalized Device Coordinates, NDC CG Kageyama (Kobe Univ.) Visualization 2014.04.15 40 / 57
2 orthographic projection, parallel projection perspective projection, view frustum 4 4 Kageyama (Kobe Univ.) Visualization 2014.04.15 41 / 57
Kageyama (Kobe Univ.) Visualization 2014.04.15 42 / 57
Kageyama (Kobe Univ.) Visualization 2014.04.15 43 / 57
width height x y z 1 z 1 Kageyama (Kobe Univ.) Visualization 2014.04.15 44 / 57
アプリケ ーション ジオメト リ ラスタラ イザ Kageyama (Kobe Univ.) Visualization 2014.04.15 45 / 57
3D 2D 2D Kageyama (Kobe Univ.) Visualization 2014.04.15 46 / 57
p. 51 Kageyama (Kobe Univ.) Visualization 2014.04.15 47 / 57
Kageyama (Kobe Univ.) Visualization 2014.04.15 48 / 57
Z Kageyama (Kobe Univ.) Visualization 2014.04.15 49 / 57
RGBA 16 bits, 23 bits, 32 bits RGBA32 = R8 + G8 + B8 + A8 Kageyama (Kobe Univ.) Visualization 2014.04.15 50 / 57
Z Z-buffer Edwin Catmull 1974 RenderMan Kageyama (Kobe Univ.) Visualization 2014.04.15 51 / 57
Z-buffer z z b z a z a < z b x Kageyama (Kobe Univ.) Visualization 2014.04.15 52 / 57
Z-buffer z x Kageyama (Kobe Univ.) Visualization 2014.04.15 53 / 57
Z-buffer z x Kageyama (Kobe Univ.) Visualization 2014.04.15 54 / 57
Z-buffer z b 3 z a = z 1 + (z 2 z 1 ) x s x 1 x 2 x 1 z b = z 2 + (z 3 z 2 ) x s x 2 x 3 x 2 z p = z a + (z b z a ) y p y b y b x a 2 a p 1 x x s Kageyama (Kobe Univ.) Visualization 2014.04.15 55 / 57
(Williams1978) z 2 Kageyama (Kobe Univ.) Visualization 2014.04.15 56 / 57
Kageyama (Kobe Univ.) Visualization 2014.04.15 57 / 57