DrawArrays DrawElements 05 1 2015.05.19 Kageyama (Kobe Univ.) 2015.05.19 1 / 36
Kageyama (Kobe Univ.) 2015.05.19 2 / 36
Kageyama (Kobe Univ.) 2015.05.19 3 / 36
Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダ プリミティブ組み立て ラスタ化 フラグメントシェーダ Kageyama (Kobe Univ.) 2015.05.19 4 / 36
n n Kageyama (Kobe Univ.) 2015.05.19 5 / 36
頂点シェーダ用ソースコード (GLSL) 頂点 attribute 変数 ( 座標 色など ) 頂点シェーダ 組み込み変数 gl_position gl_frontfacing g_lpointsize ユーザ定義 uniform 変数 ( 変換行列 光源位置 ) ユーザ定義の varying 変数 Kageyama (Kobe Univ.) 2015.05.19 6 / 36
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.19 7 / 36
DrawArrays DrawElements Kageyama (Kobe Univ.) 2015.05.19 8 / 36
gl.clear() gl.clearcolor() Kageyama (Kobe Univ.) 2015.05.19 9 / 36
3 OpenGL 1.x TRIANGLES, TRIANGLE STRIP, TRIANGLE FAN Kageyama (Kobe Univ.) 2015.05.19 10 / 36
gl.triangles v2 v3 v5 v7 v8 v0 v1 v6 v4 Kageyama (Kobe Univ.) 2015.05.19 11 / 36
gl.triangle STRIP v6 v0 v2 v4 v7 v1 v3 v5 Kageyama (Kobe Univ.) 2015.05.19 12 / 36
gl.triangle FAN v3 v2 v4 v1 v0 v5 Kageyama (Kobe Univ.) 2015.05.19 13 / 36
Front Face Winding Order Counter Clock Wise, CCW Clock Wise, CW v2 表 v3 表 v5 v7 裏 v8 v0 v1 v6 v4 Kageyama (Kobe Univ.) 2015.05.19 14 / 36
culling gl.frontface(gl.ccw); // gl.enable(gl.cull FACE); // disabled gl.cullface(gl.back); // Kageyama (Kobe Univ.) 2015.05.19 15 / 36
TRIANGLE STRIP 1 v 0 v 1 v 2 2 v 2 v 1 v 3 3 v 2 v 3 v 4 4 v 4 v 3 v 5 5 v 4 v 5 v 6 6 v 6 v 5 v 7 v4 v6 v0 v2 v7 v5 v1 v3 Kageyama (Kobe Univ.) 2015.05.19 16 / 36
gl.lines v0 v3 v2 v4 v1 v5 Kageyama (Kobe Univ.) 2015.05.19 17 / 36
gl.line STRIP v0 v2 v3 v4 v1 v5 Kageyama (Kobe Univ.) 2015.05.19 18 / 36
gl.line LOOP v0 v2 v3 v4 v1 v5 Kageyama (Kobe Univ.) 2015.05.19 19 / 36
point sprite gl PointSize Kageyama (Kobe Univ.) 2015.05.19 20 / 36
gl.drawarrays() gl.drawelements() Kageyama (Kobe Univ.) 2015.05.19 21 / 36
gl.drawarrays() void drawarrays(glenum mode, GLint first, GLsizei count) mode gl.x: X={POINTS, LINES, LINE LOOP, LINE STRIP, TRIANGLES, TRIANGLE STRIP, TRIANGLE FAN} first count gl.array BUFFER gl.array BUFFER Kageyama (Kobe Univ.) 2015.05.19 22 / 36
// 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,... // 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. 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,... // 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,... Kageyama (Kobe Univ.) 2015.05.19 23 / 36
Kageyama (Kobe Univ.) 2015.05.19 24 / 36
drawarrays() v 0 v 1 v 2 v 3 v 4 v 5 gl.triangles v 2 v 3 v0 v5 v1 v2 = v3 v4 Kageyama (Kobe Univ.) 2015.05.19 25 / 36
drawelements() v 0 v 1 v 2 v 3 v 4 0 1 2 2 3 4 gl.triangles WebGLBuffer v0 v4 v1 v2 v3 Kageyama (Kobe Univ.) 2015.05.19 26 / 36
gl.drawelements() void drawelements(glenum mode, GLsizei count, GLenum type, GLintptr offset) mode gl.x: X={POINTS, LINES, LINE LOOP, LINE STRIP, TRIANGLES, TRIANGLE STRIP, TRIANGLE FAN} ab gl.element ARRAY BUFFER count ab type ab gl.unsigned BYTE gl.unsigned SHORT offset ab Kageyama (Kobe Univ.) 2015.05.19 27 / 36
webgl sample triangle 02.html 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, 0. 8 66025, 0. 0, 0.500000, 0. 0 0 0000, 0. 0, 1.000000, 0.866025, 0. 0, 0. 0 0 0 0 0 0, 0.866025, 0. 0, 1. 0 0 0 0 0 0, 0.866025, 0. 0, 0. 5 0 0 0 0 0, 0. 0 00000, 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 ; Kageyama (Kobe Univ.) 2015.05.19 28 / 36
webgl sample triangle 02.html } i n d 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. ELEMENT ARRAY BUFFER, i n d e x B u f f e r ) ; v a r indexnumbers = [ 0, 1, 5, 1, 2, 3, 3, 4, 5 ] ; g l. b u f f e r D a t a ( g l. ELEMENT ARRAY BUFFER, new U i n t 1 6 A r r a y ( indexnumbers ), g l. STATIC DRAW) ; i n d e x B u f f e r. s i z e = 9 ; 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) ; Kageyama (Kobe Univ.) 2015.05.19 29 / 36
webgl sample triangle 02.html 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, 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. FLOAT, } g l. drawelements ( g l. TRIANGLES, i n d e x B u f f e r. s i z e, g l. UNSIGNED SHORT, 0) ; 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.19 30 / 36
webgl sample triangle 02.html Kageyama (Kobe Univ.) 2015.05.19 31 / 36
Kageyama (Kobe Univ.) 2015.05.19 32 / 36
00 webgl_sample_triangle_02.html index LINE STRIP Kageyama (Kobe Univ.) 2015.05.19 33 / 36
01 drawarrays Kageyama (Kobe Univ.) 2015.05.19 34 / 36
02 drawarrays TRIANLGE STRIP Kageyama (Kobe Univ.) 2015.05.19 35 / 36
03 drawelements Kageyama (Kobe Univ.) 2015.05.19 36 / 36