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

Size: px

Start display at page:

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

しょうりたけはな
8 years ago
Views:

1 Kageyama (Kobe Univ.) / 55

2 WebGL Safari WebGL WebGL Safari Kageyama (Kobe Univ.) / 55

3 WebGL WebBL = HTML5 canvas JavaScript 3D CG API Web GPU OpenGL UI Kageyama (Kobe Univ.) / 55

4 WebGL WebGL Kageyama (Kobe Univ.) / 55

5 WebGL WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダプリミティブ組み立てラスタ化フラグメントシェーダシザーテストマルチサンプリングステンシルテストデプステストアルファブレンディングディザリング WebGL 用描画バッファ cavas の他の画像スクリーン Kageyama (Kobe Univ.) / 55

6 WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダプリミティブ組み立てラスタ化フラグメントシェーダシザーテストマルチサンプリングステンシルテストデプステストアルファブレンディングディザリング WebGL 用描画バッファ cavas の他の画像スクリーン Kageyama (Kobe Univ.) / 55

7 WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダプリミティブ組み立てラスタ化フラグメントシェーダ Kageyama (Kobe Univ.) / 55

8 WebGL WebGL Web HTML + CSS + JavaScript WebGL HTML + CSS + JavaScript + OpenGL SL Kageyama (Kobe Univ.) / 55

9 WebGL n n Kageyama (Kobe Univ.) / 55

10 WebGL 頂点シェーダ用ソースコード (GLSL) 頂点 attribute 変数 ( 座標色など ) 頂点シェーダ組み込み変数 gl_position gl_frontfacing g_lpointsize ユーザ定義 uniform 変数 ( 変換行列光源位置 ) ユーザ定義の varying 変数 Kageyama (Kobe Univ.) / 55

11 WebGL C OpenGL SL (Shading Language) 4 4 a t t r i b u t e vec3 avertexpos ; a t r 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 ; u n i f o r m mat4 upmatrix ; v a r y i n g vec4 v C o l o r ; void main ( ) { g l P o s i t i o n = upmatrix umvmatrix vec4 ( avertexpos, 1. 0 ) ; v C o l o r = a V e r t e x C o l o r ; } Kageyama (Kobe Univ.) / 55

12 WebGL a t t r i b u t e vec3 avertexpos ; a t r r i b u t e vec4 a V e r t e x C o l o r ; attribute RGBA 4 Kageyama (Kobe Univ.) / 55

13 WebGL u n i f o r m mat4 umvmatrix ; u n i f o r m mat4 upmatrix ; mat4 4 4 uniform Kageyama (Kobe Univ.) / 55

14 WebGL v a r y i n g vec4 v C o l o r ; varing (varying variable) varying gl Position gl FrontFacing gl PointSize Kageyama (Kobe Univ.) / 55

15 WebGL void main ( ) { g l P o s i t i o n = upmatrix umvmatrix vec4 ( avertexpos, 1. 0 ) ; v C o l o r = a V e r t e x C o l o r ; main varying gl Position varying vcolor Kageyama (Kobe Univ.) / 55

16 WebGL primitive assembly 3 OpenGL 1.x 3 Kageyama (Kobe Univ.) / 55

17 WebGL プリミティブフラグメント Kageyama (Kobe Univ.) / 55

18 WebGL varying varying varying varyingvalue_1 varyingvalue_2 varyingvalue_3 Kageyama (Kobe Univ.) / 55

19 WebGL フラグメントシェーダ用ソースコード (GLSL) 組み込み変数 gl_position gl_frontfacing g_lpointsize フラグメントシェーダ組み込み変数 gl_fragcolor ユーザ定義 varying 変数ユニフォーム変数テクスチャ用サンプラ Kageyama (Kobe Univ.) / 55

20 WebGL p r e c i s i o n mediump f l o a t ; // p r e c i s i o n q u a l i f i e r v a r y i n g vec4 v C o l o r ; // void main ( ) { g l F r a g C o l o r = v C o l o r ; } Kageyama (Kobe Univ.) / 55

21 WebGL WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダプリミティブ組み立てラスタ化フラグメントシェーダシザーテストマルチサンプリングステンシルテストデプステストアルファブレンディングディザリング WebGL 用描画バッファ cavas の他の画像スクリーン Kageyama (Kobe Univ.) / 55

22 WebGL scissors OpenGL Super Bible (2011, p.112) シザーテスト不合格シザーテスト合格 Kageyama (Kobe Univ.) / 55

23 WebGL OpenGL Super Bible (2011, p.382) Kageyama (Kobe Univ.) / 55

24 WebGL OpenGL Super Bible (2011, p.399) Kageyama (Kobe Univ.) / 55

25 WebGL Kageyama (Kobe Univ.) / 55

26 WebGL Kageyama (Kobe Univ.) / 55

27 WebGL Kageyama (Kobe Univ.) / 55

28 WebGL WebGL Kageyama (Kobe Univ.) / 55

29 WebGL WebGL webgl sample triangle 00.html Safari Kageyama (Kobe Univ.) / 55

30 WebGL 3 HTML WebGL canvas Kageyama (Kobe Univ.) / 55

31 WebGL webgl sample triangle 00.html <!DOCTYPE HTML> <html lang= en > <head> < t i t l e>webgl Sample T r i a n g l e 00</ t i t l e> <meta c h a r s e t= u t f 8 > <s t y l e type= t e x t / c s s > canvas { b o r d e r : 2 px s o l i d g r e y ; }. t e x t { p o s i t i o n : a b s o l u t e ; top : 40 px ; l e f t : 20 px ; font s i z e : 1. 5em ; Kageyama (Kobe Univ.) / 55

32 WebGL webgl sample triangle 00.html <!DOCTYPE HTML> <html lang= en > <head> < t i t l e>webgl Sample T r i a n g l e 00</ t i t l e> <meta c h a r s e t= u t f 8 > <s t y l e type= t e x t / c s s > canvas { b o r d e r : 2 px s o l i d g r e y ; }. t e x t { p o s i t i o n : a b s o l u t e ; top : 40 px ; l e f t : 20 px ; font s i z e : 1. 5em ; Kageyama (Kobe Univ.) / 55

33 WebGL c o l o r : b l a c k ; } </ s t y l e> <s c r i p t type= t e x t / j a v a s c r i p t > v a r g l ; v a r canvas ; v a r shaderprogram ; v a r v e r t e x B u f f e r ; f u n c t i o n c r e a t e G L C o n t e x t ( canvas ) { v a r names = [ webgl, e x p e r i m e n t a l webgl ] ; v a r c o n t e x t = n u l l ; f o r ( v a r i =0; i<names. l e n g t h ; i ++) { t r y { Kageyama (Kobe Univ.) / 55

34 WebGL } c o n t e x t = canvas. g e t C o n t e x t ( names [ i ] ) ; } c a t c h ( e ) {} i f ( c o n t e x t ) { b reak ; } } i f ( c o n t e x t ) { c o n t e x t. viewportwidth = canvas. width ; c o n t e x t. v i e w p o r t H e i g h t = canvas. h e i g h t ; } e l s e { a l e r t ( F a i l e d to c r e a t e c o n t e x t. ) ; } r e t u r n c o n t e x t ; Kageyama (Kobe Univ.) / 55

35 WebGL f u n c t i o n l o a d S h a d e r ( type, s h a d e r S o u r c e ) { v a r s h a d e r = g l. c r e a t e S h a d e r ( t y p e ) ; 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 ShaderParameter ( shader, g l. COMPILE STATUS) ) { a l e r t ( E r r o r c o m p i l i n g s h a d e r + g l. g e t S h a d e r I n f o L o g ( s h a d e r ) ) ; g l. d e l e t e S h a d e r ( s h a d e r ) ; 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 S o u r c e = Kageyama (Kobe Univ.) / 55

36 WebGL v a r f r a g m e n t S h a d e r S o u r c e = p r e c i s i o n mediump f l o a t ; \n + v o i d main ( ) { \n + g l F r a g C o l o r = vec4 ( 0. 2, 0. 4, 0. 6, 1. 0 ) ; \n + } \n ; v a r v e r t e x S h a d e r = l o a d S h a d e r ( g l. VERTEX SHADER, v e r t e x S h a d e r S o u r c e ) ; v a r fragmentshader = l o a d S h a d e r ( g l.fragment SHADER, f r a g m e n t S h a d e r S o u r c e ) ; shaderprogram = g l. createprogram ( ) ; Kageyama (Kobe Univ.) / 55

37 WebGL g l. a t t a c h S h a d e r ( shaderprogram, v e r t e x S h a d e r ) ; g l. a t t a c h S h a d e r ( shaderprogram, fragmentshader ) ; g l. l i n k P r o g r a m ( shaderprogram ) ; i f (! g l. getprogramparameter ( shaderprogram, g l. LINK STATUS) ) { a l e r t ( F a i l e d to s e t u p s h a d e r. ) ; } g l. useprogram ( shaderprogram ) ; } shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e = g l. g e t A t t r i b L o c a t i o n ( shaderprogram, a V e r t e x P o s i t i o n ) ; f u n c t i o n s e t u p B u f f e r s ( ) { Kageyama (Kobe Univ.) / 55

38 WebGL } v e r t e x B u f f e r = g l. c r e a t e B u f f e r ( ) ; g l. b i n d B u f f e r ( g l. ARRAY BUFFER, v e r t e x B u f f e r ) ; v a r t r i a n g l e V e r t i c e s = [ 0. 0, 0. 0, 0. 0, 0. 8, 0. 0, 0. 0, 0. 0, 0. 5, 0. 0 ] ; g l. b u f f e r D a t a ( g l. ARRAY BUFFER, new F l o a t 3 2 A r r a y ( t r i a n g l e V e r t i c e s ), g l. STATIC DRAW) ; v e r t e x B u f f e r. i t e m S i z e = 3 ; v e r t e x B u f f e r. numberofitems = 3 ; f u n c t i o n draw ( ) { g l. v i e w p o r t ( 0, 0, g l. viewportwidth, g l. v i e w p o r t H e i g h t ) ; Kageyama (Kobe Univ.) / 55

39 WebGL g l. c l e a r ( g l. COLOR BUFFER BIT) ; } g l. v e r t e x A t t r i b P o i n t e r ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e, v e r t e x B u f f e r. i t e m S i z e, g l. FLOAT, f a l s e, 0, 0) ; g l. e n a b l e V e r t e x A t t r i b A r r a y ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e ) ; g l. drawarrays ( g l. TRIANGLES, 0, v e r t e x B u f f e r. numberofitems ) ; 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 e t u p S h a d e r s ( ) ; s e t u p B u f f e r s ( ) ; g l. c l e a r C o l o r ( 0. 8, 0. 8, 0. 4, 1. 0 ) ; draw ( ) ; Kageyama (Kobe Univ.) / 55

40 WebGL } </ s c r i p t> </ head> <body onload= s t a r t u p ( ) ; > <canvas i d= myglcanvas width= 480 height= 480 ></ canvas> <d i v c l a s s= t e x t >H e l l o. This i s my f i r s t WebGL program.</ d i v> </ body> </ html> Kageyama (Kobe Univ.) / 55

41 WebGL HTML5 canvas getcontext method experimental-webgl getcontext method WebGLRenderingContext WebGL WebGLRenderingContext gl

42 WebGL GLSL GPU GPU HTML JavaScript GLSL fragmentshadersource Kageyama (Kobe Univ.) / 55

43 WebGL WebGLRenderingContext Kageyama (Kobe Univ.) / 55

44 WebGL GLSL attribute float, vec2, vec3, vec4, mat2, mat3x2, mat4x2, mat2x3, mat3, mat4x3, mat4, mat2x4, mat3x4 attribute attribute attribute

45 WebGL int BindAttribLocation(unit program, unit index, const char *name); name attribute index program GL index int GetAttribLocation(unit program, const char *name); attribute (name) Kageyama (Kobe Univ.) / 55

46 WebGL gl.useprogram(shaderprogram); shaderprogram. vertexpositionattribute = gl.getattriblocation(shaderprogram, avertexposition ); vertexpositionattribute shaderprogram. anynameisok = g l. g e t A t t r i b L o c a t i o n ( shaderprogram, a V e r t e x P o s i t i o n ) ; Kageyama (Kobe Univ.) / 55

47 WebGL f u n c t i o n s e t u p B u f f e r s ( ) { v e r t e x B u f f e r = g l. c r e a t e B u f f e r ( ) ; g l. b i n d B u f f e r ( g l. ARRAY BUFFER, v e r t e x B u f f e r ) ; v a r t r i a n g l e V e r t i c e s = [ 0. 0, 0. 0, 0. 0, 0. 8, 0. 0, 0. 0, 0. 0, 0. 5, 0. 0 ] ; g l. b u f f e r D a t a ( g l. ARRAY BUFFER, new F l o a t 3 2 A r r a y ( t r i a n g l e V e r t i c e s ), g l. STATIC DRAW) ; v e r t e x B u f f e r. i t e m S i z e = 3 ; v e r t e x B u f f e r. numberofitems = 3 ; } Kageyama (Kobe Univ.) / 55

48 WebGL WebGLRenderingContext createbuffer() WebGLBuffer JavaScript vertexbuffer vertexbuffer Kageyama (Kobe Univ.) / 55

49 WebGL f u n c t i o n draw ( ) { g l. v i e w p o r t ( 0, 0, g l. viewportwidth, g l. v i e w p o r t H e i g h t ) ; g l. c l e a r ( g l. COLOR BUFFER BIT) ; } g l. v e r t e x A t t r i b P o i n t e r ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e, v e r t e x B u f f e r. i t e m S i z e, g l. FLOAT, f a l s e, 0, 0) ; g l. e n a b l e V e r t e x A t t r i b A r r a y ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e ) ; g l. drawarrays ( g l. TRIANGLES, 0, v e r t e x B u f f e r. numberofitems ) ; Kageyama (Kobe Univ.) / 55

50 Kageyama (Kobe Univ.) / 55

51 webgl sample triangle 01.html Kageyama (Kobe Univ.) / 55

52 webgl sample triangle 01.html 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 S o u r c e = 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 ; \n + v o i d main ( ) { \n + 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 ) ; \n + g l P o s i t i o n = vec4 ( 0. 2, 1. 0, 1. 0, 1. 0 ) ; // Here!! \n + } \n ; Kageyama (Kobe Univ.) / 55

53 Kageyama (Kobe Univ.) / 55

54 Kageyama (Kobe Univ.) / 55

55 webgl sample triangle 00.html 1. PDF 2. HTML PDF Web 5/19 5 Kageyama (Kobe Univ.) / 55

WebGL References Kageyama (Kobe Univ.) Visualization 2013.05.07 *4 2 / 54

WebGL *1 2013.05.07 *2 *1 X021 2013 LR301 *2 05/08: Kageyama (Kobe Univ.) Visualization 2013.05.07 *3 1 / 54 WebGL References Kageyama (Kobe Univ.) Visualization 2013.05.07 *4 2 / 54 Chrome Firefox http://www.khronos.org/webgl/wiki/demo_repository