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

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

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

一般的なレイトレの逆?

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

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

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

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

床を追加した

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