WebGL
パーティクルっぽいクラスを作って、色加算で遊びましょう ■index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SanoWebGLSample10.html</title> </head> <script type="text/javascript" src="webglut03.js"></script> <script> //-----------------------------------------------------------…</html>
■index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SanoWebGLSample09.html</title> </head> <script type="text/javascript" src="webglut03.js"></script> <script> //------------------------------------------------------------------------ // //---------…</html>
せっかくなので２Ｄ関係の関数を作り、まとめてみました ■index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SanoWebGLSample08.html</title> </head> <script type="text/javascript" src="webglut03.js"></script> <script> //------------------------------------------------------------…</html>
■index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SanoWebGLSample07.html</title> </head> <script type="text/javascript" src="webglut02.js"></script> <script id="shader-vs" type="x-shader/x-vertex"> //-----------------------------------------------…</html>
２Ｄで制御したいい場合、ＷｅｂＧＬそのままだと（-1,-1）-（1,1）というように2Ｄゲームには扱いにくい座標になっています。 これを(0,0)-(640,480)にできれば簡単に制御できます。 ■index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SanoWebGLSample06.html</title> </head> <script type="text/javascript" src="webglut01.js"></script>…</html>
■index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SanoWebGLSample05.html</title> </head> <script type="text/javascript" src="webglut01.js"></script> <script id="shader-vs" type="x-shader/x-vertex"> //-----------------------------------------------…</html>
ポリゴンが前回だせたので、頂点に色をつけてみようと思います。 ■index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SanoWebGLSample04.html</title> </head> <script type="text/javascript" src="webglut01.js"></script> <script id="shader-vs" type="x-shader/x-vertex"> //----------------…</html>
初期化もできたので、さっそくポリゴンを表示しましょう ■index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SanoWebGLSample03.html</title> </head> <script type="text/javascript" src="webglut01.js"></script> <script id="shader-vs" type="x-shader/x-vertex"> //--------------------…</html>
前回のプログラム（http://d.hatena.ne.jp/sanoh/20120326）をJavaScriptらしく、「index.html」「webglut00.js」に分解してみました。■index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SanoWebGLSample02.html</title> </head> <script type="text/javascript" src="webglut00.js"></script> <…</html>
WebGL自体、Chrome、FireFoxだけの対応なのですが、今後、サポートしていくブラウザが増えていくことを期待（IE10はWebGL対応してないので、残念）なにあともあれ、WebGLを初期化し、黒い画面を出してみましょう。 ■index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SanoWebGLSample01.html</title> </head> <script> </html>…
