WebGL WebGL DOM Kageyama (Kobe Univ.) Visualization / 39

Size: px

Start display at page:

Download "WebGL WebGL DOM Kageyama (Kobe Univ.) Visualization / 39"

みいかねぎたや
7 years ago
Views:

1 WebGL DOM API X Kageyama (Kobe Univ.) Visualization / 39

2 WebGL WebGL DOM Kageyama (Kobe Univ.) Visualization / 39

3 WebGL WebGL Kageyama (Kobe Univ.) Visualization / 39

4 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 / 39

5 WebGL WebGL Kageyama (Kobe Univ.) Visualization / 39

6 WebGL JavaScript Safari JavaScript console.log( ); printf Kageyama (Kobe Univ.) Visualization / 39

7 WebGL Safari HTML JavaScript console.log() Kageyama (Kobe Univ.) Visualization / 39

8 WebGL WebGL Chrome: Chrome Firefox: Firebug Firefox : Web Inspector Kageyama (Kobe Univ.) Visualization / 39

9 WebGL Safari Web Inspector Sarafi Web OS X & ios Kageyama (Kobe Univ.) Visualization / 39

10 WebGL Safari Web Inspector WebGL Web :... Web Kageyama (Kobe Univ.) Visualization / 39

11 WebGL Web Inspector detatch Kageyama (Kobe Univ.) Visualization / 39

12 WebGL Inspecting DOM DOM tree DOM DOM Kageyama (Kobe Univ.) Visualization / 39

13 WebGL HTML canvas Kageyama (Kobe Univ.) Visualization / 39

14 WebGL DOM HTML DOM Kageyama (Kobe Univ.) Visualization / 39

15 WebGL Timelines JavaScript Kageyama (Kobe Univ.) Visualization / 39

16 WebGL Timelines & JavaScript JavaScript Kageyama (Kobe Univ.) Visualization / 39

17 WebGL Kageyama (Kobe Univ.) Visualization / 39

18 Kageyama (Kobe Univ.) Visualization / 39

19 drawelements TRIANLGE STRIP WebGL Inspector Kageyama (Kobe Univ.) Visualization / 39

20 DOM DOM Kageyama (Kobe Univ.) Visualization / 39

21 DOM DOM Document Object Model (DOM) HTML XML API URL: Kageyama (Kobe Univ.) Visualization / 39

22 DOM DOM document object.html Web Inspector DOM Kageyama (Kobe Univ.) Visualization / 39

23 DOM DOM node tree <html> <head> <title>sample</title> </head> <body> <h1>test</h1> <p><a href=" Univ.</a> is hilly. </p> </body> </html> Kageyama (Kobe Univ.) Visualization / 39

24 DOM DOM node tree DOM Kageyama (Kobe Univ.) Visualization / 39

25 DOM root document.firstchild.childnodes[1].childnodes[1].childnodes[1].nodevalue is hilly. getelementsbytagname() id getelementbyid() Kageyama (Kobe Univ.) Visualization / 39

26 DOM DOM Kageyama (Kobe Univ.) Visualization / 39

27 DOM dom sample 00.html Web Inspector Web Inspector DOM Kageyama (Kobe Univ.) Visualization / 39

28 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 ). s t y l e. c o l o r = r e d ; document. getelementbyid ( i d ). t e x t C o n t e n t = Here i t i s! ; } Kageyama (Kobe Univ.) Visualization / 39

29 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 > 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 / 39

30 DOM Kageyama (Kobe Univ.) Visualization / 39

31 DOM Kageyama (Kobe Univ.) Visualization / 39

32 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 / 39

33 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 / 39

34 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 / 39

35 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 / 39

36 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 / 39

37 DOM Kageyama (Kobe Univ.) Visualization / 39

38 Kageyama (Kobe Univ.) Visualization / 39

39 WebGL DOM API 1. PDF report 02.pdf 2. HTML report 02.html html htm 2 6/2 24:00 Kageyama (Kobe Univ.) Visualization / 39

WebGL 1 DOM API 1 X LR301 Kageyama (Kobe Univ.) Visualization / 37

WebGL *1 DOM API *1 X LR301 Kageyama (Kobe Univ.) Visualization / 37 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