THREE.JS examplesをいじってみた(フレネル反射透過シェーダー)

シャボン玉美寿.htm

シャボン玉美寿.zip




zipを解凍したらthreejsフォルダにthree.jsライブラリ(three.js-master.zip)
を解凍してください
ＨＴＭＬ、ＪＳは./WORK/javascripts/threejs/examples/
にあります


threejs/examples/webgl_materials_shaders_fresnel.html
threejs/examples/jsm/shaders/FresnelShader.js
threejs/examples/jsm/objects/Water.js

を参考にしました

フレネル反射だから透過しなければ意味ないなあと思い
いじくりまわしたところ
ShaderMaterialのオプションを
transparent: true,
opacity: 0.5,
blending: CustomBlending,
blendSrc: SrcAlphaFactor,
blendSrcAlpha: 0.5,
blendEquation: MaxEquation,
blendDst: SrcAlphaFactor,
こんな風に設定して
メッシュのオプションも
water.renderOrder = 1;
こんな感じにすればいいみたいです

WaterPlane.jsは
サンプルのWater.jsをベースにFresnelShader.js
のシェーダーを追加しました

ネットの情報はほとんどが古くて
THREEJS本家で
確かめないことには使えないから大変でした

まあ、サンプルのおかげで綺麗に水面表現ができたと思います

十何年前のＰＣで無理にこのシャボン玉ページ作ったら
ＰＣが壊れた
新しくＰＣ買ったらＣＰＵ占有率が８０％オーバーから２％以下になった
技術の進化を感じました

あれれ？おらがシャボン玉アップしてから
その前までググっても検索できなかった
そっくりなのがおらのタイムスタンプよりも
前の日付付きで検索できるようになったぞ
ま、ええや
そっちのは海が半透明じゃないから
フレネルじゃないし鏡面ですわ
フレネル反射の意味を知らないやつなんだろうな
境界面に直交は透けて浅い角度だと反射するのがフレネル反射なんですよん
そのサイトのコードはおらは全然見てないよん
でもなんでいきなり検索できるようになったんだろ？？？
パクリくらいならどうでもいいけど
グーグル先生にフィルタリングされているとしたら萎えるわーーーＴＴ
ググっても化石みたいな古いTHREE.JSコードしか検索されないんですが
おらだけなんか？
ネットカフェとか行く機会あったらちょっと注意してみよっと
本家と比べてたらネットの情報って古いメッシュの情報とかばっかしだから
おらが新しい情報を流そうかなぁって思ってたんだけど
フィルタリングされてるだけなら嫌だしそれはおらのせいじゃないよ
大事だからもう一度
境界面に直交は透けて浅い角度だと反射するのがフレネル反射なんですよん
でも透明メッシュはレンダリングオーダーが難しいから
普通は鏡面でやってるのよん
後はネットの情報を漁るよりも本家のサンプルに潜ったほうが習得は早いんだよん
DirectXの時からずっとおらにとって一番役に立つのは本家のサンプルなん

あーーー
こだわって作ったフレネルの透過部分を嫁さんに砂浜でしょって言われた
で、deep透明平面を水面僅か下に作って
水面のrenderOrder=2,deepのrenderOrder=1
にしたのと
あとは水面のフレネルバイアスとかプロパティも変えて
フラグメントシェーダーの
vec3 surfaceNormal = normalize( noise.xzy * vec3( 1.5, 1.0, 1.5 ) );
から
vec3 surfaceNormal = normalize( noise.xzy * vec3( 20.0, 1.0, 20.0 ) );
にして波を際立たせた
まぁ、元ゲームプログラマーだからどこ変えればいいか感覚で分かる
水面っていうのはこんな感じだろ
こんな水面表現がゲームプログラマーＯＢのクオリティですわ
ま、パクられたとしてもまた逆におらがパクったって言われるとしても
簡単には真似が出来ないくらいのクオリティにすればいいだけのこと
そもそもパクらせるつもりでzipまで用意してるんだしな
水面の影も反射も透過も濁りも普通にBeautifulにできたし
このくらいなら商用にも耐えられるだろ
水面の盛り上がりとか飛沫とかを実装すれば完璧なんだけど
流体物理シミュレーションだし
大変だからなぁ

SkyBoxを変えられるようにした

THREE.JSサンプルの二番煎じ　書き換えのパロディ　美味しいですね