Archive For The “WebGL” Category

GLSLで書いたシェーダーをUnityのマテリアルにセット、WebGL出力してみます

By |

GLSLで書いたシェーダーをUnityのマテリアルにセット、WebGL出力してみます

Unityでシェーダーを書く機会は中々ありませんでしたが、今後のためにもGLSLでシェーダーを書いてみます。 GLSLの特徴はOpenGLに使えるという点です。ということは、スマートフォンゲームやWebGL(ブラウザ)に応用することもできます。また、言語的には、ほぼCに近い、ポインタのないC言語といった印象があります。(今回、細かな言語仕様の説明は割愛させていただきます。) まずはGLSL on ブラウザで書く まずは純粋にGLSLのフラグメントシェーダーだけを書いて試してみたいと思います。 これにはGLSL Sandboxというサイトを使います。このサイトでは、WebGL経由でシェーダーのGLSLコードをリアルタイムプレビュー、さらにjsdoitのようにギャラリーやフォークなどもできます。先にここで書く理由は、ちょっと寄り道してみたかったからです。w 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…

【デモあり】Unity5のWebGLエクスポートをしてみました

By |

【デモあり】Unity5のWebGLエクスポートをしてみました

GDC2015にて、Unity5の正式リリース発表がありました。 早速ダウンロードしてWebGLでエクスポートしてみました! プラグイン不要ってすごい。 デモはこちら URL : http://mankindinc.jp/games/carscenehtml5/ 動いた・・・! タップでCubeが出てくるようにしています。 ライトが非常に綺麗になりましたね。 あと、rigidbodyの処理が心なしか、上がってる感じがします・・・ WebGLということはiOSでも表示できるわけですよね。 iPhoneで実行してみると・・・ まだ対応してないようでした。

【3D】three.jsで400個のボックスを伸縮させるチュートリアル

By |

【3D】three.jsで400個のボックスを伸縮させるチュートリアル

iOS8にWebGLが搭載されたこともあり、three.jsにあらためて注目しています。 順を追ってコードのメモを書いていきます。まずはデモを御覧ください。 デモのURLはこちら URL : http://mankindinc.jp/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()」でフレームごとに呼ぶのがポイントですね。 処理が重たいなら、ここでフレーム調整するといいと思います。 メインループ内(1) → 全てのボックスに対して、forループで処理…

iOS8がWebGLに対応したので早速3Dモデルを動かしてみた【three.js x iOS8】

By |

iOS8がWebGLに対応したので早速3Dモデルを動かしてみた【three.js x iOS8】

iOS8から、ついに解禁となったWebGL(3Dの描画エンジンへJavaScriptからアクセスできる機能)。 そこで、早速以前作ったプログラム(three.js+WebGL)を動かしてみました。 機種はiPhone5(無印)です。iOS8の方はお試しあれ!(PCでも見れます) 結果・・・ 動いた!!! 元プログラムのURL : http://mankindinc.jp/programming/webgl/1.html   three.jsでロゴも動かしてみました。 three.jsのサンプルロゴも「Mankind,inc.」にして動かしてみました。 うむ。three.jsも動きますね。 更に、Unity5ではWebGLへの対応も決定しています。 夢が広がります。

Go Top