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
46
WebGLを触ってみよう
社内で行った勉強会のスライドです
K1mu21
April 21, 2024
Tweet
Share
More Decks by K1mu21
See All by K1mu21
dependabotを導入して失敗した話
k1mu21
0
91
Rust勉強会1回目の資料
k1mu21
0
44
ギャレトレ勉強会
k1mu21
0
33
リプレイスでやったこと
k1mu21
1
48
Cloudflareいいぞ
k1mu21
1
91
静的解析ツールを導入した話
k1mu21
1
180
GoのAirを使ってみた話
k1mu21
0
92
学生から社会人1年目を通して
k1mu21
2
220
データベースで沼った話
k1mu21
0
62
Other Decks in Programming
See All in Programming
Browser and UI #2 HTML/ARIA
ken7253
2
170
2025-04-25 GitHub Copilot Agent ライブデモ(スクリプト)
goataka
0
100
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
1.9k
Make Parsers Compatible Using Automata Learning
makenowjust
2
6.8k
Thank you <💅>, What's the Next?
ahoxa
1
590
MCP調べてみました! / Exploring MCP
uhzz
2
2.3k
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
1
1.9k
2ヶ月で生産性2倍、お買い物アプリ「カウシェ」4チーム同時改善の取り組み
ike002jp
1
110
個人開発の学生アプリが企業譲渡されるまで
akidon0000
2
1.1k
The New Developer Workflow: How AI Transforms Ideas into Code
danielsogl
0
100
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
bitkey
1
130
M5UnitUnified 最新動向 2025/05
gob
0
120
Featured
See All Featured
Embracing the Ebb and Flow
colly
85
4.7k
Building Adaptive Systems
keathley
41
2.5k
How to Ace a Technical Interview
jacobian
276
23k
The Cost Of JavaScript in 2023
addyosmani
49
7.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Statistics for Hackers
jakevdp
798
220k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
KATA
mclloyd
29
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
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ページの表示が遅く なるデメリットもあります。