Submit Search
Upload
シェーダだけで世界を創る!three.jsによるレイマーチング
•
63 likes
•
42,786 views
Sho Hosoda
Follow
2016/02/14 シェーダだけで世界を創る!three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう!? GLSL シェーダテクニック勉強会 @gam0022
Read less
Read more
Technology
Report
Share
Report
Share
1 of 97
Download now
Download to read offline
Recommended
GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集
Kei Mesuda
OpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみた
Takahiro Miyaura
中級グラフィックス入門~シャドウマッピング総まとめ~
中級グラフィックス入門~シャドウマッピング総まとめ~
ProjectAsura
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
Yoshifumi Kawai
CEDEC 2020 - 高品質かつ低負荷な3Dライブを実現するシェーダー開発 ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スク...
CEDEC 2020 - 高品質かつ低負荷な3Dライブを実現するシェーダー開発 ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スク...
KLab Inc. / Tech
なぜなにリアルタイムレンダリング
なぜなにリアルタイムレンダリング
Satoshi Kodaira
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
KLab Inc. / Tech
ゲーム開発者のための C++11/C++14
ゲーム開発者のための C++11/C++14
Ryo Suzuki
Recommended
GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集
Kei Mesuda
OpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみた
Takahiro Miyaura
中級グラフィックス入門~シャドウマッピング総まとめ~
中級グラフィックス入門~シャドウマッピング総まとめ~
ProjectAsura
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
Yoshifumi Kawai
CEDEC 2020 - 高品質かつ低負荷な3Dライブを実現するシェーダー開発 ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スク...
CEDEC 2020 - 高品質かつ低負荷な3Dライブを実現するシェーダー開発 ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スク...
KLab Inc. / Tech
なぜなにリアルタイムレンダリング
なぜなにリアルタイムレンダリング
Satoshi Kodaira
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
シェーダーを活用した3Dライブ演出のアップデート ~『ラブライブ!スクールアイドルフェスティバル ALL STARS』(スクスタ)の開発事例~
KLab Inc. / Tech
ゲーム開発者のための C++11/C++14
ゲーム開発者のための C++11/C++14
Ryo Suzuki
GPU最適化入門
GPU最適化入門
Takahiro KOGUCHI
基礎線形代数講座
基礎線形代数講座
SEGADevTech
【Unity道場 2月】シェーダを書けるプログラマになろう
【Unity道場 2月】シェーダを書けるプログラマになろう
Unity Technologies Japan K.K.
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
Unity Technologies Japan K.K.
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
Drecom Co., Ltd.
Unityではじめるオープンワールド制作 エンジニア編
Unityではじめるオープンワールド制作 エンジニア編
Unity Technologies Japan K.K.
CEDEC2015「加算合成コストが0になる!?すぐに使えるP-MAPブレンドテクニック」発表スライド
CEDEC2015「加算合成コストが0になる!?すぐに使えるP-MAPブレンドテクニック」発表スライド
Toshiyasu Miyabe
【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』
【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』
Unity Technologies Japan K.K.
Unity dojo amplifyshadereditor101_jpn-jp
Unity dojo amplifyshadereditor101_jpn-jp
小林 信行
画像処理ライブラリ OpenCV で 出来ること・出来ないこと
画像処理ライブラリ OpenCV で 出来ること・出来ないこと
Norishige Fukushima
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
U-dai Yokoyama
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
Unity Technologies Japan K.K.
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
UnityTechnologiesJapan002
HDR Theory and practicce (JP)
HDR Theory and practicce (JP)
Hajime Uchimura
ゲームの仕様書を書こうまとめ
ゲームの仕様書を書こうまとめ
Sugimoto Chizuru
60fpsアクションを実現する秘訣を伝授 解析編
60fpsアクションを実現する秘訣を伝授 解析編
エピック・ゲームズ・ジャパン Epic Games Japan
C++ マルチスレッドプログラミング
C++ マルチスレッドプログラミング
Kohsuke Yuasa
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
Makoto Goto
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity Technologies Japan K.K.
UE4 Hair & Groomでのリアルタイムファーレンダリング (UE4 Character Art Dive Online)
UE4 Hair & Groomでのリアルタイムファーレンダリング (UE4 Character Art Dive Online)
エピック・ゲームズ・ジャパン Epic Games Japan
【Unite Tokyo 2018】誘導ミサイル完全マスター
【Unite Tokyo 2018】誘導ミサイル完全マスター
Unity Technologies Japan K.K.
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
UnityTechnologiesJapan002
More Related Content
What's hot
GPU最適化入門
GPU最適化入門
Takahiro KOGUCHI
基礎線形代数講座
基礎線形代数講座
SEGADevTech
【Unity道場 2月】シェーダを書けるプログラマになろう
【Unity道場 2月】シェーダを書けるプログラマになろう
Unity Technologies Japan K.K.
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
Unity Technologies Japan K.K.
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
Drecom Co., Ltd.
Unityではじめるオープンワールド制作 エンジニア編
Unityではじめるオープンワールド制作 エンジニア編
Unity Technologies Japan K.K.
CEDEC2015「加算合成コストが0になる!?すぐに使えるP-MAPブレンドテクニック」発表スライド
CEDEC2015「加算合成コストが0になる!?すぐに使えるP-MAPブレンドテクニック」発表スライド
Toshiyasu Miyabe
【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』
【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』
Unity Technologies Japan K.K.
Unity dojo amplifyshadereditor101_jpn-jp
Unity dojo amplifyshadereditor101_jpn-jp
小林 信行
画像処理ライブラリ OpenCV で 出来ること・出来ないこと
画像処理ライブラリ OpenCV で 出来ること・出来ないこと
Norishige Fukushima
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
U-dai Yokoyama
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
Unity Technologies Japan K.K.
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
UnityTechnologiesJapan002
HDR Theory and practicce (JP)
HDR Theory and practicce (JP)
Hajime Uchimura
ゲームの仕様書を書こうまとめ
ゲームの仕様書を書こうまとめ
Sugimoto Chizuru
60fpsアクションを実現する秘訣を伝授 解析編
60fpsアクションを実現する秘訣を伝授 解析編
エピック・ゲームズ・ジャパン Epic Games Japan
C++ マルチスレッドプログラミング
C++ マルチスレッドプログラミング
Kohsuke Yuasa
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
Makoto Goto
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity Technologies Japan K.K.
UE4 Hair & Groomでのリアルタイムファーレンダリング (UE4 Character Art Dive Online)
UE4 Hair & Groomでのリアルタイムファーレンダリング (UE4 Character Art Dive Online)
エピック・ゲームズ・ジャパン Epic Games Japan
What's hot
(20)
GPU最適化入門
GPU最適化入門
基礎線形代数講座
基礎線形代数講座
【Unity道場 2月】シェーダを書けるプログラマになろう
【Unity道場 2月】シェーダを書けるプログラマになろう
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
【CEDEC2017】Unityを使ったNintendo Switch™向けのタイトル開発・移植テクニック!!
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
Unityではじめるオープンワールド制作 エンジニア編
Unityではじめるオープンワールド制作 エンジニア編
CEDEC2015「加算合成コストが0になる!?すぐに使えるP-MAPブレンドテクニック」発表スライド
CEDEC2015「加算合成コストが0になる!?すぐに使えるP-MAPブレンドテクニック」発表スライド
【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』
【Unite Tokyo 2018】トゥーンシェーダートークセッション#1『リアルタイムトゥーンシェーダー徹底トーク』
Unity dojo amplifyshadereditor101_jpn-jp
Unity dojo amplifyshadereditor101_jpn-jp
画像処理ライブラリ OpenCV で 出来ること・出来ないこと
画像処理ライブラリ OpenCV で 出来ること・出来ないこと
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
【Unite Tokyo 2018】『崩壊3rd』開発者が語るアニメ風レンダリングの極意
HDR Theory and practicce (JP)
HDR Theory and practicce (JP)
ゲームの仕様書を書こうまとめ
ゲームの仕様書を書こうまとめ
60fpsアクションを実現する秘訣を伝授 解析編
60fpsアクションを実現する秘訣を伝授 解析編
C++ マルチスレッドプログラミング
C++ マルチスレッドプログラミング
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
それを早く言ってよ〜パフォーマンスを出すエフェクト制作のポイント
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
UE4 Hair & Groomでのリアルタイムファーレンダリング (UE4 Character Art Dive Online)
UE4 Hair & Groomでのリアルタイムファーレンダリング (UE4 Character Art Dive Online)
Similar to シェーダだけで世界を創る!three.jsによるレイマーチング
【Unite Tokyo 2018】誘導ミサイル完全マスター
【Unite Tokyo 2018】誘導ミサイル完全マスター
Unity Technologies Japan K.K.
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
UnityTechnologiesJapan002
Introduction to Algorithms#24 Shortest-Paths Problem
Introduction to Algorithms#24 Shortest-Paths Problem
Naoya Ito
Ekmett勉強会発表資料
Ekmett勉強会発表資料
時響 逢坂
CG2013 06
CG2013 06
shiozawa_h
introductino to persistent homology and topological data analysis
introductino to persistent homology and topological data analysis
Tatsuki SHIMIZU
NIPS2013読み会: Scalable kernels for graphs with continuous attributes
NIPS2013読み会: Scalable kernels for graphs with continuous attributes
Yasuo Tabei
CG2013 09
CG2013 09
shiozawa_h
相対論的ゲームを作る
相対論的ゲームを作る
Kin-ya Oda
PRML 10.4 - 10.6
PRML 10.4 - 10.6
Akira Miyazawa
虚数は作れる!Swift で学ぶ複素数
虚数は作れる!Swift で学ぶ複素数
Taketo Sano
深層生成モデルを用いたマルチモーダル学習
深層生成モデルを用いたマルチモーダル学習
Masahiro Suzuki
代数的実数とCADの実装紹介
代数的実数とCADの実装紹介
Masahiro Sakai
Xeon PhiとN体計算コーディング x86/x64最適化勉強会6(@k_nitadoriさんの代理アップ)
Xeon PhiとN体計算コーディング x86/x64最適化勉強会6(@k_nitadoriさんの代理アップ)
MITSUNARI Shigeo
OpenGLと行列
OpenGLと行列
miyosuda
OpenGLと行列
OpenGLと行列
miyosuda
Fourier transform
Fourier transform
ShinoharaTakuto
Ekmett勉強会発表資料
Ekmett勉強会発表資料
時響 逢坂
競技プログラミングでの線型方程式系
競技プログラミングでの線型方程式系
tmaehara
アニメーションの実装つらい話
アニメーションの実装つらい話
kata shin
Similar to シェーダだけで世界を創る!three.jsによるレイマーチング
(20)
【Unite Tokyo 2018】誘導ミサイル完全マスター
【Unite Tokyo 2018】誘導ミサイル完全マスター
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
【Unite 2018 Tokyo】60fpsのその先へ!スマホの物量限界に挑んだSTG「アカとブルー」の開発設計
Introduction to Algorithms#24 Shortest-Paths Problem
Introduction to Algorithms#24 Shortest-Paths Problem
Ekmett勉強会発表資料
Ekmett勉強会発表資料
CG2013 06
CG2013 06
introductino to persistent homology and topological data analysis
introductino to persistent homology and topological data analysis
NIPS2013読み会: Scalable kernels for graphs with continuous attributes
NIPS2013読み会: Scalable kernels for graphs with continuous attributes
CG2013 09
CG2013 09
相対論的ゲームを作る
相対論的ゲームを作る
PRML 10.4 - 10.6
PRML 10.4 - 10.6
虚数は作れる!Swift で学ぶ複素数
虚数は作れる!Swift で学ぶ複素数
深層生成モデルを用いたマルチモーダル学習
深層生成モデルを用いたマルチモーダル学習
代数的実数とCADの実装紹介
代数的実数とCADの実装紹介
Xeon PhiとN体計算コーディング x86/x64最適化勉強会6(@k_nitadoriさんの代理アップ)
Xeon PhiとN体計算コーディング x86/x64最適化勉強会6(@k_nitadoriさんの代理アップ)
OpenGLと行列
OpenGLと行列
OpenGLと行列
OpenGLと行列
Fourier transform
Fourier transform
Ekmett勉強会発表資料
Ekmett勉強会発表資料
競技プログラミングでの線型方程式系
競技プログラミングでの線型方程式系
アニメーションの実装つらい話
アニメーションの実装つらい話
More from Sho Hosoda
Hanamaru Renderer for レイトレ合宿5‽
Hanamaru Renderer for レイトレ合宿5‽
Sho Hosoda
Immutable List Gem (KLab ALM版)
Immutable List Gem (KLab ALM版)
Sho Hosoda
three.js の紹介
three.js の紹介
Sho Hosoda
カメラで商品検索
カメラで商品検索
Sho Hosoda
TwinCal(学生のためのアプリ開発コンテストVer.)
TwinCal(学生のためのアプリ開発コンテストVer.)
Sho Hosoda
Rubyで連結リスト使うためのgemを作った(tsukuba.rb版)
Rubyで連結リスト使うためのgemを作った(tsukuba.rb版)
Sho Hosoda
Twincal
Twincal
Sho Hosoda
Twitter名刺ジェネレータ
Twitter名刺ジェネレータ
Sho Hosoda
More from Sho Hosoda
(8)
Hanamaru Renderer for レイトレ合宿5‽
Hanamaru Renderer for レイトレ合宿5‽
Immutable List Gem (KLab ALM版)
Immutable List Gem (KLab ALM版)
three.js の紹介
three.js の紹介
カメラで商品検索
カメラで商品検索
TwinCal(学生のためのアプリ開発コンテストVer.)
TwinCal(学生のためのアプリ開発コンテストVer.)
Rubyで連結リスト使うためのgemを作った(tsukuba.rb版)
Rubyで連結リスト使うためのgemを作った(tsukuba.rb版)
Twincal
Twincal
Twitter名刺ジェネレータ
Twitter名刺ジェネレータ
Recently uploaded
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
Recently uploaded
(8)
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
シェーダだけで世界を創る!three.jsによるレイマーチング
1.
シェーダだけで世界を創る! three.jsによるレイマーチング 2016/02/14 GPU の熱でチョコも溶けちゃう!? GLSL シェーダテクニック勉強会 @gam0022
2.
自己紹介 細田 翔 去年まで筑波大学の CGの研究室 KLab 新卒
1年目 three.js 歴 3年目 2 @gam0022(がむ)
3.
最近、取り組んでいること レイトレーシングをGLSLのフラグメントシェーダで実装 http://gam0022.net/webgl/ 3
4.
最近、取り組んでいること レイトレーシングをGLSLのフラグメントシェーダで実装 http://gam0022.net/webgl/ 4
5.
自己紹介 細田 翔 去年まで筑波大学の CGの研究室 KLab 新卒
1年目 three.js 歴 3年目 5 @gam0022(がむ) レイマーチングのおかげで、 three.js に PRがマージされた http://threejs.org/examples/#webgl_raymarching_reflect
6.
レイマーチング? レイマーチング ¦¦ レイトレーシングの1種 6
7.
レイマーチングは超すごい レイマーチングによって、コードから生成された映像 メガデモの神 iq(@iquilezles) 氏の作品 https://www.shadertoy.com/view/MdX3Rr 7
8.
レイマーチングは超すごい レイマーチングによって、コードから生成された映像 otaviogood 氏の作品 https://www.shadertoy.com/view/XljGDz Kali
氏の作品 https://www.shadertoy.com/view/Xtf3Rn 8
9.
レイマーチングは超すごい Shadertoy で raymarching
タグを検索 https://www.shadertoy.com/results?query=tag%3Draymarching 9
10.
レイマーチングはやばい マインクラフトの作者もレイマーチングに注目! http://japanese.engadget.com/2016/01/28/notch-oculus-vr-3-5kb/ 10
11.
レイマーチングは面白い 超すごい映像をコードだけで動的生成できる! マインクラフトの作者もレイマーチングに注目! 11 レイマーチングすごく面白そう!!
12.
話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3.
レイマーチング発展編 4. three.js の話 12
13.
話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3.
レイマーチング発展編 4. three.js の話 13
14.
3Dの描画方法 3Dの描画方法は大きく2種類 1. ラスタライズ法 2. レイトレーシング法 14
15.
ラスタライズ法 形状を三角形 (ポリゴン)の 集合で表現 3Dの頂点を2D に投影して描画 処理が軽い 15
16.
ラスタライズ法 形状を三角形 (ポリゴン)の 集合で表現 3Dの頂点を2D に投影して描画 処理が軽い 16
17.
レイトレーシング法 カメラに届く光線(レイ)を 全ピクセル数シュミレーション 17 【画像出典】 http://www.vcl.jp/~kanazawa/raytracing/?page_id=1154
18.
レイトレーシング法 全ピクセル数シミュレート - 1024x768 = 786432(78万)回 処理は重い 無限に滑らか・ 物理現象の再現が可能 18 【画像出典】 https://sites.google.com/site/ rendering1h/
19.
レイトレーシング法 全ピクセル数シミュレート - 1024x768 = 786432(78万)回 処理は重い 無限に滑らか・ 物理現象の再現が可能 19 【画像出典】 https://sites.google.com/site/ rendering1h/ 詳しくは レイトレーシングの専門家 hole
氏に聞いてください edupt(パストレーシングベースの 物理ベースレンダラ)の作者
20.
2種類のシェーダ WebGLのシェーダは2種類 1.頂点シェーダ (vertex shader) 2.フラグメントシェーダ (fragment shader) 20
21.
頂点シェーダ 頂点の集合をカメラの世界を基準に座標変換 頂点ごとの処理 21 座標変換
22.
フラグメントシェーダ ポリゴンの塗り方を決める役割 - どう陰影をつけるか? - テクスチャを貼るか? ピクセルごとの処理 別名:
ピクセルシェーダ 22
23.
レイトレのフラグメントシェーダ実装 3Dシーンの中に1枚の板を配置 1枚の板の塗り方を 決める処理として、 レイトレーシングを フラグメントシェーダ をつかって実装 23
24.
レイトレのフラグメントシェーダ実装 フラグメントシェーダは GPUで並列処理される とても高速に処理できる リアルタイム描画が可能 24
25.
レイトレのフラグメントシェーダ実装 GPUで並列処理? 難しそう… レイトレーシングは 並列性が高い手法 並列の実装は簡単 25
26.
話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3.
レイマーチング発展編 4. three.js の話 26
27.
ここから レイマーチングの話
28.
レイマーチング レイマーチング レイトレーシング レイマーチングの大きな特徴は、衝突判定 - レイトレーシング •
形状(球体・平面・ポリゴンなど)によって、 衝突判定のアルゴリズムを使い分け - レイマーチング • 距離関数でシーンを定義し、 レイを少しずつ進めながら衝突判定 28
29.
距離関数とは 距離関数 入力:3Dの座標 p (vec3) 出力:点
p からシーンの物体への 最短距離(float) 29
30.
距離関数とは 距離関数 = 最短距離 イメージしずらいので、 実例を挙げていきます 30
31.
距離関数とは 距離関数 = 点
p から、シーン中の物体への最短距離を返す関数 31 距離関数(p) = 最短距離の長さ
32.
距離関数とは 距離関数 = 点
p から、シーン中の物体への最短距離を返す関数 32
33.
距離関数とは 距離関数 = 点
p から、シーン中の物体への最短距離を返す関数 33
34.
レイマーチングのアルゴリズム 距離関数は分かったけど、どうやって衝突判定するの? 次のシーンを使って実例で説明! 34
35.
レイマーチング レイを少しずつ進める ¦¦ レイマーチング 35
36.
レイマーチングのアルゴリズム レイの先端はカメラの位置からスタート がレイの先端 36
37.
レイマーチングのアルゴリズム レイの向きは常に真っ直ぐ 37
38.
レイマーチングのアルゴリズム 赤い線 = 距離関数の値
= レイの先端からの最短距離 一番近い位置にあるのは黄色い球体 38
39.
レイマーチングのアルゴリズム 距離関数の値だけ、レイの先端 を進める 39
40.
レイマーチングのアルゴリズム 2週目の先端 から、さらに最短距離を求める 2週目でも黄色い球体が最短 40
41.
レイマーチングのアルゴリズム 最短距離だけレイを進めて、3週目のレイの先端が求まる 41
42.
レイマーチングのアルゴリズム 3週目でも黄色い球体が最短 42
43.
レイマーチングのアルゴリズム 4週目のレイの先端が求まる 43
44.
レイマーチングのアルゴリズム 4週目で、ついに緑の箱が最短!! 44
45.
レイマーチングのアルゴリズム レイの先端が無事に緑の箱の位置となった!! 45
46.
レイマーチングのアルゴリズム 衝突するまで(最短距離が0)になるまで、 ひたすらレイを進めるだけ 最短距離だけ進めるので、 進みすぎて通り抜けることはない 単純!!シンプル!! 46
47.
レイマーチングのアルゴリズム レイマーチングの アルゴリズムの繰り返し処理 ¦¦ マーチングループ 47
48.
レイマーチングのアルゴリズム マーチングループの実装例 48 float dist, depth
= 0.0; p = origin; for ( int i = 0; i < 64; i++ ){ dist = sceneDist( p ); depth += dist; p = origin + depth * ray; if ( abs(dist) < EPS ) break; }
49.
レイマーチングのアニメーション https://twitter.com/ motions_work/status/ 694898149622550528 49
50.
スフィアートレーシング 今まで説明したのはレイマーチングの1種の スフィアートレーシング 衝突判定の過程で球(スフィアー)がたくさん出てくる 50
51.
3D描画手法の整理 ラスタライザ レイトレーシング - レイマーチング • スフィアトレーシング 51
52.
距離関数の実装
53.
球体の距離関数 原点が中心の半径rの球体の距離関数 原点からの距離 - 半径r 超シンプル 53 float
sphereDist(vec3 p, float r) { return length(p) - r; } 【画像出典】 http://resources.esri.com/help/9.3/arcgisengine/java/api/arcobjects/ com/esri/arcgis/geometry/ISphere.html r
54.
箱の距離関数 原点にある大きさbの箱の距離関数 これも超シンプル 動作原理はややこしいので割愛>< 54 float boxDist(vec3 p,
vec3 b){ return length(max(abs(p) - b, 0.0)); }
55.
様々な距離関数 http://iquilezles.org/www/articles/distfunctions/ distfunctions.htm 最初のメガデモの作者 iq 氏のページにまとめらている 55
56.
シェーディング 衝突「した・しない」の情報からはシルエットしか出せない 56
57.
シェーディング 光源の向きと法線が分かれば、シェーディング(陰影効果)できる float diffuse =
clamp(dot(light, normal), 0.1, 1.0); 57
58.
法線を求める レイトレーシングでは、 形状に応じた法線の計算が必要 - 球体の法線:交点から球体の中心を引く - ポリゴンの法線:エッジの外積を計算 58
59.
法線を求める レイトレーシングでは、 形状に応じた法線の計算が必要 - 球体の法線:交点から球体の中心を引く - ポリゴンの法線:エッジの外積を計算 59
60.
法線を求める レイマーチングでは、 どんな形状でも同じ計算で法線が求まる - 球体の法線:距離関数の勾配 - 箱の法線:
距離関数の勾配 60
61.
法線を求める レイマーチングでは、 どんな形状でも同じ計算で法線が求まる - 球体の法線:距離関数の勾配 - 箱の法線:
距離関数の勾配 61
62.
法線を求める なるほど! 勾配! って何だっけ? 62
63.
法線を求める 63 const float EPS
= 0.01; vec3 getNormal( vec3 p ) { return normalize(vec3( sceneDist(p + vec3( EPS, 0.0, 0.0 ) ) - sceneDist(p + vec3( -EPS, 0.0, 0.0 ) ), sceneDist(p + vec3( 0.0, EPS, 0.0 ) ) - sceneDist(p + vec3( 0.0, -EPS, 0.0 ) ), sceneDist(p + vec3( 0.0, 0.0, EPS ) ) - sceneDist(p + vec3( 0.0, 0.0, -EPS ) ) )); } 勾配の計算 = xyzそれぞれ少しずらして、 距離関数の差分を計算
64.
法線を求める 数学では、f(x,y,z) = 0
で表せる曲面 の法線ベクトル n は n = (f x, f y, f z) と fの偏微分(勾配) となると知られている 距離関数は f(x,y,z) = 0 で表せる曲面に等しい 法線n = 距離関数の勾配 として計算可能 64
65.
法線を求める 「学校で微分は傾きと習ったんだけど!?」 y = 2x
のような式だと、xの微分は傾き f(x,y) = 2x - y = 0 に変形すれば、 2次元でも微分は法線 65
66.
距離関数は万能
67.
距離関数の発展編 レイマーチングでは、距離関数でシーンを定義 距離関数を制した者が レイマーチングを制す 67
68.
話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3.
レイマーチング発展編 4. three.js の話 68
69.
距離関数の合成 箱と球体を和集合で組み合わせた距離関数 min で各距離関数を合成 69 // 箱と球体を和集合で組み合わせた距離関数 float
sceneDist(vec3 p) { return min( boxDist(p, vec3(0.9, 0.45, 0.9), 0.05), sphereDist(p, vec3(0.0, 0.45, 0.0), 0.9) ); }
70.
距離関数の合成 距離関数を min や
max で合成するだけで、CSG表現が可能 70
71.
距離関数の無限の繰り返し mod 演算 で
p をループさせることで、 無限に繰り返し表示できる 71 float distSphere(vec3 p, float r) { return length(p) - r; } vec3 onRep(vec3 p, float interval) { return mod(p, interval) - interval * 0.5; } float distScene(vec3 p) { return distSphere(onRep(p, 4.0), 1.0); }
72.
距離関数の実践編 最初の鉄骨の例 CSG表現 + 無限の繰り返し で実現可能! 72
73.
距離関数の実践編 幅widthの四角柱の距離関数 73 float barDist(vec2 p,
float width) { return length(max(abs(p) - width, 0.0)); } float sceneDist(vec3 p) { float bar_x = barDist(p.yz, 0.1); return bar_x; }
74.
距離関数の実践編 y軸の四角柱を和集合 74 float sceneDist(vec3 p)
{ float bar_x = barDist(p.yz, 0.1); float bar_y = barDist(p.xz, 0.1); return min(bar_x, bar_y); }
75.
距離関数の実践編 z軸の四角柱を和集合 75 float sceneDist(vec3 p)
{ float bar_x = barDist(p.yz, 0.1); float bar_y = barDist(p.xz, 0.1); float bar_z = barDist(p.xy, 0.1); return min( min(bar_x, bar_y), bar_z); }
76.
距離関数の実践編 無限の繰り返し 76 vec2 onRep(vec2 p,
float interval) { return mod(p, interval) - interval * 0.5; } float barDist(vec2 p, float interval, float width) { return length( max(abs(onRep(p, interval)) - width, 0.0)); } p ➡ onRep(p, interval)
77.
距離関数の実践編 同様に円柱を無限に繰り返し 77 float tubeDist(vec2 p,
float interval, float width) { return length(onRep(p, interval)) - width; } float sceneDist(vec3 p) { float tube_x = tubeDist(p.yz, 0.5, 0.025); float tube_y = tubeDist(p.xz, 0.5, 0.025); float tube_z = tubeDist(p.xy, 0.5, 0.025); return min(min(tube_x, tube_y),tube_z); }
78.
距離関数の実践編 角柱 から 円柱
を 差集合 で刳り貫くと… 78 - =
79.
距離関数の実践編 カメラの向きを変えると… 79
80.
距離関数の実践編 sceneDist全体 80 float sceneDist(vec3 p)
{ float bar_x = barDist(p.yz, 1.0, 0.1); float bar_y = barDist(p.xz, 1.0, 0.1); float bar_z = barDist(p.xy, 1.0, 0.1); float tube_x = tubeDist(p.yz, 0.1, 0.025); float tube_y = tubeDist(p.xz, 0.1, 0.025); float tube_z = tubeDist(p.xy, 0.1, 0.025); return max(max(max(min(min( bar_x, bar_y),bar_z), -tube_x), -tube_y), -tube_z); }
81.
距離関数の実践編 赤い色をつけて、遠くを明るくすると… 81
82.
距離関数まとめ 距離関数: 物体までの最短距離 以下を簡単に実現できる - CSG表現(図形の合成) -
無限の繰り返し 少ないコードで複雑な形状をできる 82
83.
話の流れ 1. レイマーチングのための基礎知識 2. レイマーチングのアルゴリズム解説 3.
レイマーチング発展編 4. three.js の話 83
84.
three.js とは WebGLのラッパーライブラリ http://threejs.org/ 84
85.
three.js を使う理由 WebGLの初期化処理を たった数行のコードで書ける カメラのコントロールのための ライブラリを最初から提供 85 大量のコードを書きたくない
86.
three.jsの用語 画像出典: https://html5experts.jp/yomotsu/5225/ 86
87.
フラグメントシェーダ実装 シーンの中に1枚の板を配置 1枚の板の塗り方を 決める処理として、 レイマーチングを フラグメントシェーダ をつかって実装 87
88.
three.js からシェーダを使う 1枚の板のジオメトリを作り、 頂点シェーダとフラグメントシェーダを 設定したマテリアルを適用するコード 88 geometry =
new THREE.PlaneBufferGeometry(2.0, 2.0); material = new THREE.ShaderMaterial({ uniforms: { resolution: { type: "v2", value: new THREE.Vector2(512.0, 512.0) }, }, vertexShader: "頂点シェーダ", fragmentShader: "フラグメントシェーダ", }); mesh = new THREE.Mesh(geometry, material);
89.
three.js からシェーダを使う Material の初期化の時に、シェーダのコードを渡すだけ 89 geometry
= new THREE.PlaneBufferGeometry(2.0, 2.0); material = new THREE.ShaderMaterial({ uniforms: { resolution: { type: "v2", value: new THREE.Vector2(512.0, 512.0) }, }, vertexShader: "頂点シェーダ", fragmentShader: "フラグメントシェーダ", }); mesh = new THREE.Mesh(geometry, material);
90.
three.js vs 生WebGL スクロールバーに注目▼ 90 three.js
49行 生WebGL 215行
91.
常にthree.jsが最適か? 生WebGLを書くことで 勉強になる 高度なことをしたいなら、 生WebGLを使うしか無い 91
92.
常にthree.jsが最適か? three.js勢 も 生WebGL勢 も 仲良くしよう! 92
93.
まとめ レイトレーシングはフラグメントシェーダで 高速にGPU実装できる レイマーチングでは距離関数で衝突判定をする - 短いコードで複雑な形状を表現できる - CSGや繰り返しが簡単にできる three.jsでWebGLを少ないコードで扱える 93
94.
参考資料 我らが @h_doxas 先生の資料 -
https://wgld.org/d/glsl/ メガデモの神 iq(@iquilezles) 氏のページ - http://iquilezles.org/www/index.htm のWebフロントエンド本 (私の著書) - https://techbooster.github.io/c89/#scriptoon2 94
95.
参考資料 これがGPUの力!Three.jsによる リアルタイム なレイトレーシング - http://qiita.com/gam0022/items/ 03699a07e4a4b5f2d41f これがGPUの力!three.jsによる リアルタイム
なレイトレーシング ∼宝石編∼ - http://qiita.com/gam0022/items/ 9875480d33e03fe2113c 95
96.
資料について 資料は後日 SlideShare で公開予定 http://www.slideshare.net/shohosoda9 96
97.
END http://gam0022.net/webgl/ 97
Download now