Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebGLを触ってみよう
Search
K1mu21
April 21, 2024
Programming
1
48
WebGLを触ってみよう
社内で行った勉強会のスライドです
K1mu21
April 21, 2024
Tweet
Share
More Decks by K1mu21
See All by K1mu21
dependabotを導入して失敗した話
k1mu21
0
110
Rust勉強会1回目の資料
k1mu21
0
47
ギャレトレ勉強会
k1mu21
0
39
リプレイスでやったこと
k1mu21
1
56
Cloudflareいいぞ
k1mu21
1
100
静的解析ツールを導入した話
k1mu21
1
200
GoのAirを使ってみた話
k1mu21
0
99
学生から社会人1年目を通して
k1mu21
2
230
データベースで沼った話
k1mu21
0
62
Other Decks in Programming
See All in Programming
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
560
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
技術同人誌をMCP Serverにしてみた
74th
1
520
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
530
RailsGirls IZUMO スポンサーLT
16bitidol
0
130
Goで作る、開発・CI環境
sin392
0
190
GraphRAGの仕組みまるわかり
tosuri13
8
520
Is Xcode slowly dying out in 2025?
uetyo
1
240
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
380
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
The Cult of Friendly URLs
andyhume
79
6.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Six Lessons from altMBA
skipperchong
28
3.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Gamification - CAS2011
davidbonilla
81
5.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
How GitHub (no longer) Works
holman
314
140k
Transcript
WebGLを触ってみよう 株式会社ラクーンホールディングス 木村宗吾
WebGLとは • WebコンテンツでOpenGL ESのAPIを用いて、対応しているブラウザーではプラグイ ンを使わずに、2Dおよび3Dの描画をHTMLのcanvasにおいて行うことができる • JSで記述する制御コードと、GPUで実行するGLSLで構成される
利用サイト • https://www.nks.co.jp/recruitsite/ ◦ 日本経済社の採用サイト • https://www.techv.co.jp ◦ 伊藤忠テクノロジーベンチャーズ –
コーポレートサイト
まずはシェーダーから • 3DCGオブジェクトの表面の質感や凹凸、陰影処理などの描画色を決定するプロ グラム • GLSL ◦ WebGLで動作するシェーダ言語 ◦ C言語の構文をベースとしてる
◦ ベクトルや、行列など数学が関わっている
もう難しそう...
今回はとりあえず動かしてみましょう
準備&実行! • ソースコード準備 ◦ 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
実行結果
コード一部抜粋 webgl_demo/webgl-demo.js • これがGLSL ◦ Vertex shader: 頂点を描画するプ ログラム ◦
Fragment shader: テクスチャから ピクセルの色を決定し,描画するた めのプログラム • まあほぼC言語です
コード一部抜粋 webgl_demo/init-buffers.js • このコードは立方体の頂点を定義している • 頂点が24(1面につき4点)あるのでこんなに多 い ◦ 3つでxyzを定義している
コード一部抜粋 webgl_demo/draw-scene.js • ここが立方体を回転させているコード • 上からZ軸、Y軸、X軸のに関するコー ド
軸の向きがおかしくない?
WebGLの座標系は実は違う 数学 WebGL
自分もこんなコードをバニラで書きた くはない →ライブラリを使いましょう!
今回はThree.jsを使います!
Three.jsとは • WebGLのライブラリの一つ • 他の3D ライブラリーと同様に、一般的な 3D 機能をより迅速に実装するためのヘル パー関数が組み込まれている
レンダラー • レンダラーとは、ブラウザ上でシーンを正しく 表示するためのツール • コードの内容 ◦ 新しい WebGL レンダラーを作成
◦ 画面上の空き領域全体にフィットするようにサ イズを設定 ◦ DOM 構造をページに追加 ◦ antialias 引数は図形の縁をより滑らかにレンダ リングするためのもの ◦ setClearColor() メソッドは、背景を既定値の黒 ではなく、明るい灰色に設定
シーン • シーンは全てが起こる場所 • 新たにオブジェクトを作るときは、 シーン内にそれを追加することで画 面に表示されるようになる • Three.js ではシーンは
Scene オブ ジェクトで表す
カメラ • レンダリングされたシーンはあるが、作 品を見るためにカメラを追加する必要が ある • z 位置は 50 単位で、カメラと
z 軸上の シーンの中心との距離のこと ◦ カメラを後ろに移動して、シーン内 のオブジェクトを見ることができる ようにしている
レンダリング • レンダラーを作ったなら、全てをレンダリングし よう • このコードは、全フレームで常にシーンがレン ダリングされるようになる • 新しいフレームごとにrenderがsceneとcamera をレンダリングする
結果 • ページを開いてみて下さい ◦ 灰色の画面が表示されるはずです! • URL ◦ http://localhost:8081/threejs_demo/cube.html
3Dモデルを描画しましょう
ジオメトリ • 定義済みのプリミティブを多数提供しており、 1 行のコードで即座に図形を作成することがで きる • 10 x 10
x 10 の簡単な立方体が生成されます
素材 • 素材とは、オブジェクトに応じた、その表面に ある色や質感を表すもの • シンプルな青色を選んでボックスを塗装してい ます
メッシュ • 素材を立方体のジオメトリーに適用させるに は、メッシュを使用 • メッシュは、素材をシェイプの表面に適用してく れる
立方体をシーンに追加する • カメラと同様にシーンに追加
立方体を少し回転させて表示 • オブジェクトの良いところは、シーン内で移動 できること • 例えば回転や拡大縮小を行ったり。立方体を 少し回転させることができる
結果 • 画面に青い立方体がすこし回転して 表示されていれば成功です! ◦ 表示されていなければ一度リ ロードしてみてください
もう少し深堀してみよう
図形や素材の追加 • 立方体を左に移動させる • フォンの素材で包まれたリングを追加 ◦ フォンは基本素材よりも光沢があるように見 える • 正十二面体を作成
◦ 引数 `DodecahedronGeometry()' はオブジェク トの大きさを定義 ◦ ランバート素材を使用 ▪ フォンより光沢が少ない
光源 • 様々なタイプの光源が利用できます。 ◦ 基本的なものは PointLight で、これは定義さ れた方向にスポットライトを照らすように動作 する
結果 • 3つのオブジェクトが表示されていて • 光源によって影が見える • URL ◦ http://localhost:8081/threejs_demo/sha pes.html
動きをつけよう!
回転 • 各フレームで与えられた回転方向の値を追加 する • 立方体がフレームごとにほんの少し回転し続 ける
拡大縮小 • 経過時間をカウントするためのヘルパー変数 t を実装 • Math.sin は周期的な関数なので、これはリン グを拡大縮小し、そのプロセスを繰り返す •
Math.abs でラップして、 0 以上の絶対値を渡 している
移動 • 各フレームの y 軸に sin() 値を適用することに よって、正十二面体を上下に動かしている
結果 • それぞれが動いて入れば成功! ◦ 動いていなければリロードしてみてください
まとめ • WebGLはJSで記述する制御コードと、GPUで実行するGLSLで構成 ◦ GLSLに関してもっと知りたい方は自分で調べてみてください • Three.jsはWebGLのライブラリ ◦ これを使えば簡単に実装することができる •
注意点 ◦ WebGLは3Dモデルなどのオブジェクトを使う関係上 Webページの表示が遅く なるデメリットもあります。