WebGLを触ってみよう

社内で行った勉強会のスライドです

Transcript

1. WebGLを触ってみよう 株式会社ラクーンホールディングス 木村宗吾
2. WebGLとは • WebコンテンツでOpenGL ESのAPIを用いて、対応しているブラウザーではプラグイ ンを使わずに、2Dおよび3Dの描画をHTMLのcanvasにおいて行うことができる • JSで記述する制御コードと、GPUで実行するGLSLで構成される
3. 利用サイト • https://www.nks.co.jp/recruitsite/ ◦ 日本経済社の採用サイト • https://www.techv.co.jp
 ◦ 伊藤忠テクノロジーベンチャーズ – コーポレートサイト

4. まずはシェーダーから • 3DCGオブジェクトの表面の質感や凹凸、陰影処理などの描画色を決定するプロ グラム • GLSL ◦ WebGLで動作するシェーダ言語 ◦ C言語の構文をベースとしてる ◦ ベクトルや、行列など数学が関わっている
5. もう難しそう...
6. 今回はとりあえず動かしてみましょう
7. 準備&実行！ • ソースコード準備 ◦ wsl_ dockerを立ち上げる ◦ workspaceフォルダに移動してください ◦ git clone https://github.com/k1mu21/Web_GL_sample.git ◦ cd WEB_GL_SAMPLE ◦ docker compose up -d • URL ◦ http://localhost:8081/webgl_demo/index.html
8. 実行結果
9. コード一部抜粋 webgl_demo/webgl-demo.js • これがGLSL ◦ Vertex shader: 頂点を描画するプ ログラム ◦ Fragment shader: テクスチャから ピクセルの色を決定し，描画するた めのプログラム • まあほぼC言語です
10. コード一部抜粋 webgl_demo/init-buffers.js • このコードは立方体の頂点を定義している • 頂点が24(１面につき４点)あるのでこんなに多 い ◦ 3つでxyzを定義している
11. コード一部抜粋 webgl_demo/draw-scene.js • ここが立方体を回転させているコード • 上からZ軸、Y軸、X軸のに関するコー ド
12. 軸の向きがおかしくない？
13. WebGLの座標系は実は違う 数学 WebGL
14. 自分もこんなコードをバニラで書きた くはない →ライブラリを使いましょう！
15. 今回はThree.jsを使います！
16. Three.jsとは • WebGLのライブラリの一つ • 他の3D ライブラリーと同様に、一般的な 3D 機能をより迅速に実装するためのヘル パー関数が組み込まれている
17. レンダラー • レンダラーとは、ブラウザ上でシーンを正しく 表示するためのツール • コードの内容 ◦ 新しい WebGL レンダラーを作成 ◦ 画面上の空き領域全体にフィットするようにサ イズを設定 ◦ DOM 構造をページに追加 ◦ antialias 引数は図形の縁をより滑らかにレンダ リングするためのもの ◦ setClearColor() メソッドは、背景を既定値の黒 ではなく、明るい灰色に設定
18. シーン • シーンは全てが起こる場所 • 新たにオブジェクトを作るときは、 シーン内にそれを追加することで画 面に表示されるようになる • Three.js ではシーンは Scene オブ ジェクトで表す
19. カメラ • レンダリングされたシーンはあるが、作 品を見るためにカメラを追加する必要が ある • z 位置は 50 単位で、カメラと z 軸上の シーンの中心との距離のこと ◦ カメラを後ろに移動して、シーン内 のオブジェクトを見ることができる ようにしている
20. レンダリング • レンダラーを作ったなら、全てをレンダリングし よう • このコードは、全フレームで常にシーンがレン ダリングされるようになる • 新しいフレームごとにrenderがsceneとcamera をレンダリングする
21. 結果 • ページを開いてみて下さい ◦ 灰色の画面が表示されるはずです！ • URL ◦ http://localhost:8081/threejs_demo/cube.html
22. 3Dモデルを描画しましょう
23. ジオメトリ • 定義済みのプリミティブを多数提供しており、 1 行のコードで即座に図形を作成することがで きる • 10 x 10 x 10 の簡単な立方体が生成されます
24. 素材 • 素材とは、オブジェクトに応じた、その表面に ある色や質感を表すもの • シンプルな青色を選んでボックスを塗装してい ます
25. メッシュ • 素材を立方体のジオメトリーに適用させるに は、メッシュを使用 • メッシュは、素材をシェイプの表面に適用してく れる
26. 立方体をシーンに追加する • カメラと同様にシーンに追加
27. 立方体を少し回転させて表示 • オブジェクトの良いところは、シーン内で移動 できること • 例えば回転や拡大縮小を行ったり。立方体を 少し回転させることができる
28. 結果 • 画面に青い立方体がすこし回転して 表示されていれば成功です！ ◦ 表示されていなければ一度リ ロードしてみてください
29. もう少し深堀してみよう
30. 図形や素材の追加 • 立方体を左に移動させる • フォンの素材で包まれたリングを追加 ◦ フォンは基本素材よりも光沢があるように見 える • 正十二面体を作成 ◦ 引数 `DodecahedronGeometry()' はオブジェク トの大きさを定義 ◦ ランバート素材を使用 ▪ フォンより光沢が少ない
31. 光源 • 様々なタイプの光源が利用できます。 ◦ 基本的なものは PointLight で、これは定義さ れた方向にスポットライトを照らすように動作 する
32. 結果 • 3つのオブジェクトが表示されていて • 光源によって影が見える • URL ◦ http://localhost:8081/threejs_demo/sha pes.html
33. 動きをつけよう！
34. 回転 • 各フレームで与えられた回転方向の値を追加 する • 立方体がフレームごとにほんの少し回転し続 ける
35. 拡大縮小 • 経過時間をカウントするためのヘルパー変数 t を実装 • Math.sin は周期的な関数なので、これはリン グを拡大縮小し、そのプロセスを繰り返す • Math.abs でラップして、 0 以上の絶対値を渡 している
36. 移動 • 各フレームの y 軸に sin() 値を適用することに よって、正十二面体を上下に動かしている
37. 結果 • それぞれが動いて入れば成功！ ◦ 動いていなければリロードしてみてください
38. まとめ • WebGLはJSで記述する制御コードと、GPUで実行するGLSLで構成 ◦ GLSLに関してもっと知りたい方は自分で調べてみてください • Three.jsはWebGLのライブラリ ◦ これを使えば簡単に実装することができる • 注意点 ◦ WebGLは3Dモデルなどのオブジェクトを使う関係上 Webページの表示が遅く なるデメリットもあります。