hatenaこの広告は、90日以上更新していないブログに表示しています。WebGL駅伝参加者の方々、ありがとうございました。めでたく(?)最後のランナーまで辿り着きましたので、ここからは一人で走ってみたいと思います。(気力の続く限り...)もし僕の代わりに何日か書いてもいいよという人がいましたらコメントで教えてください。これまでの方々の記事へのリンクを貼っておきます。g:javascriptなかなかタフな内容が続いてますね。今日からしばらくはWebGLとか3Dプログラミングをやったことがない人向けに連載します。内容は初日の内容をゆるく踏まえています。3日ぐらいで一区切りしてまた別の内容をやると思います。今日はまず簡単な例として、256*256のcanvasいっぱいに赤い四角形を表示するだけのサンプルを作ってみました。2がこんな感じですね。WebGLで勉強したクチですが、あれはまったくの初心者がやるには冗長な処理が多すぎるような気がしてます。あとWebGLに関してはネット上にデモプログラムはいっぱいあるんですが、習うためのリソースがとても少ないので、自分なりの解説にも意味があるかなと思っています。それでは見ていきます。canvasの準備サンプルプログラムでは、一番最初にこういうふうにしてWebGLコンテクストを作っています。height);がこれから描く内容のサイズを指定しています。canv.widthとcanv.heightはcanvas要素のサイズです。height=200>と書くと元の画像が適切に拡縮されて表示されますが、それと同じように、WebGLの内容のサイズとcanvasのサイズは別々でも構いません。言いたいところですが、Firefoxはまだ色々と問題があるので今回はどちらも256にしています。(あとFirefoxでcanvasが強制的にオフになってる場合はgetContext('experimental-webgl')でエラーを出すみたいなので、本当ならちゃんとエラー処理をしたほうがいいかもしれません)シェーダープログラムの準備シェーダープログラムを作ります。fs);initProgramはいつも同じなので一回書いたらコピペで十分です。今回はこういうシェーダーを使います。0.0)というのがあります。これについて少し説明します。GLSLにおいて、vec4は4つのfloatからなるベクトルのことです。float)vec4(vec4)などのようにかなり柔軟にオーバーロードされています。float)ですね)gl_PositionはWebGLの組み込み変数で、頂点シェーダーではこれを指定しなければいけません。(指定しない場合の動作は未定義)3次元空間内の頂点の座標なのにvec4とはどういうことでしょうか。z/w)が最終的な頂点の座標になります。この意味はまた今度考えてみたいと思います。頂点の準備このあたりは初日に解説しました。attributeを使えるようにしています。gl.enableVertexAttribArray(aPositionLocation);今回は単なる四角形なので座標は4つです。gl.STATIC_DRAW);この頂点座標の並べ方には意味があります。strip"という並べ方で、↓のaの図形をイメージしてくれればいいと思います。fan"でcが"triangles"です)http://www.opengl.org/documentation/specs/version1.1/glspec1.1/node17.html描画ここも前に解説しました。さっき作った頂点バッファーをattributeに割り当ててから描画しています。4);vertexAttribPointerの第二引数はattribute変数の次数(1ならfloat、2ならvec2など)でした。第三引数以降は覚えないでもいいと思います。drawArraysの第一引数は頂点の並べ方、第三引数は頂点をいくつ描くか、という意味です。第二引数は何番目の頂点から始めるかという意味です。まとめ座標変換という面倒なところを避けてWebGLプログラムを書いてみました。JSのコードとしては50行ぐらいです。座標変換しなかったことで、GLSLのgl_Positionがどういうものなのかということがイメージしやすくなると思ってこういうサンプルにしました。gl_Positionが(-1,-1,z,1)である頂点はcanvasの一番左下に相当します。(1,1,z,1)は一番右上です。zは奥行きになります。zを色々変えてみると、zが-1から1の範囲にあるときは赤い四角形が表示されますが、それ以外の場合は何も表示されません。xyzそれぞれ-1から1までで表される立方体の空間の中にあるものは描画され、その枠の外にあるものは描画されない、ということです。この枠外をばっさり切り落とすことをクリッピングといいます。座標変換カメラはz軸の延長線上にあり、x軸の正の方向が右、y軸の正の方向が上です。1.0);の最後を弄って、wを1より大きな数字にすると、正方形が小さくなっていきます。AirのCPU温度を取得するGrowthForecast.plで自分ロギングしてみたニョーン月別アーカイブはてなブログをはじめよう!edvakfさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。