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
9
WebGLを触ってみよう
社内で行った勉強会のスライドです
K1mu21
April 21, 2024
Tweet
Share
More Decks by K1mu21
See All by K1mu21
GoのAirを使ってみた話
k1mu21
0
16
学生から社会人1年目を通して
k1mu21
2
150
データベースで沼った話
k1mu21
0
26
Lidarであそぼ
k1mu21
0
18
Other Decks in Programming
See All in Programming
雑に思考を整理する技術と効能
konifar
63
30k
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
150
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
510
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
360
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
760
Going beyond Apache Parquet's default settings
xhochy
0
130
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
使ってみよう Azure AI Document Intelligence
kosmosebi
2
360
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.2k
Apache Hive 4 on Treasure Data
ryukobayashi
1
420
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Debugging Ruby Performance
tmm1
70
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
Optimizing for Happiness
mojombo
370
69k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
The Cult of Friendly URLs
andyhume
74
5.7k
Fireside Chat
paigeccino
22
2.6k
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ページの表示が遅く なるデメリットもあります。