WebGL *1 DrawArrays DrawElements 2013.05.14 *1 X021 2013 LR301 Kageyama (Kobe Univ.) Visualization 2013.05.14 1 / 34
DrawArrays DrawElements References Kageyama (Kobe Univ.) Visualization 2013.05.14 2 / 34
(Anyuru and, 2012) 3.1 3.2 Kageyama (Kobe Univ.) Visualization 2013.05.14 3 / 34
*2 6 *3 *4 *2 *3 *4 Kageyama (Kobe Univ.) Visualization 2013.05.14 4 / 34
DrawArrays DrawElements Kageyama (Kobe Univ.) Visualization 2013.05.14 5 / 34
gl.clear() gl.clearcolor() Kageyama (Kobe Univ.) Visualization 2013.05.14 6 / 34
OpenGL 1.x 4 OpenGL 3 TRIANGLES, TRIANGLE STRIP, TRIANGLE FAN Kageyama (Kobe Univ.) Visualization 2013.05.14 7 / 34
gl.triangles v2 v3 v5 v7 v8 v0 v1 v6 v4 Kageyama (Kobe Univ.) Visualization 2013.05.14 8 / 34
gl.triangle STRIP v6 v0 v2 v4 v7 v1 v3 v5 Kageyama (Kobe Univ.) Visualization 2013.05.14 9 / 34
gl.triangle FAN v3 v2 v4 v1 v0 v5 Kageyama (Kobe Univ.) Visualization 2013.05.14 10 / 34
Front Face Winding Order Counter Clock Wise, CCW Clock Wise, CW v2 表 v3 表 v5 v7 裏 v8 v0 v1 v6 v4 Kageyama (Kobe Univ.) Visualization 2013.05.14 11 / 34
culling gl.frontface(gl.ccw); // gl.enable(gl.cull FACE); // disabled gl.cullface(gl.back); // Kageyama (Kobe Univ.) Visualization 2013.05.14 12 / 34
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 v6 v0 v2 v4 v7 v5 v1 v3 Kageyama (Kobe Univ.) Visualization 2013.05.14 13 / 34
gl.lines v0 v3 v2 v4 v1 v5 Kageyama (Kobe Univ.) Visualization 2013.05.14 14 / 34
gl.line STRIP v0 v2 v3 v4 v1 v5 Kageyama (Kobe Univ.) Visualization 2013.05.14 15 / 34
gl.line LOOP v0 v2 v3 v4 v1 v5 Kageyama (Kobe Univ.) Visualization 2013.05.14 16 / 34
point sprite gl PointSize Kageyama (Kobe Univ.) Visualization 2013.05.14 17 / 34
gl.drawarrays() gl.drawelements() Kageyama (Kobe Univ.) Visualization 2013.05.14 18 / 34
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.) Visualization 2013.05.14 19 / 34
// 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.) Visualization 2013.05.14 20 / 34
Kageyama (Kobe Univ.) Visualization 2013.05.14 21 / 34
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.) Visualization 2013.05.14 22 / 34
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.) Visualization 2013.05.14 23 / 34
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.) Visualization 2013.05.14 24 / 34
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.) Visualization 2013.05.14 25 / 34
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.) Visualization 2013.05.14 26 / 34
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.) Visualization 2013.05.14 27 / 34
webgl sample triangle 02.html Kageyama (Kobe Univ.) Visualization 2013.05.14 28 / 34
Kageyama (Kobe Univ.) Visualization 2013.05.14 29 / 34
01 drawarrays Kageyama (Kobe Univ.) Visualization 2013.05.14 30 / 34
02 drawarrays TRIANLGE STRIP Kageyama (Kobe Univ.) Visualization 2013.05.14 31 / 34
03 drawelements Kageyama (Kobe Univ.) Visualization 2013.05.14 32 / 34
CCW, 10 CW, 10 drawarrays, 17, 18 drawelements, 17, 22 Front Face, 10 TRIANGLE FAN, 9 TRIANGLE STRIP, 8 TRIANGLES, 7 Winding Order, 10, 11, 6, 16 Kageyama (Kobe Univ.) Visualization 2013.05.14 33 / 34
References References Anyuru, A. and (2012). WebGL.. Kageyama (Kobe Univ.) Visualization 2013.05.14 34 / 34