aikeのブックマーク - はてなブックマーク

[コードリーディング] レイマーチングによる波表現を読み解く

概要今回はちょっと趣向を変えてコードリーディングをしてみたいと思います。まずは以下の動画を見てください。 https://www.shadertoy.com/view/Ms2SD1 とてもきれいな海の映像ですよね。これ、レイマーチングと呼ばれる方法でプログラムでリアルタイムに描いている映像なのです。 Shadertoyの投稿作品のページに飛べば、実際にレンダリングされている様子を見ることができます。投稿者でなくても一時的なコードの変更をすることができるので（当然保存はできない）、パラメータをいじったりするとリアルタイムに内容が反映されるのが分かるかと思います。今回はこの海のコードを読み解きつつ、内容を理解していくのが目的となります。なお、この海のレンダリングにはいくつかの技術が使われており、それぞれについて個別に記事をまとめたのでそちらも合わせて見てもらうとより理解が深まるかな

aike 2018/11/02

shader

リンク

[Unity] Mesh Cutのサンプルを読む（メッシュの切断） - Qiita

概要 Unity以外でもそうですが、メッシュは頂点の塊です。そしてそれらはTriangleやそれらを結ぶIndexで構成されています。つまり、勝手に順番を変えてしまうと頂点の情報はぐちゃぐちゃになってしまい、ちゃんとしたオブジェクトとして表示することはできません。そのため、メッシュを切断して別のオブジェクトに分けようとすると、それなりに頂点郡を計算してポリゴンを縫い合わせてやる必要があります。今回はそんなメッシュのカットを行うサンプルを公開してくれている人がいたので、そのサンプルを読んだメモを書いていきます。実際に実行してみたのが以下のものです↓ 左側の3本のラインがカット面を示していて、その平面できれいに切断されているのが分かるかと思います。しかも、しっかりと切断面に別のマテリアルが割り当てられているのにも注目です。大まかな流れまずは大まかな流れから説明します。具体的に

aike 2017/02/02

unity

リンク

[Unity] モデルをマスクするボックスを作るシェーダ - Qiita

今作ろうと思っているもので、モデルを徐々に出現させたり、逆に徐々に消す、みたいないわゆるフェードイン・アウトを実装したいと思いました。 2Dであればその処理はとても簡単ですが、3Dではレンダリングが複雑で簡単には行きません。モデルには当然、それを表現するシェーダがセットになっていますし、そのシェーダがいじれない場合なんかもあります。（とはいえ、本当にリアルな映像を作るならシェーダをいじらずになにかをするのは不可能ですが）ごく簡単な演出であれば、こちらで用意したシェーダでもそうした表現が可能です。結論から言うと、深度テストの仕組みをうまく使うことで実現しました。（もしかしたらステンシルバッファを使ってもできるかもしれませんが、ちょっと分かりませんでした；）本当は半透明な効果も使ってフェードイン・アウトをしたいんですがスキル不足です・・。ちなみに今回実装したやつを表示するとこんな

aike 2015/06/29

unity

リンク

[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 }

aike 2015/01/26

glsl

リンク

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

aike 2014/11/12

リンク

はてなブックマーク

タグ

ブックマーク / qiita.com/edo_m18 (5)

お知らせ

今週のはてなブックマーク数ランキング（2024年6月第2週）

月間はてなブックマーク数ランキング（2024年5月）

今週のはてなブックマーク数ランキング（2024年6月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス