[コードリーディング] レイマーチングによる波表現を読み解く
概要 今回はちょっと趣向を変えてコードリーディングをしてみたいと思います。 まずは以下の動画を見てください。 https://www.shadertoy.com/view/Ms2SD1 とてもきれいな海の映像ですよね。 これ、レイマーチングと呼ばれる方法でプログラムでリアルタイムに描いている映像なのです。 Shadertoyの投稿作品のページに飛べば、実際にレンダリングされている様子を見ることができます。 投稿者でなくても一時的なコードの変更をすることができるので（当然保存はできない）、パラメータをいじったりするとリアルタイムに内容が反映されるのが分かるかと思います。 今回はこの海のコードを読み解きつつ、内容を理解していくのが目的となります。 なお、この海のレンダリングにはいくつかの技術が使われており、それぞれについて個別に記事をまとめたのでそちらも合わせて見てもらうとより理解が深まるかな
![[コードリーディング] レイマーチングによる波表現を読み解く](https://cdn-ak-scissors.b.st-hatena.com/image/square/330bba3072f84fe60611ccd67b6c231ceb44e2a4/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgzJUFBJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJTIwdm9sLjElNUQlMjAlRTMlODMlQUMlRTMlODIlQTQlRTMlODMlOUUlRTMlODMlQkMlRTMlODMlODElRTMlODMlQjMlRTMlODIlQjAlRTMlODElQUIlRTMlODIlODglRTMlODIlOEIlRTYlQjMlQTIlRTglQTElQTglRTclOEYlQkUlRTMlODIlOTIlRTglQUElQUQlRTMlODElQkYlRTglQTclQTMlRTMlODElOEYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWMzNGZiNTBiM2U4MzA2MjVlYzljYWQxN2Y3ZWUyYTVj%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBlZG9fbTE4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lMmQ5MGMxNzhmNTEyNmZmYmVlZTEzOTliMzVmNzRhZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dd3a749598b467abbbab5a0b25f7a478b)
[Unity] Mesh Cutのサンプルを読む（メッシュの切断） - Qiita
概要 Unity以外でもそうですが、メッシュは頂点の塊です。 そしてそれらはTriangleやそれらを結ぶIndexで構成されています。 つまり、勝手に順番を変えてしまうと頂点の情報はぐちゃぐちゃになってしまい、ちゃんとしたオブジェクトとして表示することはできません。 そのため、メッシュを切断して別のオブジェクトに分けようとすると、それなりに頂点郡を計算してポリゴンを縫い合わせてやる必要があります。 今回はそんなメッシュのカットを行うサンプルを公開してくれている人がいたので、そのサンプルを読んだメモを書いていきます。 実際に実行してみたのが以下のものです↓ 左側の3本のラインがカット面を示していて、その平面できれいに切断されているのが分かるかと思います。 しかも、しっかりと切断面に別のマテリアルが割り当てられているのにも注目です。 大まかな流れ まずは大まかな流れから説明します。 具体的に
![[Unity] Mesh Cutのサンプルを読む（メッシュの切断） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a422dd437df5adb93bffa0e2ba560a08daa7d65/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNTYxNiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTYwMDMwMzY2Mz9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz00YWVlZmJkNWZiMmZkYWUyOWM0Yzk5ZDJmOTJiMjZlYQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D39d93af82d0822915255df0c881cf200%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCVW5pdHklNUQlMjBNZXNoJTIwQ3V0JUUzJTgxJUFFJUUzJTgyJUI1JUUzJTgzJUIzJUUzJTgzJTk3JUUzJTgzJUFCJUUzJTgyJTkyJUU4JUFBJUFEJUUzJTgyJTgwJUVGJUJDJTg4JUUzJTgzJUExJUUzJTgzJTgzJUUzJTgyJUI3JUUzJTgzJUE1JUUzJTgxJUFFJUU1JTg4JTg3JUU2JTk2JUFEJUVGJUJDJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9ZTI0ZjkzNWQ0NjJhNzBhOGExYzQ3NTg3NDEwMWQ3YmQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBlZG9fbTE4JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ODM0NTU3N2U0MjQ2ZTA3MjZjZmFhMTNjYjIwODJkMWE%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D5e4f974f33d87ec6f80309a58250f38a)
[Unity] モデルをマスクするボックスを作るシェーダ - Qiita
今作ろうと思っているもので、モデルを徐々に出現させたり、逆に徐々に消す、みたいないわゆるフェードイン・アウトを実装したいと思いました。 2Dであればその処理はとても簡単ですが、3Dではレンダリングが複雑で簡単には行きません。 モデルには当然、それを表現するシェーダがセットになっていますし、そのシェーダがいじれない場合なんかもあります。 （とはいえ、本当にリアルな映像を作るならシェーダをいじらずになにかをするのは不可能ですが） ごく簡単な演出であれば、こちらで用意したシェーダでもそうした表現が可能です。 結論から言うと、深度テストの仕組みをうまく使うことで実現しました。 （もしかしたらステンシルバッファを使ってもできるかもしれませんが、ちょっと分かりませんでした；） 本当は半透明な効果も使ってフェードイン・アウトをしたいんですがスキル不足です・・。 ちなみに今回実装したやつを表示するとこんな
![[Unity] モデルをマスクするボックスを作るシェーダ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc12abc26eb7bda343b3c9451da6537a92de2201/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNTYxNiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTYwMDMwMzY2Mz9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz00YWVlZmJkNWZiMmZkYWUyOWM0Yzk5ZDJmOTJiMjZlYQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D39d93af82d0822915255df0c881cf200%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCVW5pdHklNUQlMjAlRTMlODMlQTIlRTMlODMlODclRTMlODMlQUIlRTMlODIlOTIlRTMlODMlOUUlRTMlODIlQjklRTMlODIlQUYlRTMlODElOTklRTMlODIlOEIlRTMlODMlOUMlRTMlODMlODMlRTMlODIlQUYlRTMlODIlQjklRTMlODIlOTIlRTQlQkQlOUMlRTMlODIlOEIlRTMlODIlQjclRTMlODIlQTclRTMlODMlQkMlRTMlODMlODAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz05NzAwZDgyNjk4N2M3MDYwNTM3OTJhZjY3Mjk1MjlhNw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBlZG9fbTE4JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ODM0NTU3N2U0MjQ2ZTA3MjZjZmFhMTNjYjIwODJkMWE%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dd77ef352367a4b41b1498933b728415a)
[Unity] Glowっぽいシェーダを書いてみた - Qiita
シェーダめっちゃ楽しいですねｗ 最近はシェーダの勉強がメインになっていますが、ごにょごにょしてたらなんとなくそれっぽくなったので記事にしてみました。 ちなみに適用したところ↓ 処理の流れ 大まかな処理の流れは、 通常のオブジェクトをレンダリング 2Pass目で、法線方向に膨らませたオブジェクトを視点を考慮に透明度を計算 という感じです。（2Passってこういう使い方であってるんかな？） コード まずはコード。 Shader "Custom/GlowShader" { Properties { _Color ("Object's Color", Color) = (0, 1, 0, 1) _GlowColor ("Glow's Color", Color) = (1, 0, 0, 0) _Strength ("Glow Strength", Range(5.0, 1.0)) = 2.0 }
![[Unity] Glowっぽいシェーダを書いてみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b7c48715a29f03d5d3c4c1b7b1d9915c63c132cc/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNTYxNiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTYwMDMwMzY2Mz9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz00YWVlZmJkNWZiMmZkYWUyOWM0Yzk5ZDJmOTJiMjZlYQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D39d93af82d0822915255df0c881cf200%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCVW5pdHklNUQlMjBHbG93JUUzJTgxJUEzJUUzJTgxJUJEJUUzJTgxJTg0JUUzJTgyJUI3JUUzJTgyJUE3JUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgyJTkyJUU2JTlCJUI4JUUzJTgxJTg0JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9OTY0OTNiODJlNTExNmIxZmFmMjgyNmJjYWJlNWI5ZDQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBlZG9fbTE4JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ODM0NTU3N2U0MjQ2ZTA3MjZjZmFhMTNjYjIwODJkMWE%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D704d0cf89390ceb7d590d188b0473de8)
Three.jsのRaycasterを使って、画面内のオブジェクトを得る - Qiita
Three.jsのRaycasterクラスを使って、画面内のオブジェクトを取得するサンプル。 ざっくり手順を書くと、 マウス位置を取得 マウス位置をWebGL内の座標系に変換 マウス位置からまっすぐに伸びる光線ベクトルを生成 その光線とぶつかったオブジェクトを得る という手順。色々めんどくさいこともThree.jsがやってくれるので、以下のようにするだけで該当オブジェクトをさくっと得ることができる。 [2015.01.18 upate] unprojectメソッドは、Vectorクラスに移動したようです。 function onmousemove(e) { var rect = e.target.getBoundingClientRect(); // スクリーン上のマウス位置を取得する var mouseX = e.clientX - rect.left; var mouseY = e.c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
