WebGL DOM API 2014.05.27 X021 2014 Kageyama (Kobe Univ.) Visualization 2014.05.27 1 / 39
WebGL WebGL DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 2 / 39
WebGL WebGL Kageyama (Kobe Univ.) Visualization 2014.05.27 3 / 39
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 2014.05.27 4 / 39
WebGL WebGL Kageyama (Kobe Univ.) Visualization 2014.05.27 5 / 39
WebGL JavaScript Safari JavaScript console.log( ); printf Kageyama (Kobe Univ.) Visualization 2014.05.27 6 / 39
WebGL Safari HTML JavaScript console.log() Kageyama (Kobe Univ.) Visualization 2014.05.27 7 / 39
WebGL WebGL Chrome: Chrome Firefox: Firebug Firefox : Web Inspector Kageyama (Kobe Univ.) Visualization 2014.05.27 8 / 39
WebGL Safari Web Inspector Sarafi Web OS X & ios Kageyama (Kobe Univ.) Visualization 2014.05.27 9 / 39
WebGL Safari Web Inspector WebGL Web :... Web Kageyama (Kobe Univ.) Visualization 2014.05.27 10 / 39
WebGL Web Inspector detatch Kageyama (Kobe Univ.) Visualization 2014.05.27 11 / 39
WebGL Inspecting DOM DOM tree DOM DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 12 / 39
WebGL HTML canvas Kageyama (Kobe Univ.) Visualization 2014.05.27 13 / 39
WebGL DOM HTML DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 14 / 39
WebGL Timelines JavaScript Kageyama (Kobe Univ.) Visualization 2014.05.27 15 / 39
WebGL Timelines & JavaScript JavaScript Kageyama (Kobe Univ.) Visualization 2014.05.27 16 / 39
WebGL Kageyama (Kobe Univ.) Visualization 2014.05.27 17 / 39
Kageyama (Kobe Univ.) Visualization 2014.05.27 18 / 39
drawelements TRIANLGE STRIP WebGL Inspector Kageyama (Kobe Univ.) Visualization 2014.05.27 19 / 39
DOM DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 20 / 39
DOM DOM Document Object Model (DOM) HTML XML API URL: http://www.w3.org/dom/domtr Kageyama (Kobe Univ.) Visualization 2014.05.27 21 / 39
DOM DOM document object.html Web Inspector DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 22 / 39
DOM DOM node tree <html> <head> <title>sample</title> </head> <body> <h1>test</h1> <p><a href="http://www.kobe-u.ac.jp/">kobe Univ.</a> is hilly. </p> </body> </html> Kageyama (Kobe Univ.) Visualization 2014.05.27 23 / 39
DOM DOM node tree DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 24 / 39
DOM root document.firstchild.childnodes[1].childnodes[1].childnodes[1].nodevalue is hilly. getelementsbytagname() id getelementbyid() Kageyama (Kobe Univ.) Visualization 2014.05.27 25 / 39
DOM DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 26 / 39
DOM dom sample 00.html Web Inspector Web Inspector DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 27 / 39
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 2014.05.27 28 / 39
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 2014.05.27 29 / 39
DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 30 / 39
DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 31 / 39
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 2014.05.27 32 / 39
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 2014.05.27 33 / 39
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 2014.05.27 34 / 39
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 2014.05.27 35 / 39
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 2014.05.27 36 / 39
DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 37 / 39
Kageyama (Kobe Univ.) Visualization 2014.05.27 38 / 39
WebGL DOM API 1. PDF report 02.pdf 2. HTML report 02.html html htm kageyama.lecture@gmail 2 6/2 24:00 Kageyama (Kobe Univ.) Visualization 2014.05.27 39 / 39