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
39
WebGLを触ってみよう
社内で行った勉強会のスライドです
K1mu21
April 21, 2024
Tweet
Share
More Decks by K1mu21
See All by K1mu21
Rust勉強会1回目の資料
k1mu21
0
20
ギャレトレ勉強会
k1mu21
0
8
リプレイスでやったこと
k1mu21
1
33
Cloudflareいいぞ
k1mu21
1
71
静的解析ツールを導入した話
k1mu21
1
160
GoのAirを使ってみた話
k1mu21
0
72
学生から社会人1年目を通して
k1mu21
2
210
データベースで沼った話
k1mu21
0
54
Lidarであそぼ
k1mu21
0
39
Other Decks in Programming
See All in Programming
Moscow Python Meetup №97. Константин Крестников (Техлид команды GigaChain (SberDevices)). GigaChain: Новые инструменты для разработки агентов на примере агента техподдержки
moscowdjango
PRO
0
100
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
230
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
4.2k
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
270
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
390
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
0
220
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
360
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
200
カンファレンス動画鑑賞会のススメ / Osaka.swift #1
hironytic
0
200
為你自己學 Python
eddie
0
540
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
980
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
170
Featured
See All Featured
Designing for Performance
lara
604
68k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
900
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Code Review Best Practice
trishagee
65
17k
Building Applications with DynamoDB
mza
93
6.2k
Site-Speed That Sticks
csswizardry
3
310
No one is an island. Learnings from fostering a developers community.
thoeni
20
3.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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ページの表示が遅く なるデメリットもあります。