WebGL *1 2013.05.07 *2 *1 X021 2013 LR301 *2 05/08: Kageyama (Kobe Univ.) Visualization 2013.05.07 *3 1 / 54
WebGL References Kageyama (Kobe Univ.) Visualization 2013.05.07 *4 2 / 54
Chrome Firefox http://www.khronos.org/webgl/wiki/demo_repository ID Kageyama (Kobe Univ.) Visualization 2013.05.07 *5 3 / 54
Kageyama (Kobe Univ.) Visualization 2013.05.07 *6 4 / 54
Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂 点 シェーダ プリミティブ 組 み 立 て ラスタ 化 フラグメントシェーダ Kageyama (Kobe Univ.) Visualization 2013.05.07 *7 5 / 54
n n Kageyama (Kobe Univ.) Visualization 2013.05.07 *8 6 / 54
頂 点 シェーダ 用 ソースコード (GLSL) 頂 点 attribute 変 数 ( 座 標 色 など) 頂 点 シェーダ 組 み 込 み 変 数 gl_position gl_frontfacing g_lpointsize ユーザ 定 義 uniform 変 数 ( 変 換 行 列 光 源 位 置 ) ユーザ 定 義 の varying 変 数 Kageyama (Kobe Univ.) Visualization 2013.05.07 *9 7 / 54
C OpenGL SL (Shading Language) 4 4 a t t r i b u t e vec3 avertexpos ; a t r r i b u t e vec4 a V e r t e x C o l o r ; u n i f o r m mat4 umvmatrix ; u n i f o r m mat4 upmatrix ; v a r y i n g vec4 v C o l o r ; void main ( ) { g l P o s i t i o n = upmatrix umvmatrix vec4 ( avertexpos, 1. 0 ) ; v C o l o r = a V e r t e x C o l o r ; } Kageyama (Kobe Univ.) Visualization 2013.05.07 *10 8 / 54
a t t r i b u t e vec3 avertexpos ; a t r r i b u t e vec4 a V e r t e x C o l o r ; attribute RGBA 4 Kageyama (Kobe Univ.) Visualization 2013.05.07 *11 9 / 54
u n i f o r m mat4 umvmatrix ; u n i f o r m mat4 upmatrix ; mat4 4 4 uniform Kageyama (Kobe Univ.) Visualization 2013.05.07 *12 10 / 54
v a r y i n g vec4 v C o l o r ; varing (varying variable) varying gl Position gl FrontFacing gl PointSize Kageyama (Kobe Univ.) Visualization 2013.05.07 *13 11 / 54
void main ( ) { g l P o s i t i o n = upmatrix umvmatrix vec4 ( avertexpos, 1. 0 ) ; v C o l o r = a V e r t e x C o l o r ; main 1. 3 4 2. 3. 4. varying gl Position varying vcolor Kageyama (Kobe Univ.) Visualization 2013.05.07 *14 12 / 54
primitive assembly 3 *15 *15 OpenGL 1.x 3 Kageyama (Kobe Univ.) Visualization 2013.05.07 *16 13 / 54
プリミティブ フラグメント Kageyama (Kobe Univ.) Visualization 2013.05.07 *17 14 / 54
varying varying varying varyingvalue_1 varyingvalue_2 varyingvalue_3 Kageyama (Kobe Univ.) Visualization 2013.05.07 *18 15 / 54
フラグメントシェーダ 用 ソースコード (GLSL) 組 み 込 み 変 数 gl_position gl_frontfacing g_lpointsize フラグメント シェーダ 組 み 込 み 変 数 gl_fragcolor ユーザ 定 義 varying 変 数 ユニフォーム 変 数 テクスチャ 用 サンプラ Kageyama (Kobe Univ.) Visualization 2013.05.07 *19 16 / 54
p r e c i s i o n mediump f l o a t ; // p r e c i s i o n q u a l i f i e r v a r y i n g vec4 v C o l o r ; // void main ( ) { g l F r a g C o l o r = v C o l o r ; } Kageyama (Kobe Univ.) Visualization 2013.05.07 *20 17 / 54
WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂 点 シェーダ プリミティブ 組 み 立 て ラスタ 化 フラグメントシェーダ シザーテスト マルチサンプリング ステンシルテスト デプステスト アルファブレンディング ディザリング WebGL 用 描 画 バッファ cavasの 他 の 画 像 スクリーン Kageyama (Kobe Univ.) Visualization 2013.05.07 *21 18 / 54
scissors *22 OpenGL Super Bible (Richard S. Wright et al., 2011, p.112) シザーテスト 不 合 格 シザーテスト 合 格 *22 Kageyama (Kobe Univ.) Visualization 2013.05.07 *23 19 / 54
OpenGL Super Bible (Richard S. Wright et al., 2011, p.382) Kageyama (Kobe Univ.) Visualization 2013.05.07 *24 20 / 54
OpenGL Super Bible (Richard S. Wright et al., 2011, p.399) Kageyama (Kobe Univ.) Visualization 2013.05.07 *25 21 / 54
Kageyama (Kobe Univ.) Visualization 2013.05.07 *26 22 / 54
Kageyama (Kobe Univ.) Visualization 2013.05.07 *27 23 / 54
Kageyama (Kobe Univ.) Visualization 2013.05.07 *28 24 / 54
WebGL WebGL Kageyama (Kobe Univ.) Visualization 2013.05.07 *29 25 / 54
WebGL http://tinyurl.com/kageyama2013v WebGL webgl sample triangle 00.html Kageyama (Kobe Univ.) Visualization 2013.05.07 *30 26 / 54
WebGL 3 HTML WebGL canvas Kageyama (Kobe Univ.) Visualization 2013.05.07 *31 27 / 54
WebGL webgl sample triangle 00.html <!DOCTYPE HTML> <html lang= en > <head> < t i t l e>webgl Sample T r i a n g l e 00</ t i t l e> <meta c h a r s e t= u t f 8 > <s t y l e type= t e x t / c s s > canvas { b o r d e r : 2 px s o l i d g r e y ; }. t e x t { p o s i t i o n : a b s o l u t e ; top : 40 px ; l e f t : 20 px ; font s i z e : 1. 5em ; Kageyama (Kobe Univ.) Visualization 2013.05.07 *32 28 / 54
WebGL webgl sample triangle 00.html <!DOCTYPE HTML> <html lang= en > <head> < t i t l e>webgl Sample T r i a n g l e 00</ t i t l e> <meta c h a r s e t= u t f 8 > <s t y l e type= t e x t / c s s > canvas { b o r d e r : 2 px s o l i d g r e y ; }. t e x t { p o s i t i o n : a b s o l u t e ; top : 40 px ; l e f t : 20 px ; font s i z e : 1. 5em ; Kageyama (Kobe Univ.) Visualization 2013.05.07 *33 29 / 54
WebGL c o l o r : b l a c k ; } </ s t y l e > < s c r i p t t y p e= t e x t / j a v a s c r i p t > v a r g l ; v a r canvas ; v a r shaderprogram ; v a r v e r t e x B u f f e r ; f u n c t i o n c r e a t e G L C o n t e x t ( canvas ) { v a r names = [ webgl, e x p e r i m e n t a l webgl ] ; v a r c o n t e x t = n u l l ; f o r ( v a r i =0; i <names. l e n g t h ; i ++) { t r y { Kageyama (Kobe Univ.) Visualization 2013.05.07 *34 30 / 54
WebGL } c o n t e x t = canvas. g e t C o n t e x t ( names [ i ] ) ; } catch ( e ) {} i f ( c o n t e x t ) { break ; } } i f ( c o n t e x t ) { c o n t e x t. viewportwidth = canvas. width ; c o n t e x t. v i e w p o r t H e i g h t = canvas. h e i g h t ; } e l s e { a l e r t ( F a i l e d to c r e a t e c o n t e x t. ) ; } r e t u r n c o n t e x t ; Kageyama (Kobe Univ.) Visualization 2013.05.07 *35 31 / 54
WebGL f u n c t i o n l o a d S h a d e r ( type, s h a d e r S o u r c e ) { v a r s h a d e r = g l. c r e a t e S h a d e r ( t y p e ) ; g l. s h a d e r S o u r c e ( shader, s h a d e r S o u r c e ) ; g l. c o m p i l e S h a d e r ( s h a d e r ) ; } i f (! g l. g e t S h a d e r P arameter ( shader, g l. COMPILE STATUS) ) { a l e r t ( E r r o r c o m p i l i n g s h a d e r + g l. g e t S h a d e r I n f o L o g ( s h a d e r ) ) ; g l. d e l e t e S h a d e r ( s h a d e r ) ; r e t u r n n u l l ; } r e t u r n s h a d e r ; f u n c t i o n s e t u p S h a d e r s ( ) { v a r v e r t e x S h a d e r S o u r c e = Kageyama (Kobe Univ.) Visualization 2013.05.07 *36 32 / 54
WebGL v a r f r a g m e n t S h a d e r S o u r c e = p r e c i s i o n mediump f l o a t ; \n + v o i d main ( ) { \n + g l F r a g C o l o r = vec4 ( 0. 2, 0. 4, 0. 6, 1. 0 ) ; \n + } \n ; v a r v e r t e x S h a d e r = l o a d S h a d e r ( g l. VERTEX SHADER, v e r t e x S h a d e r S o u r c e ) ; v a r fragmentshader = l o a d S h a d e r ( g l.fragment SHADER, f r a g m e n t S h a d e r S o u r c e ) ; shaderprogram = g l. createprogram ( ) ; Kageyama (Kobe Univ.) Visualization 2013.05.07 *37 33 / 54
WebGL g l. a t t a c h S h a d e r ( shaderprogram, v e r t e x S h a d e r ) ; g l. a t t a c h S h a d e r ( shaderprogram, fragmentshader ) ; g l. l i n k P r o g r a m ( shaderprogram ) ; i f (! g l. getprogramparameter ( shaderprogram, g l. LINK STATUS) ) { a l e r t ( F a i l e d to s e t u p s h a d e r. ) ; } g l. useprogram ( shaderprogram ) ; } shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e = g l. g e t A t t r i b L o c a t i o n ( shaderprogram, a V e r t e x P o s i t i o n ) ; f u n c t i o n s e t u p B u f f e r s ( ) { Kageyama (Kobe Univ.) Visualization 2013.05.07 *38 34 / 54
WebGL } v e r t e x B u f f e r = g l. c r e a t e B u f f e r ( ) ; g l. b i n d B u f f e r ( g l. ARRAY BUFFER, v e r t e x B u f f e r ) ; v a r t r i a n g l e V e r t i c e s = [ 0. 0, 0. 0, 0. 0, 0. 8, 0. 0, 0. 0, 0. 0, 0. 5, 0. 0 ] ; g l. b u f f e r D a t a ( g l. ARRAY BUFFER, new F l o a t 3 2 A r r a y ( t r i a n g l e V e r t i c e s ), g l. STATIC DRAW) ; v e r t e x B u f f e r. i t e m S i z e = 3 ; v e r t e x B u f f e r. numberofitems = 3 ; f u n c t i o n draw ( ) { g l. v i e w p o r t ( 0, 0, g l. viewportwidth, g l. v i e w p o r t H e i g h t ) ; Kageyama (Kobe Univ.) Visualization 2013.05.07 *39 35 / 54
WebGL g l. c l e a r ( g l. COLOR BUFFER BIT) ; } g l. v e r t e x A t t r i b P o i n t e r ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e, v e r t e x B u f f e r. i t e m S i z e, g l. FLOAT, f a l s e, 0, 0) ; g l. e n a b l e V e r t e x A t t r i b A r r a y ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e ) ; g l. drawarrays ( g l. TRIANGLES, 0, v e r t e x B u f f e r. numberofitems ) ; f u n c t i o n s t a r t u p ( ) { canvas = document. getelementbyid ( myglcanvas ) ; g l = c r e a t e G L C o n t e x t ( canvas ) ; s e t u p S h a d e r s ( ) ; s e t u p B u f f e r s ( ) ; g l. c l e a r C o l o r ( 0. 8, 0. 8, 0. 4, 1. 0 ) ; draw ( ) ; Kageyama (Kobe Univ.) Visualization 2013.05.07 *40 36 / 54
WebGL } </ s c r i p t > </head> <body o nload= s t a r t u p ( ) ; > <canvas i d= myglcanvas width= 480 h e i g h t= 480 ></canvas> <d i v c l a s s= t e x t >H e l l o. This i s my f i r s t WebGL program.</ div > </body> </html> Kageyama (Kobe Univ.) Visualization 2013.05.07 *41 37 / 54
WebGL HTML5 canvas getcontext method experimental-webgl *42 getcontext method WebGLRenderingContext WebGL WebGLRenderingContext gl *42 webgl Kageyama (Kobe Univ.) Visualization 2013.05.07 *43 38 / 54
WebGL GLSL GPU GPU HTML JavaScript GLSL fragmentshadersource Kageyama (Kobe Univ.) Visualization 2013.05.07 *44 39 / 54
WebGL 1. 1.1 1.2 2. 2.1 2.2 3. 4. 5. 6. 7. WebGLRenderingContext Kageyama (Kobe Univ.) Visualization 2013.05.07 *45 40 / 54
WebGL GLSL *47 attribute float, vec2, vec3, vec4, mat2, mat3x2, mat4x2, mat2x3, mat3, mat4x3, mat4, mat2x4, mat3x4 attribute attribute *46 attribute *46 MAX VERTEX ATTRIBS *47 OpenGL 4.0 (Segal et al., 2010, p.60) Kageyama (Kobe Univ.) Visualization 2013.05.07 *48 41 / 54
WebGL int BindAttribLocation(unit program, unit index, const char *name); name attribute index program GL index int GetAttribLocation(unit program, const char *name); attribute (name) Kageyama (Kobe Univ.) Visualization 2013.05.07 *49 42 / 54
WebGL gl.useprogram(shaderprogram); shaderprogram. vertexpositionattribute = gl.getattriblocation(shaderprogram, avertexposition ); vertexpositionattribute shaderprogram. anynameisok = g l. g e t A t t r i b L o c a t i o n ( shaderprogram, a V e r t e x P o s i t i o n ) ; Kageyama (Kobe Univ.) Visualization 2013.05.07 *50 43 / 54
WebGL f u n c t i o n s e t u p B u f f e r s ( ) { v e r t e x B u f f e r = g l. c r e a t e B u f f e r ( ) ; g l. b i n d B u f f e r ( g l. ARRAY BUFFER, v e r t e x B u f f e r ) ; v a r t r i a n g l e V e r t i c e s = [ 0. 0, 0. 0, 0. 0, 0. 8, 0. 0, 0. 0, 0. 0, 0. 5, 0. 0 ] ; g l. b u f f e r D a t a ( g l. ARRAY BUFFER, new F l o a t 3 2 A r r a y ( t r i a n g l e V e r t i c e s ), g l. STATIC DRAW) ; v e r t e x B u f f e r. i t e m S i z e = 3 ; v e r t e x B u f f e r. numberofitems = 3 ; } Kageyama (Kobe Univ.) Visualization 2013.05.07 *51 44 / 54
WebGL WebGLRenderingContext createbuffer() WebGLBuffer JavaScript vertexbuffer vertexbuffer Kageyama (Kobe Univ.) Visualization 2013.05.07 *52 45 / 54
WebGL f u n c t i o n draw ( ) { g l. v i e w p o r t ( 0, 0, g l. viewportwidth, g l. v i e w p o r t H e i g h t ) ; g l. c l e a r ( g l. COLOR BUFFER BIT) ; } g l. v e r t e x A t t r i b P o i n t e r ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e, v e r t e x B u f f e r. i t e m S i z e, g l. FLOAT, f a l s e, 0, 0) ; g l. e n a b l e V e r t e x A t t r i b A r r a y ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e ) ; g l. drawarrays ( g l. TRIANGLES, 0, v e r t e x B u f f e r. numberofitems ) ; Kageyama (Kobe Univ.) Visualization 2013.05.07 *53 46 / 54
Kageyama (Kobe Univ.) Visualization 2013.05.07 *54 47 / 54
webgl sample triangle 01.html Kageyama (Kobe Univ.) Visualization 2013.05.07 *55 48 / 54
webgl sample triangle 01.html f u n c t i o n s e t u p S h a d e r s ( ) { v a r v e r t e x S h a d e r S o u r c e = a t t r i b u t e vec3 a V e r t e x P o s i t i o n ; \n + v o i d main ( ) { \n + g l P o s i t i o n = vec4 ( a V e r t e x P o s i t i o n, 1. 0 ) ; \n + g l P o s i t i o n = vec4 ( 0. 2, 1. 0, 1. 0, 1. 0 ) ; // Here!! \n + } \n ; Kageyama (Kobe Univ.) Visualization 2013.05.07 *56 49 / 54
Kageyama (Kobe Univ.) Visualization 2013.05.07 *57 50 / 54
Kageyama (Kobe Univ.) Visualization 2013.05.07 *58 51 / 54
webgl sample triangle 00.html 1. PDF 2. HTML gmail kageyama lecture@... kageyama.lecture@... PDF HTML 5/13 Kageyama (Kobe Univ.) Visualization 2013.05.07 *59 52 / 54
MAX VERTEX ATTRIBS, 41 varing, 11, 38, 19, 21, 24, 45, 14, 13, 13, 20, 14, 17 Kageyama (Kobe Univ.) Visualization 2013.05.07 *60 53 / 54
References References Richard S. Wright, J., Haemel, N., Sellers, G., and Lipchak, B. (2011). OpenGL SuperBible: Comprehensive Tutorial and Reference. Pearson Education, Inc, Boston, MA, 5th edition. Segal, M., Akeley, K., and (2010). OpenGL 4.0.. Kageyama (Kobe Univ.) Visualization 2013.05.07 *61 54 / 54