Kageyama (Kobe Univ.) / 41

Size: px

Start display at page:

Download "Kageyama (Kobe Univ.) 2015.06.23 2 / 41"

ゆみかすすむ
7 years ago
Views:

1 Kageyama (Kobe Univ.) / 41

2 Kageyama (Kobe Univ.) / 41

3 [ 1, +1] [ 1, +1] [ 1, +1] Kageyama (Kobe Univ.) / 41

4 Kageyama (Kobe Univ.) / 41

5 z = z top bottom y x z far near right left Kageyama (Kobe Univ.) / 41

6 y x z (right, bottom, near) z' y' x' (1,0,-1) (1,1,-1) (left, top, near) mat4.ortho(left, right, bottom, top, near, far, projectionmatrix); Kageyama (Kobe Univ.) / 41

7 z z height y x z far near width Kageyama (Kobe Univ.) / 41

8 y y' x z height z' x' (1,0,-1) (1,1,-1) far near width Kageyama (Kobe Univ.) / 41

9 y = - β -1 z y y' z z' x y z = β x/z β y/z c 1 z + c 2 β > 0, c 1, c 2 x y β/z y = β 1 z y = +1 Kageyama (Kobe Univ.) / 41

10 x y z = x y z w = x + t x y + t y z + t z t x t y t z x y z 1 Kageyama (Kobe Univ.) / 41

11 x y z x y z w = = β x/z β y/z c 1 z + c 2???????????????? x y z 1

12 x y z x y z w = = β x/z β y/z c 1 z + c 2???????????????? x y z 1

13 z varying プリミティブフラグメント Kageyama (Kobe Univ.) / 41

14 z varyingvalue_1 varyingvalue_2 varyingvalue_3 Kageyama (Kobe Univ.) / 41

15 z z y z Kageyama (Kobe Univ.) / 41

16 p 1/z 直線 ay+bz=c 1 直線 z = c 2 y z 座標 (y, z) 座標 (p, c 2 ) (ap/c 2 +b)z=c 1 1 z = a p + b c 2 c 1 c 1 Kageyama (Kobe Univ.) / 41

17 z z z = α γ/z z z z γ > 0 z z 1 z +1 α γ x, y z ( x y ) = ( β x/z β y/z ) Kageyama (Kobe Univ.) / 41

18 (x, y, z) t x y z = β x/z β y/z α γ/z 3 z OpenGL 2 Kageyama (Kobe Univ.) / 41

19 (1) x y z w = β β α γ (2) w x x /w y z = y /w z /w x y z 1 Kageyama (Kobe Univ.) / 41

20 Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API (x, y, z, w) (x', y', z') 頂点シェーダプリミティブ組み立てラスタ化フラグメントシェーダ (x, y, z ) = (x/w, y/w, z/w) GPU Kageyama (Kobe Univ.) / 41

21 height y x z far near width β β α γ α, β, γ Kageyama (Kobe Univ.) / 41

22 height y x z far near width mat4.perspective(fovy, aspect, near, far, projectionmatrix); fovy field of view y aspect frustum mat4.frustum(left, right, bottom, top, near, far, projectionmatrix); Kageyama (Kobe Univ.) / 41

23 Kageyama (Kobe Univ.) / 41

24 Kageyama (Kobe Univ.) / 41

25 3D Kageyama (Kobe Univ.) / 41

26 webgl sample spiral 00.html v a r dz = 0. 1 ; v a r p i t c h = 1. 0 ; v a r pof = 0 ; // p o s i t i o n O f f s e t I n F l o a t s v a r c o f = 1 2 ; // c o l o r O f f s e t I n B y t e s f o r ( v a r k=0; k<nz ; k++) { var z = k dz ; p o s i t i o n V i e w [ pof ] = 0. 0 ; // x p o s i t i o n V i e w [1+ pof ] = 0. 0 ; // y p o s i t i o n V i e w [2+ pof ] = z ; // z c o l o r V i e w [ c o f ] = ; // R c o l o r V i e w [1+ c o f ] = ; // G c o l o r V i e w [2+ c o f ] = ; // B c o l o r V i e w [3+ c o f ] = ; // A pof +=v e r t e x S i z e I n F l o a t s ; Kageyama (Kobe Univ.) / 41

27 c o f +=v e r t e x S i z e I n B y t e s ; } phase = p i t c h z ; p o s i t i o n V i e w [ pof ] = Math. cos ( phase ) ; // x p o s i t i o n V i e w [1+ pof ] = Math. s i n ( phase ) ; // y p o s i t i o n V i e w [2+ pof ] = z ; // z c o l o r V i e w [ c o f ] = 255 Math. cos ( phase ) ; // R c o l o r V i e w [1+ c o f ] = 255 Math. s i n ( phase ) ; // G c o l o r V i e w [2+ c o f ] = 255 Math. s i n ( phase 0. 2 ) ; // B c o l o r V i e w [3+ c o f ] = ; // A pof +=v e r t e x S i z e I n F l o a t s ; c o f +=v e r t e x S i z e I n B y t e s ; Kageyama (Kobe Univ.) / 41

28 Kageyama (Kobe Univ.) / 41

29 webgl sample spiral 00.html dz 156 Kageyama (Kobe Univ.) / 41

30 webgl sample spiral 01.html modelviewmatrix attribute mat4. i d e n t i t y ( modelviewmatrix ) ; mat4. t r a n s l a t e ( modelviewmatrix, [ 0. 8, 0. 5, 0.8]) ; mat4. s c a l e ( modelviewmatrix, [ 0. 3, 0. 3, 0. 3 ] ) ; mat4. r o t a t e X ( modelviewmatrix, Math. PI /3) ; mat4. r o t a t e Y ( modelviewmatrix, Math. PI /3) ; g l. u n i f o r m M a t r i x 4 f v ( u n i L o c a t i o n, f a l s e, modelviewmatrix ) ; // </new> g l. c l e a r ( g l. COLOR BUFFER BIT) ; Kageyama (Kobe Univ.) / 41

31 modelviewmatrix attribute attribute uniform <! new > <s c r i p t i d= shader vs type= 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 ; a t t r i b u t e vec4 a V e r t e x C o l o r ; u n i f o r m mat4 umvmatrix ; //< new v a r y i n g vec4 v C o l o r ; v o i d main ( ) { v C o l o r = a V e r t e x C o l o r ; g l P o s i t i o n = umvmatrix vec4 ( a V e r t e x P o s i t i o n, 1. 0 ) ; //< new } Kageyama (Kobe Univ.) / 41

32 webgl sample spiral 01.html Kageyama (Kobe Univ.) / 41

33 webgl sample spiral 01.html Kageyama (Kobe Univ.) / 41

34 webgl sample spiral 02.html CG mat4.perspective projectionmatrix projectionmatrix uniform gl Position = upmatrix * umvmatrix * vec4(avertexposition, 1.0); Kageyama (Kobe Univ.) / 41

35 webgl sample spiral 02.html Kageyama (Kobe Univ.) / 41

36 webgl sample spiral 02.html mat4.perspective(...) Kageyama (Kobe Univ.) / 41

37 OpenGL OpenGL 1.x glpushmatrix(), glpopmatrix() OpenGL JavaScript push pop Kageyama (Kobe Univ.) / 41

38 5 Kageyama (Kobe Univ.) / 41

39 push pop webgl sample spiral 04.html } } modelviewmatrix = modelviewmatrixstack. pop ( ) ; // new f u n c t i o n f u n c t i o n uploadmodelviewmatrixtoshader ( ) { g l. u n i f o r m M a t r i x 4 f v ( u n i L o c a t i o n [ 1 ], f a l s e, modelviewmatrix ) ; } Kageyama (Kobe Univ.) / 41

40 webgl sample spiral 04.html f u n c t i o n u p l o a d P r o j e c t i o n M a t r i x T o S h a d e r ( ) { g l. u n i f o r m M a t r i x 4 f v ( u n i L o c a t i o n [ 0 ], f a l s e, p r o j e c t i o n M a t r i x ) ; } // new f u n c t i o n f u n c t i o n d r a w a s p i r a l ( ) { // Draw t r i a n g l e s Kageyama (Kobe Univ.) / 41

41 webgl sample spiral 04.html } 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 h a d e r p r o g r a m = c r e a t e s h a d e r p r o g r a m ( ) ; Kageyama (Kobe Univ.) / 41

42 webgl sample spiral 04.html Kageyama (Kobe Univ.) / 41

WebGL Safari WebGL WebGL Safari Kageyama (Kobe Univ.) / 5

WebGL Safari WebGL WebGL Safari Kageyama (Kobe Univ.) / 5 04 1 2015.05.12 Kageyama (Kobe Univ.) 2015.05.12 1 / 55 WebGL Safari WebGL WebGL http://www.khronos.org/webgl/ http://www.khronos.org/webgl/wiki/demo_repository Safari Kageyama (Kobe Univ.) 2015.05.12