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

Size: px

Start display at page:

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

はすなさわなか
6 years ago
Views:

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

2 WebGL WebGL DOM References Kageyama (Kobe Univ.) Visualization / 37

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

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 / 37

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

6 WebGL JavaScript JavaScript console.log() Kageyama (Kobe Univ.) Visualization / 37

7 WebGL Chrome Firebug Firefox Web Inspector Kageyama (Kobe Univ.) Visualization / 37

8 WebGL Chrome WebGL Chrome Web Inspector Kageyama (Kobe Univ.) Visualization / 37

9 WebGL WebGL Inspector WebGL Chrome WebGL GL Kageyama (Kobe Univ.) Visualization / 37

10 WebGL WebGL Inspector: Trace Timeline State Textures Buffers Programs Frame controle Kageyama (Kobe Univ.) Visualization / 37

11 WebGL WebGL Inspector: Trace GL Capture Redundant calls Kageyama (Kobe Univ.) Visualization / 37

12 WebGL WebGL Inspector: Timeline webgl sample spiral 05.html Enable Kageyama (Kobe Univ.) Visualization / 37

13 WebGL WebGL Inspector: State Kageyama (Kobe Univ.) Visualization / 37

14 WebGL WebGL Inspector: Textures Kageyama (Kobe Univ.) Visualization / 37

15 WebGL WebGL Inspector: Buffers Buffer n Kageyama (Kobe Univ.) Visualization / 37

16 WebGL WebGL Inspector: Programs Program n attribute uniform Kageyama (Kobe Univ.) Visualization / 37

17 Kageyama (Kobe Univ.) Visualization / 37

18 01 WebGL Inspector Kageyama (Kobe Univ.) Visualization / 37

19 02 Kageyama (Kobe Univ.) Visualization / 37

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

21 DOM document object document object = web.... document object.html Kageyama (Kobe Univ.) Visualization / 37

22 DOM DOM Document Object Model (DOM) HTML XML DOM HTML URL: Kageyama (Kobe Univ.) Visualization / 37

23 DOM DOM Kageyama (Kobe Univ.) Visualization / 37

24 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 / 37

25 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 / 37

26 DOM Kageyama (Kobe Univ.) Visualization / 37

27 DOM Kageyama (Kobe Univ.) Visualization / 37

28 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 / 37

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

30 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 / 37

31 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 / 37

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

33 DOM Kageyama (Kobe Univ.) Visualization / 37

34 Kageyama (Kobe Univ.) Visualization / 37

35 DOM API *2 1. PDF 2. HTML html gmail PDF HTML 5/27 15:00 *2 Kageyama (Kobe Univ.) Visualization / 37

36 camelcase, 4 DOM, 20 Firebug, 7 Web Inspector, 9, 6, 4 Kageyama (Kobe Univ.) Visualization / 37

37 References References Kageyama (Kobe Univ.) Visualization / 37

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

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