Unityでシェーダーを書く機会は中々ありませんでしたが、今後のためにもGLSLでシェーダーを書いてみます。 GLSLの特徴はOpenGLに使えるという点です。ということは、スマートフォンゲームやWebGL（ブラウザ）に応用することもできます。また、言語的には、ほぼCに近い、ポインタのないC言語といった印象があります。（今回、細かな言語仕様の説明は割愛させていただきます。） まずはGLSL on ブラウザで書く まずは純粋にGLSLのフラグメントシェーダーだけを書いて試してみたいと思います。 これにはGLSL Sandboxというサイトを使います。このサイトでは、WebGL経由でシェーダーのGLSLコードをリアルタイムプレビュー、さらにjsdoitのようにギャラリーやフォークなどもできます。先にここで書く理由は、ちょっと寄り道してみたかったからです。ｗ WebでもUnityでもどっちでも動くと良いですし。 ちなみに、GLSL Sandboxの開発にはthree.jsの@mrdoob氏など、著名開発者が名を連ねています。 凝ると際限がないと思いますが、そこそこ見栄えしてきたら次のステップへいきます。 デモはこちら : http://glslsandbox.com/e#29054.0 ソースは以下の通りです。 ポイントは（というほどではありませんが・・）時間経過を元にして三角関数を動かしているところです。 #ifdef GL_ES precision mediump float; #endif uniform float time; uniform vec2 resolution; void main( void ) { vec2 position = ( gl_FragCoord.xy / resolution.xy ) – 0.5 ; vec3 col = vec3(0.0,0.0,0.0); //15個円を描く for(int i = 0; i…
GDC2015にて、Unity5の正式リリース発表がありました。 早速ダウンロードしてWebGLでエクスポートしてみました！ プラグイン不要ってすごい。 デモはこちら URL : https://mankindinc.jp/wp01/games/carscenehtml5/ 動いた・・・！ タップでCubeが出てくるようにしています。 ライトが非常に綺麗になりましたね。 あと、rigidbodyの処理が心なしか、上がってる感じがします・・・ WebGLということはiOSでも表示できるわけですよね。 iPhoneで実行してみると・・・ まだ対応してないようでした。
iOS8にWebGLが搭載されたこともあり、three.jsにあらためて注目しています。 順を追ってコードのメモを書いていきます。まずはデモを御覧ください。 デモのURLはこちら URL : https://mankindinc.jp/wp01/programming/webgl/2.html ボックス生成 for(i=0;i<20;i++){ for(j=0;j<20;j++){ var geometry = new THREE.BoxGeometry(10,10,10); var material = new THREE.MeshNormalMaterial(); var cube = new THREE.Mesh(geometry , material); cube.castShadow = true; cube.position.set(i*10,0,j*10); scene.add(cube); } } iが縦軸、jが横軸になるように、2回ループを使って配置していきます。 座標を10ずつずらしているのは、ボックスのサイズが10だからです。 図示するとこんな感じです。 メインループの呼び方 (function mainLoop() { requestAnimationFrame(mainLoop); /* ここが毎フレーム呼ばれる */ renderer.render(scene, camera); })(); そうです「即時関数」です。即時関数で再帰的にメインループを呼びますので、ぐるぐるループして呼ばれます。 その際「requestAnimationFrame()」でフレームごとに呼ぶのがポイントですね。 処理が重たいなら、ここでフレーム調整するといいと思います。 メインループ内（１） → 全てのボックスに対して、forループで処理…
iOS8から、ついに解禁となったWebGL（3Dの描画エンジンへJavaScriptからアクセスできる機能）。 そこで、早速以前作ったプログラム（three.js＋WebGL）を動かしてみました。 機種はiPhone5（無印）です。iOS8の方はお試しあれ！(PCでも見れます) 結果・・・ 動いた！！！ 元プログラムのURL : https://mankindinc.jp/wp01/programming/webgl/1.html three.jsでロゴも動かしてみました。 three.jsのサンプルロゴも「Mankind,inc.」にして動かしてみました。 うむ。three.jsも動きますね。 更に、Unity5ではWebGLへの対応も決定しています。 夢が広がります。
前回のブログで、「enchant.jsでさくっとアルゴリズミックなゲームを作る時なんかに良さそうです。」と書いたCoffeeScriptですが、早速enchant.jsとの組み合わせで、代表的なアルゴリズムである「穴掘り法」（正確には穴掘り法に自分なりの解釈を加えたもの）を実装してみました。 分かったことですが、CoffeeScriptはやっぱりとってもコードが書きやすい。 ネスト（ループの入れ子）が多いところも書きやすい。 JavaScriptはカッコが多い言語なので、CoffeeScriptのようにカッコなしでかけるのは本当に気持ちがいいし、とても捗りますね。 やっぱり、こうしたものをコーディングするには丁度良さそうです。 デモはこちらです。URL : https://mankindinc.jp/wp01/programming/enchantjs/1.html 最初に考えたこと コーディングにかかる前に、迷路生成のアルゴリズムを実装する時にどのように組んでいったらいいか、ざっと考えてみました。 ・最初 ・・どれかひとつの座標をランダムで選ぶ（ただし、XYともに偶数偶数） ・・「基点の座標一覧」にそこを追加 ・・掘る ・掘る ・・ランダムに１方向選び、２マス先の座標が掘れるかたしかめる ・・掘れれば、「基点の座標一覧」にそこの座標を追加し ・・１マス先と２マス先を掘る ・掘れなかったら、それ以外の方向の２マス先の座標が掘れるかたしかめる ・・掘れれば、「基点の座標一覧」にそこの座標を追加し ・・１マス先と２マス先を掘る ・それでも掘れなかったら、それら以外の方向の２マス先の座標が掘れるかたしかめる ・・掘れれば、「基点の座標一覧」にそこの座標を追加し ・・・・「基点の座標一覧」から現在の座標を削除し、１マス先と２マス先を掘る ・それでも掘れなかったら ・・「基点の座標一覧」から現在の座標を削除し、 ・・もし「基点の座標一覧」にひとつでもあれば ・・・「基点の座標一覧」からどれかひとつをランダムで選ぶ ・・・その座標で掘る ・・「基点の座標」がもうなかったら ・・・終わり いよいよ実装へ digという関数はちょっと凝りました。結局、穴掘り法にちょっと変更を加えたものになりました。 numR = 39 numC = 39 posArr = [] pos = [] directions =[[2,0],[-2,0],[0,2],[0,-2]] # 地図生成————————— for row in [0…numR] pos[row] =…
CoffeeScriptだと、簡潔に（=短く）書けるからアルゴリズムや実装に集中できますね。 enchant.jsでさくっとアルゴリズミックなゲームを作る時なんかに良さそうです。 PythonやRubyの書き方のようなイメージになります。 基本 １、インデントが意味を持つかわりに、カッコが不要 ２、行末セミコロンが不要 ３、varでの宣言が不要（自動で宣言される→グローバル変数生成防止） for文 iを使えるfor文が.lengthとiを使ういつものやつになります。 # iを使えるfor文 arr = [“zero”, “one”, “two”] for val, i in arr console.log “#{i}: #{val}” # 0:one 1:one 2:two # foreach arr = [“one”,”two”,”three”,”four”] for num in arr console.log num #one two three four # 数字はこちら arr = [1,2,3,4,5,6,7] for i in [0..6] console.log arr[i] #1,2,3,4,5,6,7…