WebGL Safari WebGL WebGL Safari Kageyama (Kobe Univ.) / 5

04 1 2015.05.12 Kageyama (Kobe Univ.) 2015.05.12 1 / 55

WebGL Safari WebGL WebGL http://www.khronos.org/webgl/ http://www.khronos.org/webgl/wiki/demo_repository Safari Kageyama (Kobe Univ.) 2015.05.12 2 / 55

WebGL WebBL = HTML5 canvas JavaScript 3D CG API Web GPU OpenGL UI Kageyama (Kobe Univ.) 2015.05.12 3 / 55

WebGL WebGL Kageyama (Kobe Univ.) 2015.05.12 4 / 55

WebGL WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダ プリミティブ組み立て ラスタ化 フラグメントシェーダ シザーテスト マルチサンプリング ステンシルテスト デプステスト アルファブレンディング ディザリング WebGL 用描画バッファ cavas の他の画像 スクリーン Kageyama (Kobe Univ.) 2015.05.12 5 / 55

WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダ プリミティブ組み立て ラスタ化 フラグメントシェーダ シザーテスト マルチサンプリング ステンシルテスト デプステスト アルファブレンディング ディザリング WebGL 用描画バッファ cavas の他の画像 スクリーン Kageyama (Kobe Univ.) 2015.05.12 6 / 55

WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダ プリミティブ組み立て ラスタ化 フラグメントシェーダ Kageyama (Kobe Univ.) 2015.05.12 7 / 55

WebGL WebGL Web HTML + CSS + JavaScript WebGL HTML + CSS + JavaScript + OpenGL SL Kageyama (Kobe Univ.) 2015.05.12 8 / 55

WebGL n n Kageyama (Kobe Univ.) 2015.05.12 9 / 55

WebGL 頂点シェーダ用ソースコード (GLSL) 頂点 attribute 変数 ( 座標 色など ) 頂点シェーダ 組み込み変数 gl_position gl_frontfacing g_lpointsize ユーザ定義 uniform 変数 ( 変換行列 光源位置 ) ユーザ定義の varying 変数 Kageyama (Kobe Univ.) 2015.05.12 10 / 55

WebGL 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.) 2015.05.12 11 / 55

WebGL 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.) 2015.05.12 12 / 55

WebGL 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.) 2015.05.12 13 / 55

WebGL 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.) 2015.05.12 14 / 55

WebGL 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.) 2015.05.12 15 / 55

WebGL primitive assembly 3 OpenGL 1.x 3 Kageyama (Kobe Univ.) 2015.05.12 16 / 55

WebGL プリミティブ フラグメント Kageyama (Kobe Univ.) 2015.05.12 17 / 55

WebGL varying varying varying varyingvalue_1 varyingvalue_2 varyingvalue_3 Kageyama (Kobe Univ.) 2015.05.12 18 / 55

WebGL フラグメントシェーダ用 ソースコード (GLSL) 組み込み変数 gl_position gl_frontfacing g_lpointsize フラグメント シェーダ 組み込み変数 gl_fragcolor ユーザ定義 varying 変数 ユニフォーム変数 テクスチャ用サンプラ Kageyama (Kobe Univ.) 2015.05.12 19 / 55

WebGL 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.) 2015.05.12 20 / 55

WebGL WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダ プリミティブ組み立て ラスタ化 フラグメントシェーダ シザーテスト マルチサンプリング ステンシルテスト デプステスト アルファブレンディング ディザリング WebGL 用描画バッファ cavas の他の画像 スクリーン Kageyama (Kobe Univ.) 2015.05.12 21 / 55

WebGL scissors OpenGL Super Bible (2011, p.112) シザーテスト不合格 シザーテスト 合格 Kageyama (Kobe Univ.) 2015.05.12 22 / 55

WebGL OpenGL Super Bible (2011, p.382) Kageyama (Kobe Univ.) 2015.05.12 23 / 55

WebGL OpenGL Super Bible (2011, p.399) Kageyama (Kobe Univ.) 2015.05.12 24 / 55

WebGL Kageyama (Kobe Univ.) 2015.05.12 25 / 55

WebGL Kageyama (Kobe Univ.) 2015.05.12 26 / 55

WebGL Kageyama (Kobe Univ.) 2015.05.12 27 / 55

WebGL WebGL Kageyama (Kobe Univ.) 2015.05.12 28 / 55

WebGL WebGL webgl sample triangle 00.html Safari Kageyama (Kobe Univ.) 2015.05.12 29 / 55

WebGL 3 HTML WebGL canvas Kageyama (Kobe Univ.) 2015.05.12 30 / 55

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.) 2015.05.12 31 / 55

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.) 2015.05.12 32 / 55

WebGL c o l o r : b l a c k ; } </ s t y l e> <s c r i p t type= 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.) 2015.05.12 33 / 55

WebGL } c o n t e x t = canvas. g e t C o n t e x t ( names [ i ] ) ; } c a t c h ( e ) {} i f ( c o n t e x t ) { b reak ; } } 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.) 2015.05.12 34 / 55

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 ShaderParameter ( 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.) 2015.05.12 35 / 55

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.) 2015.05.12 36 / 55

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.) 2015.05.12 37 / 55

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.) 2015.05.12 38 / 55

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.) 2015.05.12 39 / 55

WebGL } </ s c r i p t> </ head> <body onload= s t a r t u p ( ) ; > <canvas i d= myglcanvas width= 480 height= 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.</ d i v> </ body> </ html> Kageyama (Kobe Univ.) 2015.05.12 40 / 55

WebGL HTML5 canvas getcontext method experimental-webgl getcontext method WebGLRenderingContext WebGL WebGLRenderingContext gl

WebGL GLSL GPU GPU HTML JavaScript GLSL fragmentshadersource Kageyama (Kobe Univ.) 2015.05.12 42 / 55

WebGL 1. 1.1 1.2 2. 2.1 2.2 3. 4. 5. 6. 7. WebGLRenderingContext Kageyama (Kobe Univ.) 2015.05.12 43 / 55

WebGL GLSL attribute float, vec2, vec3, vec4, mat2, mat3x2, mat4x2, mat2x3, mat3, mat4x3, mat4, mat2x4, mat3x4 attribute attribute attribute

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.) 2015.05.12 45 / 55

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.) 2015.05.12 46 / 55

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.) 2015.05.12 47 / 55

WebGL WebGLRenderingContext createbuffer() WebGLBuffer JavaScript vertexbuffer vertexbuffer Kageyama (Kobe Univ.) 2015.05.12 48 / 55

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.) 2015.05.12 49 / 55

Kageyama (Kobe Univ.) 2015.05.12 50 / 55

webgl sample triangle 01.html Kageyama (Kobe Univ.) 2015.05.12 51 / 55

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.) 2015.05.12 52 / 55

Kageyama (Kobe Univ.) 2015.05.12 53 / 55

Kageyama (Kobe Univ.) 2015.05.12 54 / 55

webgl sample triangle 00.html 1. PDF 2. HTML kageyama.lecture@gmail.com PDF Web 5/19 5 Kageyama (Kobe Univ.) 2015.05.12 55 / 55