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
41
WebGLを触ってみよう
社内で行った勉強会のスライドです
K1mu21
April 21, 2024
Tweet
Share
More Decks by K1mu21
See All by K1mu21
Rust勉強会1回目の資料
k1mu21
0
27
ギャレトレ勉強会
k1mu21
0
12
リプレイスでやったこと
k1mu21
1
35
Cloudflareいいぞ
k1mu21
1
76
静的解析ツールを導入した話
k1mu21
1
170
GoのAirを使ってみた話
k1mu21
0
76
学生から社会人1年目を通して
k1mu21
2
210
データベースで沼った話
k1mu21
0
56
Lidarであそぼ
k1mu21
0
39
Other Decks in Programming
See All in Programming
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Spring gRPC について / About Spring gRPC
mackey0225
0
220
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
Introduction to kotlinx.rpc
arawn
0
630
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
sappoRo.R #12 初心者セッション
kosugitti
0
230
テストをしないQAエンジニアは何をしているか?
nealle
0
130
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Featured
See All Featured
The Language of Interfaces
destraynor
156
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Producing Creativity
orderedlist
PRO
343
39k
BBQ
matthewcrist
86
9.5k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
Fireside Chat
paigeccino
34
3.2k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
How GitHub (no longer) Works
holman
313
140k
A designer walks into a library…
pauljervisheath
205
24k
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ページの表示が遅く なるデメリットもあります。