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

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

WebGL

ドライヤを凍らせてみた

凍ってる様に見えるかはわからないが、凍らせてみた

グローバルイルミネーションもどき公開

グローバルイルミネーションもどきをアップしました。WebGL使ってるので、WebGL対応ブラウザで見てね!Chrome推奨。WASDで移動、JLで視点回転です。衝突判定無し、あと一定時間毎に何かが更新されます http://d-kami.net/di/

グローバルイルミネーションもどき2

私が持ってるノートパソコンに入ってるIntel HD Graphicsだとリアルタイムグローバルイルミネーションはきついかもしれないが、頑張ってる。でも、またグローバルイルミネーションもどきを作ってしまった。

グローバルイルミネーションもどき

上が普通(?)のライティングで下がグローバルイルミネーションもどき。処理が重くて銃にしか適用できなかったが、なんかリアルっぽく見えるようになったので満足

球面調和関数を使ってみた

球面調和関数でキューブマップのテクスチャを圧縮してみた。393KBを144Bまで圧縮している。これからやることは周辺のだいたいの色さえわかればいいので、凄まじい圧縮となっている。更にここから何かするらしい

シャドウマップ再び

微妙に影をグラデーションさせたつもりだが...わかりづらい

エンボス

久しぶりにWebGLで遊んでみた。とはいっても二次元の画像処理だけど。やったのはエンボスフィルタだと思われる。以下が元の画像とフィルター後の画像。その下にソースコードを載せる元画像 フィルター後 <html> <head> <title></title> <script> window.onload = function() { var image = new </head></html>…

失敗か?

影が微妙な感じになってしまった。ほとんど見えない...

次のShadow Mapへ

Shader X6に載っていたACDF Shadow Mapに挑戦中。遠くてわかりづらいが、何かエッジみたいなものが見える。これが特徴なのかな。これから影付け作業に移る。 Shader X6: Advanced Rendering Techniques (Shaderx)作者: Wolfgang Engel出版社/メーカー: Charl…

スポットライトのデモをアップしました

WebGLを使ったスポットライトのデモをアップしました。壁とか普通に貫通します(悲しい

TwitterにもFacebookにも貼ったので

ここにも貼っておこう。左下のコンボボックスで表情を選んでいる。早くアニメーションを実装なければ!

表情切り替え

表情を変えるだけなら前回やっていたが、それは描画前に1度しか切り替えなれないものだった。今回は描画後でも何度でも切り替えられるように修正した。さぁ、次はアニメーションか!?

表情変化!

MMDのモデルから表情リストを読み取り、表情を変化させることに成功した。あとはアニメーションかな。IKが大変そうだ

今度こそエッジを

前回はエッジがあるかどうかが際どく、エッジの無い画像と比べてもよくわからなかったが、今回はちゃんとエッジが見える。やったね!

Chromeでバグった?

MMDで描画したモデルをfirefoxで表示すると、普通に描画されるが、Chromeで見るとちらつきが発生。何故かと思ったら、描画用のループ(というかタイマで定期的に実行だが)でvertexAttribPointerを毎回呼び出していることが問題だったようだ。1回呼び出したら…

法線使うと死ぬ

シェーダで正規化した法線と正規化したライトの向きの内積を使うと何故か描画がおかしくなる。他のモデルではうまくいくのに...法線がなんか特殊なのか?モデルに用意されてる法線使わなければ描画できるので、法線抜きで

ちょっとだけエッジをだしてみた

上の画像がちょっとだけエッジをだしてみたところ。下の画像は以前のやつにちょっと近づけたやつ。服の内側が消えてしまってるのは気にしない。他はよく見ると違うような同じのような

LAT式

このエントリのグロ注意状態になっている。みんなが通る道らしい? http://d.hatena.ne.jp/edvakf/20111002/1317578036

巡音ルカを探して

MMDに巡音ルカが含まれてなかったので、探してみたところ、結構見つかった。そこで直感で選んだルカをWebGLで表示してみた。ライトとかシェーダの関係で残念な感じになってしまってるけど許してー。頑張ればもっと可愛くなると思います!配布元はこちら

今夜はここまで!

LAT式はうまくいかなかったけど、MMD付属の初音ミクはなんとなくうまく表示されている?気がする。今夜はもう満足だ

Ambientを入れた

Ambient入れたら色が明るくなった

色が...?

diffuseカラーの適用とテクスチャマッピングを終わらせた。あとAmbientとかSpecularの適用か。それが終わったらシェーダで頑張る

drawElementsで失敗

drawElementsの第四引数は単純にindexを渡せば良いと思っていた。しかし、それではうまくいかなかった。そこでGoogle先生に聞いてみたところ、WebGL の drawElements の第四引数は「バイト数」というエントリに到達。なるほど、バイト数指定か...と思いなが…

描画方法を変える必要がある

現在、とりあえず1回のdrawElementsで全ての頂点を表示している。テクスチャを考えなければそれで良かったが、部位ごとに違うテクスチャを貼りつけたり、一部だけテクスチャを貼りつける場合、問題になりそうなので、描画方法を考える。とは、言ってもMMDの…

とりあえずdiffuseだけでも

MikuMikuDanceのモデルをWebGLで表示。ただし、色はdiffuseだけな!正面向かせるとテクスチャ貼ってないから目がギャー

MMDの頂点と面の情報だけ取得してみた

MMDのモデルデータ(PMD)形式 めも (まとめ)を見ながらJavaでパースして、JavaScriptに変換し、WebGLで表示した。影がアレなのは気にしない!

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

なんかできた

屈折をきつくしてみた

形は表示せずに屈折をきつくしてみた

WebGLで光学迷彩

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

光学迷彩のミスに気付く

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