WebGL *1 DOM API 2013.05.21 *1 X021 2013 LR301 Kageyama (Kobe Univ.) Visualization 2013.05.21 1 / 37
WebGL WebGL DOM References Kageyama (Kobe Univ.) Visualization 2013.05.21 2 / 37
WebGL WebGL Kageyama (Kobe Univ.) Visualization 2013.05.21 3 / 37
WebGL canvas.getcontext() WebGLRenderingContext gl gl JavaScript camelcase attribute a e.g., avertexposition varying v e.g., vcolor uniform u e.g., umvmatrix Kageyama (Kobe Univ.) Visualization 2013.05.21 4 / 37
WebGL WebGL Kageyama (Kobe Univ.) Visualization 2013.05.21 5 / 37
WebGL JavaScript JavaScript console.log() Kageyama (Kobe Univ.) Visualization 2013.05.21 6 / 37
WebGL Chrome Firebug Firefox Web Inspector Kageyama (Kobe Univ.) Visualization 2013.05.21 7 / 37
WebGL Chrome WebGL Chrome Web Inspector Kageyama (Kobe Univ.) Visualization 2013.05.21 8 / 37
WebGL WebGL Inspector WebGL Chrome WebGL GL Kageyama (Kobe Univ.) Visualization 2013.05.21 9 / 37
WebGL WebGL Inspector: Trace Timeline State Textures Buffers Programs Frame controle Kageyama (Kobe Univ.) Visualization 2013.05.21 10 / 37
WebGL WebGL Inspector: Trace GL Capture Redundant calls Kageyama (Kobe Univ.) Visualization 2013.05.21 11 / 37
WebGL WebGL Inspector: Timeline webgl sample spiral 05.html Enable Kageyama (Kobe Univ.) Visualization 2013.05.21 12 / 37
WebGL WebGL Inspector: State Kageyama (Kobe Univ.) Visualization 2013.05.21 13 / 37
WebGL WebGL Inspector: Textures Kageyama (Kobe Univ.) Visualization 2013.05.21 14 / 37
WebGL WebGL Inspector: Buffers Buffer n Kageyama (Kobe Univ.) Visualization 2013.05.21 15 / 37
WebGL WebGL Inspector: Programs Program n attribute uniform Kageyama (Kobe Univ.) Visualization 2013.05.21 16 / 37
Kageyama (Kobe Univ.) Visualization 2013.05.21 17 / 37
01 WebGL Inspector Kageyama (Kobe Univ.) Visualization 2013.05.21 18 / 37
02 Kageyama (Kobe Univ.) Visualization 2013.05.21 19 / 37
DOM DOM Kageyama (Kobe Univ.) Visualization 2013.05.21 20 / 37
DOM document object document object = web.... document object.html Kageyama (Kobe Univ.) Visualization 2013.05.21 21 / 37
DOM DOM Document Object Model (DOM) HTML XML DOM HTML URL: http://www.w3.org/dom/domtr Kageyama (Kobe Univ.) Visualization 2013.05.21 22 / 37
DOM DOM Kageyama (Kobe Univ.) Visualization 2013.05.21 23 / 37
DOM DOM dom sample 00.html <!DOCTYPE HTML> <html l a n g= en > <head> < t i t l e >DOM Sample 00</ t i t l e > <meta c h a r s e t= u t f 8 > < s c r i p t t y p e= t e x t / j a v a s c r i p t > window. onload = f u n c t i o n ( ) { v a r p a r a g r a p h s = document. getelementsbytagname ( p ) ; v a r p00 = p a r a g r a p h s [ 0 ]. t e x t C o n t e n t ; // 1 s t p a r a g r a p h v a r p01 = p a r a g r a p h s [ 1 ]. t e x t C o n t e n t ; // 2nd p a r a g r a p h a l e r t ( p01 + p00 ) ; document. getelementbyid ( i d 0 0 0 ). s t y l e. c o l o r = r e d ; document. getelementbyid ( i d 0 0 0 ). t e x t C o n t e n t = Here i t i s! ; } Kageyama (Kobe Univ.) Visualization 2013.05.21 24 / 37
DOM </head> <body> <h2> Sample HTML </h2> <p> H e l l o. This i s the 1 s t p a r a g r a p h. </p> <p> Hi. I m 2nd p a r a g r a p h. </p> <d i v i d = i d 0 0 0 > You can d y n a m i c a l l y change the c o n t e n t s. </ div > </body> </html> Kageyama (Kobe Univ.) Visualization 2013.05.21 25 / 37
DOM Kageyama (Kobe Univ.) Visualization 2013.05.21 26 / 37
DOM Kageyama (Kobe Univ.) Visualization 2013.05.21 27 / 37
DOM DOM JavaScript DOM API HTML script <script id= shader vs type= x shader/x vertex > <script id="shader-fs" type="x-shader/x-fragment"> script type HTML Kageyama (Kobe Univ.) Visualization 2013.05.21 28 / 37
DOM webgl sample triangle 02 shader from DOM.html < s c r i p t i d= shader vs t y p e= x s h a d e r /x v e r t e x > 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 ; void main ( ) { 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 ) ; } </ s c r i p t > < s c r i p t i d= shader f s t y p e= x s h a d e r /x fragment > p r e c i s i o n mediump f l o a t ; void main ( ) { g l F r a g C o l o r = vec4 ( 0. 2, 0. 4, 0. 6, 1. 0 ) ; } </ s c r i p t > Kageyama (Kobe Univ.) Visualization 2013.05.21 29 / 37
DOM DOM f u n c t i o n loadshaderfromdom ( i d ) { v a r s h a d e r S c r i p t = document. getelementbyid ( i d ) ; i f (! s h a d e r S c r i p t ) { r e t u r n n u l l ; } v a r s h a d e r S o u r c e = ; v a r c u r r e n t C h i l d = s h a d e r S c r i p t. f i r s t C h i l d ; w h i l e ( c u r r e n t C h i l d ) { i f ( c u r r e n t C h i l d. nodetype == 3) { // 3 <= TEXT NODE s h a d e r S o u r c e += c u r r e n t C h i l d. t e x t C o n t e n t ; } c u r r e n t C h i l d = c u r r e n t C h i l d. n e x t S i b l i n g ; } Kageyama (Kobe Univ.) Visualization 2013.05.21 30 / 37
DOM v a r s h a d e r ; i f ( s h a d e r S c r i p t. t y p e == x s h a d e r /x fragment ) { s h a d e r = g l. c r e a t e S h a d e r ( g l.fragment SHADER) ; } e l s e i f ( s h a d e r S c r i p t. t y p e == x s h a d e r /x v e r t e x ) { s h a d e r = g l. c r e a t e S h a d e r ( g l. VERTEX SHADER) ; } e l s e { r e t u r n n u l l ; } 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 ( g l. g e t S h a d e r I n f o L o g ( s h a d e r ) ) ; Kageyama (Kobe Univ.) Visualization 2013.05.21 31 / 37
DOM } 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 = loadshaderfromdom ( shader vs ) ; v a r fragmentshader = loadshaderfromdom ( shader f s ) ; Kageyama (Kobe Univ.) Visualization 2013.05.21 32 / 37
DOM Kageyama (Kobe Univ.) Visualization 2013.05.21 33 / 37
Kageyama (Kobe Univ.) Visualization 2013.05.21 34 / 37
DOM API *2 1. PDF 2. HTML html gmail kageyama.lecture@... PDF HTML 5/27 15:00 *2 Kageyama (Kobe Univ.) Visualization 2013.05.21 35 / 37
camelcase, 4 DOM, 20 Firebug, 7 Web Inspector, 9, 6, 4 Kageyama (Kobe Univ.) Visualization 2013.05.21 36 / 37
References References Kageyama (Kobe Univ.) Visualization 2013.05.21 37 / 37