JS
とりあえずベクトル計算を行いたかったので、こんなプログラムを作ってみた。３次元ベクトルの足算、引算、内積、外積、正規化を行える...はず 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アニメーション』を参考にした。わかってないところが多く、ほとんどそ…
化け猫アイコンメーカーで作ったこの画像を使ってテクスチャマッピングしてみた。ついでにシェーダーで半分色反転させてみた <html> <head> <title></title> <script> window.onload = function() { var image = new Image(); image.src = "./bakeneko.png"; image.onload = function() { render</head></html>…
下記リンクを参考にWebGLを使ったプログラムを書いてみた。FirefoxとChromeの最新版で動作確認した http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/メインプログラムはほぼそのままだが、フラグメントシェーダーを少しいじった。x座標が1…
gl.enchant.jsでテクスチャを貼ろうと思ったら、エラーもなくただ黒い画面が表示された。テクスチャ無しだとPlaneが表示されるのでテクスチャ関係でミスったと思い、調べてみたところ、ローカルだとクロスドメイン制約で駄目らしい。モデルは読み込めるのに…
gl.enchant.jsでルービックキューブを作成した。これからゲームにしていくつもり
今作ってるゲームはWebGLを使っている。スマートフォンでの実行を考慮してui.enchant.jsを使って仮想十字キーと仮想アナログパッドを追加したけど、スマートフォンでWebGLを使える環境ってあるのだろうか？AndroidにFirefox入れれば見れるのかな？試してみる…
9leapにゲームをアップしました。できるだけ新しいFirefoxかChromeでプレイしてください。http://9leap.net/games/1250
あとはスコア表示と残り時間表示ができれば...
まずは十分遠くにいった弾の消去を行った。そして、次は的を作成してみました。そして弾と的の衝突判定を入れて、衝突したら的を消えるようにした。あとはゲームになるように仕上げるのみ
gl.enchant.js使ってクロスヘアを表示させようと思ったが、2Dの画像をどうやって表示したらいいかわからず、最初はビルボードを使おうと思った。そしてビルボードを視点に合わせて位置を変えればいいのかな？と思っていたがTwitterで2Dの画像を表示させる方…
マウスの左ボタンが押されたら弾を発射するようにしてみた。普通のJavaScriptのコードだけどこんな感じ document.addEventListener('mousedown', function(event){ if(event.button == 0){ fps.fire(); } }, false);
前に紹介したmqoを読み込むプラグインで銃のモデル(http://sakura.hippy.jp/meta/にある銃のモデル)を読み込み床を簡単に作れるプラグインfloor.gl.enchant.jsを以下のページから落として使った。 http://tmlife.net/programming/javascript/gl-enchant-js-p…
カメラを中心に視点を回転させてみた。カメラのz座標とcenterZの距離を10にしてやってみた。 var cameraRadianX = 0.0; game.rootScene.addEventListener("enterframe", function(e){ if(game.input.left){ cameraRadianX += 0.05; camera.centerX = camera.…
enchant.jsというHTML5 + JavaScriptベースのゲームエンジンがあるとTwitterで聞き調べたところenchant.jsのWebサイトが見つかった。さらにgl.enchant.jsというものも発見。gl.enchant.jsを使えばWebGLを簡単に使えるらしい。メタセコイアで作った3Dモデルは…
今回は敵の種類を増やしてみる。画像はEnemy1を使う。まずはobject/Enemy2.js。Eneym1がただ横に移動してただけに対して、斜め移動をするようにした。スコアも2倍にしておく var Enemy2 = function(image){ this.position = new Point(); this.rect = new Re…
