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

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

gl.enchant.js

プロジェクションマッピングっぽいことをやりたい

その第一歩がプログラム内でモデルに対してテクスチャを貼る。本来、テクスチャ座標はモデルの形に合わせて設定されるので、モデルに合わせてテクスチャを作らない限り、滅茶苦茶に表示されてしまうが、そこは計算でうまくやるものであるhttp://9leap.net/ga…

久しぶりの光学迷彩

gl.enchant.jsで久しぶりの光学迷彩。次はgl.enchant.jsでShadow Mapしたい

なんかやりたいことやるには

いろいろ書きかえないといけないようだ。少なくともシェーダは書きかえたい。だが某イベントまで時間が無い。どうしたものか

gl.enchant.jsは

手軽に3Dができて面白いんだけど、シェーダーとか弄り始めると逆に使いづらく感じる。手軽さと拡張性はトレードオフか...?まぁ、シェーダーに手を加えやすくなったとして需要があるのかは疑問。俺は喜ぶけど

mmd.gl.enchant.js

mmd.gl.enchant.jsのサンプルを見てみたがなかなか重かった。影がないから加えたいと思っていたが、この重さでは厳しいそう。まぁ、パワフルなマシンならやってたかもしれないが、なんたって4万円のノートPCなので厳しい。それにしてもmmd面白そうだな。

光源の位置を考える必要がある

ステージ全体を対象としたShadow Mapがめんどくさそうなので、プレイヤーキャラの近くだけ影ができるようにしてみようか。ただ光源もキャラに合わせて動かさないといけなさそうな感じがするが。↓のスクリーンショットは光源をプレイヤーに近づけたときにでき…

ちょっとだけ改善した

改善したけど、まだギザギザだ。そして重くなった。改善方法を探さねば。

シャドウマッピング...あれ?

シャドウマッピングをして影を付けたつもりが、影がギザギザになってしまった...

新しいゲームを作ろうとしたが

大したことはしてないが重すぎて駄目だ。大したことしてないから駄目なのかもしれないが。ノートPCだとつらいが、多分何らかの方法で高速化できそう。ただ、その方法が思いつくまでは公開できそうにない

部分的に拡大表示

特定の領域だけ拡大表示するようなプログラムを作成した。ACOGスコープとかで使える?

四角いライト

誰得な気もするが、四角いライトを作成した

変なライトを作った

直線状のライトを作ってみた。ライトの位置計算にcosを使ってるため、一定間隔で直線状を照らしている。ライトの間隔も変えられるようにした。ただし、使い道に困る

壁が見える範囲を囲ってみた。

見えない壁と見える壁の境界はわかるけど、元々見えている地面の境界がわからなかったので枠で囲ってみた。まぁ、地面は変化ないので囲ってもしょうがないけど

新しいゲームへ

predator.gl.enchant.jsを改造して、また別の描画方法ができるようになった。これで新しいゲームを作る。以下がスクリーンショット。壁で囲まれてる部屋だが、壁を部分的にしか見ることができない

ゲーム作りました

光学迷彩を打ち破れ!というゲームを作りました。ジャンルはFPSだけど、ミニゲームです。光学迷彩の敵が10人潜んでいるので全員銃で撃ちましょうというゲームです。敵を撃つと死にはしませんが、視認できる状態になります。10人全員視認できる状態になればク…

丸影

gl.enchant.jsには影を描画する機能がなかったので、作ってみた

複数のスポットライト

gl.enchant.jsで複数のスポットライトをだしてみた

gl.enchant.jsでスポットライト

gl.enchant.jsでスポットライトをやってみた。もう少し作りこんで、ライトの種類増やしたりして、light.gl.enchant.jsという名前で公開してみようか

FPSアップ!

プログラムを弄ってたら20FPSのマシンで48FPSぐらいまで上がった。あとは配置するモデルを増やしたら40FPSぐらいまで下がったが、まぁ、ゲームにはなる。ループで敵キャラ配置してたら奇妙な集団ができあがった

FPSが低すぎる!

ゲーム作ってる途中で、なんかカクカクするなと思っていたらFPSが20前後しかでてなかった。Core i5のノートPCで30FPS。まぁ、遅い原因はわかってるので改良していく

SceneTexture.gl.enchant.jsが公開されたようだ

SceneTexture.gl.enchant.jsを作ったというエントリがあったので見てみた。Sprite3Dのテクスチャにenchant.jsのSceneを使えるとのこと。とても面白そうなのだが、結構重いようだ。プレゼン資料とかで立方体の1面に1ページ貼り付けてぐるぐる回すか、何かア…

作るか

準備はできた。さぁ作ろう

predator.gl.enchant.js

predator.gl.enchant.jsを作りました。これを使えばgl.enchant.jsでSprite3Dをプレデターにできます。背景に模様が無いと全く見えません。 まずはpredator.gl.enchant.jsを読み込みます。注意: gl.enchant.jsよりあとに読み込まないとエラーになります。 <script src="predator.gl.enchant.js" type="text/javascript"></script> 次…

gl.enchant.jsでプレデター

カスタムシェーダーで実現したプレデター。gl.enchant.jsをかなり弄ってます。

floor.gl.enchant.jsを使ってみた

floor.gl.enchant.jsを使ってみた。勿論シェーダーは自分で用意したやつで描画

gl.enchant.jsの0.3.5と0.3.6で微妙に違うらしい

gl.enchant.jsの0.3.5と0.3.6で微妙に構造が変わっていたようだ。前回は0.3.5でやっていて動いたのだが、プログラムとカスタムシェーダーを0.3.6に持ってたら動かなくなっていたので、頑張ってソースコードを読み、原因を突き止めた。いくつかのuniform変数…

カスタムシェーダーを試してみた

gl.enchant.jsでカスタムシェーダーを使おうとして、前回値が渡せないという事件が起こった。その後、TwitterでSprite3Dの_renderを書き換えればいいと教えてもらい試してみた。それが以下のコード。uniformsに渡したいキーと値のペアを入れればOK。そして試…

gl.enchant.jsでシェーダーに値を渡せてない...

http://jsdo.it/daishi.hmr/gZJzを改造してLambert Shaderをやってみた。色はシェーダーに直接書いてうまくいった。 次にJavaScriptから色を渡すように変更。しかし、ShaderオブジェクトのsetUniformsにuColorを渡してみたけど、なんか渡ってないらしい。Web…

テクスチャマッピングできた

何かできないと思ったら幅と高さが2の乗数じゃなかったからだけだった。クロスドメイン制約じゃなかった

シェーダーをいじってみた

gl.enchant.jsのシェーダーをいじってみた。まだよくわかってないのでgl.enchant.jsでかる〜いノリでトゥーンシェーディングをやってみるのプログラムをダウンロードしてきて改造してみた。色を変更したので色が変わった。もっといろいろ弄っていきたい