3D CG Kageyama (Kobe Univ.) Visualization / 22

Size: px

Start display at page:

Download "3D CG Kageyama (Kobe Univ.) Visualization / 22"

ひでかきちや
5 years ago
Views:

1 WebGL X Kageyama (Kobe Univ.) Visualization / 22

2 3D CG Kageyama (Kobe Univ.) Visualization / 22

3 Kageyama (Kobe Univ.) Visualization / 22

4 GLSL OpenGL OpenGL SL, GLSL 4.0 GPU CG = OpenGL + GLSL( + GLSL( Kageyama (Kobe Univ.) Visualization / 22

5 WebGL WebBL = HTML5 canvas JavaScript 3D CG API Kageyama (Kobe Univ.) Visualization / 22

6 WebGL Web GPU OpenGL UI Kageyama (Kobe Univ.) Visualization / 22

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

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

9 WebGL Web HTML + CSS + JavaScript WebGL HTML + CSS + JavaScript + OpenGL SL Kageyama (Kobe Univ.) Visualization / 22

10 n n Kageyama (Kobe Univ.) Visualization / 22

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

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

13 varying varying varying varyingvalue_1 varyingvalue_2 varyingvalue_3 Kageyama (Kobe Univ.) Visualization / 22

14 WebGL 3D Kageyama (Kobe Univ.) Visualization / 22

15 3D CG 3D CG Kageyama (Kobe Univ.) Visualization / 22

16 3D CG WebGL JavaScript WebGL Three.js Away3D TypeScript Babylon.js Kageyama (Kobe Univ.) Visualization / 22

17 3D CG Three.js sample three js sample cube.js three.min.js Kageyama (Kobe Univ.) Visualization / 22

18 3D CG <html> <head> <title>my first Three.js app</title> <style>canvas { width: 100%; height: 100% }</style> </head> <body> <script src="js/three.min.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerwidth/win var renderer = new THREE.WebGLRenderer(); renderer.setsize(window.innerwidth, window.innerheight); document.body.appendchild(renderer.domelement); var geometry = new THREE.CubeGeometry(1,1,1); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var cube = new THREE.Mesh(geometry, material); Kageyama (Kobe Univ.) Visualization / 22

19 3D CG scene.add(cube); camera.position.z = 5; var render = function () { requestanimationframe(render); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; render(); </script> </body> </html> Kageyama (Kobe Univ.) Visualization / 22

20 Kageyama (Kobe Univ.) Visualization / 22

21 Kageyama (Kobe Univ.) Visualization / 22

22 WebGL Three.js 1. PDF report 05.pdf 2. HTML report 05.html html htm gmail 5 7/21 23:59 Kageyama (Kobe Univ.) Visualization / 22

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

WebGL Safari WebGL Kageyama (Kobe Univ.) Visualization / 55 WebGL WebGL 2014.04.22 X021 2014 Kageyama (Kobe Univ.) Visualization 2014.04.22 1 / 55 WebGL Safari WebGL http://bit.ly/1qxgljb Kageyama (Kobe Univ.) Visualization 2014.04.22 2 / 55 Kageyama (Kobe Univ.)