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

x86エミュレータやFPGA、WebGLにお熱なd-kamiがマイペースに書くブログ

JS

似非3Dのサンプル

JS

// 以前載せた気もするけど、Qiitaに載せたプログラムのサンプルです qiita.com ページが完全に読み込まれた後、下のボタンをクリックすれば似非3D描画が見れます。ブラウザがCanvasに対応していればきっと! Start!

Web Audio APIを使ってみる

JS

// Web Audio APIのテストページが完全に読み込まれた後に下のボタンを押すとちょっとだけ音がなります。動作環境はよくわかっていませんがパソコンでFirefoxやChromeの新しいやつなら動くと思います Play!

あれ...公開してなかった?

Lat式ミクさん表示してJとLでY軸回転(X方向への回転)、画面下のコンボボックスで表情切り替えができます。上から二番目のコンボボックスでコッチミンナにして回転させると面白いかも?以前公開していたような気がしたけど、このURLがブログ上に見つからなか…

おっ

微妙に進んでいく

勇気があるなら階段を上れ!

謎のエントリタイトルを思いついてしまった。今は反省している。WebGLでFPSっぽくしてますが、段差を上れないと悲しそうなので、上れるようにしました。静止画だとわからないけど!DirectX版の動画ならあるよ!

Three.jsで再構築

JS

DirectXで作ってたプログラムをThree.jsで作り直すことにした。進捗は期待はできないんだけど、公開し易い形にはなるかなぁ。まぁ、何かしていれば、そのうちなにかできるでしょ

Three.jsで遊んでる

Shadow MapやFogが簡単に使えていいね!

Three.jsを弄る

らまっこさんのプログラムを改造して環境マップ対応!と思ったら影が消え取る。CubeMapとShadow Mapを共存させるには何かが必要なようだ http://d-kami.net/three/test/

3Dモデルを変換する

pmdの解析プログラムが一番手っ取り早い気がしたので、メタセコイアで作った3Dモデルをxファイル経由でpmdに変換するという効率悪いことをしながら最後にJavaScriptのオブジェクトリテラルに変換するプログラムを通す。あとは描画するのみ

HTML5のCanvasが遅い

JS

レイトレーシングして一番時間がかかってるのがCanvasへの描画だったりするのが悲しい。以前2Dグラフィックスで3Dも一番時間がかかっていたのがCanvasへの描画処理部分だった。なんてこった。改善したらChromeで速くなったよ!でもアップロードしてない

課題

道路が交差したときの処理を入れたい。現状は酷い

Ctrlキー + マウス操作 = 最強!!!

マウスの軌跡で道路を敷くと、少し波打ってたり曲がったりで真っすぐな道路が作りづらかったので、マウスの動かしてる向きと前回の道路の向きの内積を取って、その値を使って制限を加えてみたが、今度はカーブが作りづらくなり、さらにはブレが大きいと直角…

マウスで道を作ろう!

マウスでドラッグしたところに道を作るとプログラム作成中、まずは普通に直線を描こうと思い、普通にプログラムを書いた。この時点ですでに問題はあったがとりあえず無視 そして道を曲げようと思ったら、アレ?前回の座標(終了地点の中央のみ)だけ保存してい…

ここであえてのマウスドラッグ

マウスドラッグで3D上の物体の一部を塗りつぶす処理を入れてみた。はみだしてるけど気にしない。これであとはテクスチャを貼ってたり、別の3Dオブジェクトを置いたりしてけば3Dマップエディタっぽっくなるかもしれない。レイキャスト万歳

今度はメッシュ単位で選択できるように...

今はポリゴン1つしか対象になってないけど、メッシュのどこかのポリゴンが選択されたらメッシュ全体が選択されるような仕組みを作らねば...ソースコードを整理するだけなんですが!

盗んだレイキャストで走り出す

行く先も♪わからぬまま♪...じゃなくてWebGLで作った物体をマウスで選択するためにレイキャストしただけという話である。なんとなくホッテントリメーカを使ってみた。マウスでクリックした部分を中心に青い四角形をかぶせるようにした。スクリーンショットは…

WebGLでレイキャスト中...

マウスで物体を選択するために、レイキャスト中...現在、View変換行列とProjection変換行列の逆行列を計算したものを、マウス座標を-1.0〜1.0であらわしたものに掛けているところ。多分これであっているはず。あとレイにはモデル変換行列の逆行列を掛ければ…

MetalStriker Stage2を作ってるけど

難易度上げすぎた気がするが、簡単にノーダメクリアされるよりはいいかもしれない

昨日は頭痛で何も進んでないので

今日は気合いでいろいろ進めたい

屈折させてみたが

これでいいのかよくわからんなぁ

ついでに光源の位置を変えたりPhongしたり

今まで光源の位置は視点の位置だったが、物体の近くまで持っていった。ついでに球にはphongシェーダを適用した

反射率を抑える

前回のプログラムだと反射率が高すぎた感じがするので、ちょっと抑えてみた。また、板のサイズを小さくした。そして板を1枚追加

反射反射〜

球1つと板4枚であとは反射で描画、レイトレーシング面白い

反射1回のみ

前回まで光源からレイを飛ばして、物体に当たったら色情報を持ったレイを画面に飛ばすという処理をしていたが、また元に戻した。今回は反射を1回だけやってみた

レイトレの逆 その2

前回は下の部分が描画されなかったが、今回は床からの反射した光を当てたことにして描画した。まぁ、細かいところは気にしない

レイトレの逆 その3

前回のプログラムを改悪してモンスターボールに...?

一般的なレイトレの逆?

レイトレは通常、視点からレイを飛ばして物体に当たれば〜だと思うが、試しに光源からレイを飛ばして物体に当たったら視点に向かって色情報を持ったレイを呼ばすとかやってみた。直接光のみで球一つなのでいろいろ失敗している。なにより光源から飛ばしてる…

いろいろ間違ってたけど影

前回までバグが残ってる状態でうまく影を描画できなかったが、今度こそ!うまくいってるはず

何故か影と床だけ描画してみた

床を追加した

前回のやつに床を追加した。ついでに背景色を灰色にした。まだ影は無い

レイトレ

JavaScriptでレイトレした。まだ球を1つだけしか表示させてない。何度目かのレイトレーシング。最近やりたいことが増えてしまって困ってる。目標や優先順位作っても私は守らないので全部やる方向で行く

three.jsで遊んでる

JS

ArrowHelperなるものを見つけたので早速使ってみた。その結果、矢印を表示できるようになった。XYZでそれぞれ違う色の矢印を表示している。

久しぶりにThree.jsを使ってみる

JS

gl.enchant.jsを一旦休めて、久しぶりにthree.jsを試してみた。いろいろ変わった気がするが、特に影が追加されていたのは驚いた。Shadow Mapかよ!しかも、Rayとポリゴンの当たり判定もあるようだ。凄い。gl.enchant.jsもこれぐらいにしてみたいと思うが、私…

バグらせた。しかし...

Shadow Mapで遊んでいたら、シェーダでミスして複数の影が重なりあうような現象が発生。ソフトな影を目指してたけど、これはこれでちょっと弄れば使えそう

WebCLかぁ

JS

面白そうではあるけど、WebGLのGLSLみたいにJavaScriptでない部分が拡大していく!そのうちJavaScriptはWeb○○を呼び出すだけってことにも?! http://webcl.nokiaresearch.com/

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だけな!正面向かせるとテクスチャ貼ってないから目がギャー