シェーダー
gl.enchant.jsで複数のスポットライトをだしてみた
gl.enchant.jsでスポットライトをやってみた。もう少し作りこんで、ライトの種類増やしたりして、light.gl.enchant.jsという名前で公開してみようか
predator.gl.enchant.jsを作りました。これを使えばgl.enchant.jsでSprite3Dをプレデターにできます。背景に模様が無いと全く見えません。 まずはpredator.gl.enchant.jsを読み込みます。注意: gl.enchant.jsよりあとに読み込まないとエラーになります。 <script src="predator.gl.enchant.js" type="text/javascript"></script> 次…
カスタムシェーダーで実現したプレデター。gl.enchant.jsをかなり弄ってます。
floor.gl.enchant.jsを使ってみた。勿論シェーダーは自分で用意したやつで描画
なんかできた
gl.enchant.jsの0.3.5と0.3.6で微妙に構造が変わっていたようだ。前回は0.3.5でやっていて動いたのだが、プログラムとカスタムシェーダーを0.3.6に持ってたら動かなくなっていたので、頑張ってソースコードを読み、原因を突き止めた。いくつかのuniform変数…
gl.enchant.jsでカスタムシェーダーを使おうとして、前回値が渡せないという事件が起こった。その後、TwitterでSprite3Dの_renderを書き換えればいいと教えてもらい試してみた。それが以下のコード。uniformsに渡したいキーと値のペアを入れればOK。そして試…
形は表示せずに屈折をきつくしてみた
WebGLで光学迷彩できたけど、全然見えないため、形だけ見えるようにしておいた
http://jsdo.it/daishi.hmr/gZJzを改造してLambert Shaderをやってみた。色はシェーダーに直接書いてうまくいった。 次にJavaScriptから色を渡すように変更。しかし、ShaderオブジェクトのsetUniformsにuColorを渡してみたけど、なんか渡ってないらしい。Web…
前にやったWebGL版光学迷彩をミスしたところのミスがわかった。関係ないところで関係ないときに当然気付いた。家に帰ったら修正する
どの本が素晴らしいのかなんてわからないので、とりあえず俺がOpenGLおよびGLSLを勉強するために読んだ本達。前のエントリででてきたように圧倒的に工学社である。シェーダーの本はサンプルが多いのが良かった。でもシェーダーで一番お世話になったのがHLSL…
なんかもうわけわからなくなったから、適当にcos使って芸術にした https://www.shadertoy.com/view/XssGzN
ピクセルシェーダーだけでここまでできるのか!レベルが違いすぎる... https://www.shadertoy.com/view/4sfGRH
ただのスポットライトですが(Shader GURUを見て作ったのを改造)...WebGLが使えるブラウザで見てください。FirefoxやChromeなど https://www.shadertoy.com/view/4slGzNSHADER GURU with Direct3D10/11(シェーダーを完全にマスターできる本)作者: 鎌田茂雄出…
魔法が発動しそう
ちょっとぼかしをかける
スポットライトのシェーダーいじってたら、思わぬエフェクトがかかった
結構簡単に作れた
妙な光沢が...
なんかずれてる...
1つのティーポットを2つのシェーダーでそれぞれ描画して合成した
前回の光学迷彩にLambertシェーダーをプラスした。背景に模様がない場所で見ると透明だが、背景に模様があるところでは形がはっきりとわかるようになった
上と下のスクリーンショットは同じものを違う角度から見たものだが正面からは見えない。シェーダーの力は偉大だ
上のスクリーンショットがPhongで下がCook Torrance。面白くなってきた
pixelシェーダで遊んだ
光の反射ベクトルと視線ベクトルの成す角度のcosが重要っぽいな。内積はcosを求めるためにベクトルを正規化しているようだ。そしてcosはべき乗で、光の範囲を絞ったりしてるようだ
前回のエントリでLambertシェーディングをやってみたが、物体の色は気にしていなかった。そこで今回は、試しに物体の色をmixしてみた。使ったのはGLSLのmix関数で、物体の色とライトで計算した色をmixしている。物体の色とライトの向きはJavaScriptから渡す…
シェーダーとしてまずLambertを勉強した。ライトの向いてる方向と法線の内積求めて、diffuseと色をかけるだけでできてしまうらしい。参考ページを見て作ってた。フラグメントシェーダーをまず載せて、その後に全体のプログラムを載せる。その前にプログラム…