2015 2015.06.23 Kageyama (Kobe Univ.) 2015.06.23 1 / 41
Kageyama (Kobe Univ.) 2015.06.23 2 / 41
[ 1, +1] [ 1, +1] [ 1, +1] Kageyama (Kobe Univ.) 2015.06.23 3 / 41
Kageyama (Kobe Univ.) 2015.06.23 4 / 41
z = z top bottom y x z far near right left Kageyama (Kobe Univ.) 2015.06.23 5 / 41
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.) 2015.06.23 6 / 41
z z height y x z far near width Kageyama (Kobe Univ.) 2015.06.23 7 / 41
y y' x z height z' x' (1,0,-1) (1,1,-1) far near width Kageyama (Kobe Univ.) 2015.06.23 8 / 41
y = - β -1 z y y' z z' +1 +1-1 - 1 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.) 2015.06.23 9 / 41
x y z = x y z w = x + t x y + t y z + t z 1 0 0 t x 0 1 0 t y 0 0 1 t z 0 0 0 1 x y z 1 Kageyama (Kobe Univ.) 2015.06.23 10 / 41
x y z x y z w = = β x/z β y/z c 1 z + c 2???????????????? x y z 1
x y z x y z w = = β x/z β y/z c 1 z + c 2???????????????? x y z 1
z varying プリミティブ フラグメント Kageyama (Kobe Univ.) 2015.06.23 12 / 41
z varyingvalue_1 varyingvalue_2 varyingvalue_3 Kageyama (Kobe Univ.) 2015.06.23 13 / 41
z z y z Kageyama (Kobe Univ.) 2015.06.23 14 / 41
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.) 2015.06.23 15 / 41
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.) 2015.06.23 16 / 41
(x, y, z) t x y z = β x/z β y/z α γ/z 3 z OpenGL 2 Kageyama (Kobe Univ.) 2015.06.23 17 / 41
(1) x y z w = β 0 0 0 0 β 0 0 0 0 α γ 0 0 1 0 (2) w x x /w y z = y /w z /w x y z 1 Kageyama (Kobe Univ.) 2015.06.23 18 / 41
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.) 2015.06.23 19 / 41
height y x z far near width β 0 0 0 0 β 0 0 0 0 α γ 0 0 1 0 α, β, γ Kageyama (Kobe Univ.) 2015.06.23 20 / 41
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.) 2015.06.23 21 / 41
Kageyama (Kobe Univ.) 2015.06.23 22 / 41
Kageyama (Kobe Univ.) 2015.06.23 23 / 41
3D Kageyama (Kobe Univ.) 2015.06.23 24 / 41
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 ] = 2 5 5 ; // R c o l o r V i e w [1+ c o f ] = 2 5 5 ; // G c o l o r V i e w [2+ c o f ] = 2 5 5 ; // B c o l o r V i e w [3+ c o f ] = 2 5 5 ; // A pof +=v e r t e x S i z e I n F l o a t s ; Kageyama (Kobe Univ.) 2015.06.23 25 / 41
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 ] = 2 5 5 ; // 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.) 2015.06.23 26 / 41
Kageyama (Kobe Univ.) 2015.06.23 27 / 41
webgl sample spiral 00.html dz 156 Kageyama (Kobe Univ.) 2015.06.23 28 / 41
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.) 2015.06.23 29 / 41
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.) 2015.06.23 30 / 41
webgl sample spiral 01.html Kageyama (Kobe Univ.) 2015.06.23 31 / 41
webgl sample spiral 01.html Kageyama (Kobe Univ.) 2015.06.23 32 / 41
webgl sample spiral 02.html CG mat4.perspective projectionmatrix projectionmatrix uniform gl Position = upmatrix * umvmatrix * vec4(avertexposition, 1.0); Kageyama (Kobe Univ.) 2015.06.23 33 / 41
webgl sample spiral 02.html Kageyama (Kobe Univ.) 2015.06.23 34 / 41
webgl sample spiral 02.html mat4.perspective(...) Kageyama (Kobe Univ.) 2015.06.23 35 / 41
OpenGL OpenGL 1.x glpushmatrix(), glpopmatrix() OpenGL JavaScript push pop Kageyama (Kobe Univ.) 2015.06.23 36 / 41
5 Kageyama (Kobe Univ.) 2015.06.23 37 / 41
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.) 2015.06.23 38 / 41
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.) 2015.06.23 39 / 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.) 2015.06.23 40 / 41
webgl sample spiral 04.html Kageyama (Kobe Univ.) 2015.06.23 41 / 41