マイペースなプログラミング日記

DTMやプログラミングにお熱なd-kamiがマイペースに書くブログ

シェーダー

複数のスポットライト

gl.enchant.jsで複数のスポットライトをだしてみた

gl.enchant.jsでスポットライト

gl.enchant.jsでスポットライトをやってみた。もう少し作りこんで、ライトの種類増やしたりして、light.gl.enchant.jsという名前で公開してみようか

predator.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でプレデター

カスタムシェーダーで実現したプレデター。gl.enchant.jsをかなり弄ってます。

floor.gl.enchant.jsを使ってみた

floor.gl.enchant.jsを使ってみた。勿論シェーダーは自分で用意したやつで描画

WebGLである方向の光だけを通す物体?

なんかできた

gl.enchant.jsの0.3.5と0.3.6で微妙に違うらしい

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で光学迷彩

WebGLで光学迷彩できたけど、全然見えないため、形だけ見えるようにしておいた

gl.enchant.jsでシェーダーに値を渡せてない...

http://jsdo.it/daishi.hmr/gZJzを改造してLambert Shaderをやってみた。色はシェーダーに直接書いてうまくいった。 次にJavaScriptから色を渡すように変更。しかし、ShaderオブジェクトのsetUniformsにuColorを渡してみたけど、なんか渡ってないらしい。Web…

光学迷彩のミスに気付く

前にやったWebGL版光学迷彩をミスしたところのミスがわかった。関係ないところで関係ないときに当然気付いた。家に帰ったら修正する

OpenGLを勉強するときに読んだ本達

どの本が素晴らしいのかなんてわからないので、とりあえず俺が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(シェーダーを完全にマスターできる本)作者: 鎌田茂雄出…

スポットライト その3

魔法が発動しそう

スポットライト その2

ちょっとぼかしをかける

思わぬエフェクト

スポットライトのシェーダーいじってたら、思わぬエフェクトがかかった

スポットライト

結構簡単に作れた

光沢が...

妙な光沢が...

WebGL版光学迷彩をミスしたところ

なんかずれてる...

合成!

1つのティーポットを2つのシェーダーでそれぞれ描画して合成した

光学迷彩 + Lambert

前回の光学迷彩にLambertシェーダーをプラスした。背景に模様がない場所で見ると透明だが、背景に模様があるところでは形がはっきりとわかるようになった

光学迷彩?

上と下のスクリーンショットは同じものを違う角度から見たものだが正面からは見えない。シェーダーの力は偉大だ

HLSLで遊びまくってる

上のスクリーンショットがPhongで下がCook Torrance。面白くなってきた

HLSLで遊ぶ

pixelシェーダで遊んだ

Phongシェーダーがわかった気がする

光の反射ベクトルと視線ベクトルの成す角度のcosが重要っぽいな。内積はcosを求めるためにベクトルを正規化しているようだ。そしてcosはべき乗で、光の範囲を絞ったりしてるようだ

色をmixしてみた

前回のエントリでLambertシェーディングをやってみたが、物体の色は気にしていなかった。そこで今回は、試しに物体の色をmixしてみた。使ったのはGLSLのmix関数で、物体の色とライトで計算した色をmixしている。物体の色とライトの向きはJavaScriptから渡す…

Lambertシェーディングを試してみる

シェーダーとしてまずLambertを勉強した。ライトの向いてる方向と法線の内積求めて、diffuseと色をかけるだけでできてしまうらしい。参考ページを見て作ってた。フラグメントシェーダーをまず載せて、その後に全体のプログラムを載せる。その前にプログラム…