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