WebGL *1 2013.04.23 *1 X021 2013 LR301 Kageyama (Kobe Univ.) Visualization 2013.04.23 1 / 58
OpenGL GLSL References Kageyama (Kobe Univ.) Visualization 2013.04.23 2 / 58
Kageyama (Kobe Univ.) Visualization 2013.04.23 3 / 58
http://tinyurl.com/kageyama2013v Kageyama (Kobe Univ.) Visualization 2013.04.23 4 / 58
PC PC Mozilla Firefox Google Chrome Safari Opera *2 *2 http://www.khronos.org/webgl/wiki/demo_repository Kageyama (Kobe Univ.) Visualization 2013.04.23 5 / 58
OpenGL glbegin/glend, glvertex, glnormal CG Computer Graphics OpenGL Kageyama (Kobe Univ.) Visualization 2013.04.23 6 / 58
WebGL Kageyama (Kobe Univ.) Visualization 2013.04.23 7 / 58
Kageyama (Kobe Univ.) Visualization 2013.04.23 8 / 58
5 20 x 5 = 100 kageyama.lecture Kageyama (Kobe Univ.) Visualization 2013.04.23 9 / 58
WebGL WebGL - OpenGL ES 2.0 for the Web *3 *3 http://www.khronos.org/webgl/ Kageyama (Kobe Univ.) Visualization 2013.04.23 10 / 58
WebGL : (Anyuru, 2012) WebGL : (Anyuru and, 2012) (Telea, 2007) Kageyama (Kobe Univ.) Visualization 2013.04.23 11 / 58
Part 1 OpenGL WebGL CG GPU Part 2 WebGL Part 3 Kageyama (Kobe Univ.) Visualization 2013.04.23 12 / 58
はじめに 登攀ルート GPUを使いこなしたSci. Viz. 基本的可視化 アルゴリズム シェーダ言語 線形代数 コンピュータグラフィクス Kageyama (Kobe Univ.) Visualization 2013.04.23 13 / 58
OpenGL OpenGL Kageyama (Kobe Univ.) Visualization 2013.04.23 14 / 58
OpenGL OpenGL OpenGL 2.X OpenGL 1.X OpenGL 3.0 OpenGL 3.0 OpenGL 3.1 OpenGL 3.2 Kageyama (Kobe Univ.) Visualization 2013.04.23 15 / 58
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 *4... 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. *4 Kageyama (Kobe Univ.) Visualization 2013.04.23 16 / 58
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 2013.04.23 17 / 58
OpenGL Shader-based OpenGL OpenGL OpenGL API OpenGL 3.0 OpenGL Shader-base Kageyama (Kobe Univ.) Visualization 2013.04.23 18 / 58
OpenGL OpenGL ver. 3.1 Kageyama (Kobe Univ.) Visualization 2013.04.23 19 / 58
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 2013.04.23 20 / 58
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 2013.04.23 21 / 58
OpenGL WebGL link: webgl sample triangle 00.html Kageyama (Kobe Univ.) Visualization 2013.04.23 22 / 58
GLSL OpenGL OpenGL SL, GLSL 4.0 GPU CG = OpenGL + GLSL( + GLSL( Kageyama (Kobe Univ.) Visualization 2013.04.23 23 / 58
GLSL OpenGL GPU GPGPU Kageyama (Kobe Univ.) Visualization 2013.04.23 24 / 58
GLSL GPU GeForce GTX TITAN CUDA Cores 2688 Kageyama (Kobe Univ.) Visualization 2013.04.23 25 / 58
GLSL immediate-mode GPU retained-mode GPU Kageyama (Kobe Univ.) Visualization 2013.04.23 26 / 58
GLSL OpenGL OpenGL 3.0 deprecation OpenGL 3.2 API glbegin/glend GL MODELVIEW, GL PROJECTION Kageyama (Kobe Univ.) Visualization 2013.04.23 27 / 58
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 2013.04.23 28 / 58
GLSL HTML5 canvas HTML5 5 HTML canvas: JavaScript HTML5 canvas Kageyama (Kobe Univ.) Visualization 2013.04.23 29 / 58
CG Kageyama (Kobe Univ.) Visualization 2013.04.23 30 / 58
CG MPI Embarrassingly parallel problems Kageyama (Kobe Univ.) Visualization 2013.04.23 31 / 58
CG embarrassingly parallel etc. CG GPU (Graphics Processing Unit) Kageyama (Kobe Univ.) Visualization 2013.04.23 32 / 58
Kepler GeForce Nvidia white paper Kageyama (Kobe Univ.) Visualization 2013.04.23 33 / 58
Kepler GeForce Nvidia white paper Kageyama (Kobe Univ.) Visualization 2013.04.23 34 / 58
Graphics rendering pipeline グラフィックスレンダリング パイプライン input: 3 output: 2 Kageyama (Kobe Univ.) Visualization 2013.04.23 35 / 58
アプリケ ーション ジオメト リ ラスタラ イザ Kageyama (Kobe Univ.) Visualization 2013.04.23 36 / 58
Kageyama (Kobe Univ.) Visualization 2013.04.23 37 / 58
座標変換 ライティ ング 射影 クリッピ ング スクリー ンマッピ ング Kageyama (Kobe Univ.) Visualization 2013.04.23 38 / 58
canonical view volume 2 ( 1, 1, 1) (x, y, z) (1, 1, 1) Normalized Device Coordinates, NDC CG Kageyama (Kobe Univ.) Visualization 2013.04.23 39 / 58
2 orthographic projection, parallel projection perspective projection, view frustum 4 4 Kageyama (Kobe Univ.) Visualization 2013.04.23 40 / 58
Kageyama (Kobe Univ.) Visualization 2013.04.23 41 / 58
Kageyama (Kobe Univ.) Visualization 2013.04.23 42 / 58
width height x y z 1 z 1 Kageyama (Kobe Univ.) Visualization 2013.04.23 43 / 58
アプリケ ーション ジオメト リ ラスタラ イザ Kageyama (Kobe Univ.) Visualization 2013.04.23 44 / 58
3D 2D 2D Kageyama (Kobe Univ.) Visualization 2013.04.23 45 / 58
p. 50 Kageyama (Kobe Univ.) Visualization 2013.04.23 46 / 58
Kageyama (Kobe Univ.) Visualization 2013.04.23 47 / 58
Z Kageyama (Kobe Univ.) Visualization 2013.04.23 48 / 58
RGBA 16 bits, 23 bits, 32 bits RGBA32 = R8 + G8 + B8 + A8 Kageyama (Kobe Univ.) Visualization 2013.04.23 49 / 58
Z Z-buffer Edwin Catmull 1974 RenderMan Kageyama (Kobe Univ.) Visualization 2013.04.23 50 / 58
Z-buffer z z b z a z a < z b x Kageyama (Kobe Univ.) Visualization 2013.04.23 51 / 58
Z-buffer z x Kageyama (Kobe Univ.) Visualization 2013.04.23 52 / 58
Z-buffer z x Kageyama (Kobe Univ.) Visualization 2013.04.23 53 / 58
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 2013.04.23 54 / 58
(Williams, 1978) z 2 Kageyama (Kobe Univ.) Visualization 2013.04.23 55 / 58
Kageyama (Kobe Univ.) Visualization 2013.04.23 56 / 58
NDC, 39 OpenGL SL, 23 Z, 50, 25, 39, 49, 35, 56, 55, 39, 48, 40 Kageyama (Kobe Univ.) Visualization 2013.04.23 57 / 58
References References Anyuru, A. (2012). Professional WebGL Programming. Wrox, 2 edition edition. Anyuru, A. and (2012). WebGL.. Telea, A. C. (2007). Data Visualization. A K Peters, Ltd. Williams, L. (1978). Casting Curved Shadows on Curved Surfaces. In Proc. 5th Anunual Conference on Computer Graphics and Interactive Techniques, pages 270 274. Kageyama (Kobe Univ.) Visualization 2013.04.23 58 / 58