なんかもうわけわからなくなったから、適当に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(シェーダーを完全にマスターできる本)作者: 鎌田茂雄出…

魔法が発動しそう

ちょっとぼかしをかける

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

結構簡単に作れた

妙な光沢が...

なんかずれてる...

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

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

OBBをJavaScriptで作り、テストしようと思った。しかし問題発生。JavaScriptで継承もどきを使った部分で何か変な挙動が起こる。AとBのボックスを作ったがAを動かすとBも同じ位置に行ってしまうという問題が発生した。それぞれ別のオブジェクトなのだが、オー…

もうすぐ実装できる...はず。これができたら衝突判定ができる。さて、もうひと頑張りだ

とりあえずベクトル計算を行いたかったので、こんなプログラムを作ってみた。３次元ベクトルの足算、引算、内積、外積、正規化を行える...はず var Vector3 = function(){ this.elements = new Array(0.0, 0.0, 0.0); this.set = function(x, y, z){ this.el…

今作ってるプログラムだと壁を突き抜けてしまうので衝突判定を入れたい。球だったら楽に判定できるけど壁は四角い。銃や自分の判定は角度を持ったBoxにする予定なのでOBBを勉強する必要がありそう。とりあえず下記のリンクが参考になりそうだ3D衝突判定（当…

未完成だが今作っているFPSをアップロードした。現在できるのは散歩のみ。しかも壁を突き抜けることができる。できるだけ新しいFirefoxやChromeで見てね！ 操作方法 移動 W 前 S 後 A 左 D 右 回転 J 左 L 右 http://www.d-kami.net/fps/test2/

向きを変えたときに銃の向きも変わるようにした。あとは移動

配列の１要素を指定するところで、何故か配列を渡してしまったことがバグの原因だった。エラーだしてよー。まぁ、うまくいってよかった。でも反射するところがおかしいような...

もっと簡単なシェーダーからやろうと思い環境マッピングに挑戦した。真ん中の球を鏡みたいに周りの風景を反射させるようにしたのだが、うまくいかなかった。ただ背景色変えたら、球の色も変わったので途中まではうまくいってるらしい。テクスチャマッピング…

シャボン玉みたいになる予定が何がなんだかわからない模様になってしまった。うーむ、難しい

ambient、diffuse、specularの値を変えてみた。雰囲気が変わった。シェーダー面白い！

gl.enchant.jsやUnityに続き相変わらずFPSにこだわっているが、とりあえず形だけでも。FirefoxとかChromeなら表示できるだろうけど、操作はできないよ！ http://www.d-kami.net/fps/test1/

WebGLでメタセコイアで作ったモデルの表示に成功した。でもテクスチャとかまだだけど。というか俺に絵心がないのでテクスチャ作ると酷くなります。なのでフリーの素材探して表示させてみようか？ http://www.d-kami.net/

法線ベクトルかシェーダをミスってるけど、あの銃をWebGLで表示してみた。FirefoxかChromeで見れるはず...http://www.d-kami.net/

メタセコイアで作った3DモデルをWebGLで表示しようと思い奮闘中。あとは法線ベクトルを設定するだけ...のはず。JavaScriptでMQOを読み込んでるわけじゃなくて、別のプログラムでMQOをJavaScriptに変換しているだけだったり

計算式の()の位置間違えて計算結果がおかしくなっていた。よく確認しないとね〜。それでうまく波を表示できた。もう少し自然な感じをだしたい

GL側で3次元で定義してたのにシェーダ側で2次元で処理してたために波が表現できないというアホなことをやっていたが、シェーダ側を修正して、さぁ！表示だ！と思ったら何か変な表示になった。変なバグを埋め込んでしまったらしい！またしょうもないミスなん…

WebGLで波を表現したいと思っているが、まだできてない。これから先もできないかもしれないがやってみたい。画像の上の平面に波をだして、下の平面に影を落としてみたい

WebGLで座標変換のプログラムを全部書くのは大変なのでglMatrix-0.9.5.min.jsを導入した。物体の移動、回転、透視投影変換がとても楽になった。ライティングは『OpenGL+GLSLによる3D‐CGアニメーション』を参考にした。わかってないところが多く、ほとんどそ…