WebGL

WebGL

WebGLが使用できるかのチェック

WebGLのどのバージョンが使用できるかをチェックするHTMLを書いてみました。 WebGL 1.0のチェック WebGL 2.0のチェック 最近のブラウザであればcanvasタグには対応しているでしょう。canvasタグはWebGLなどが...
WebGL

立方体にテクスチャを貼る

上のものにテクスチャを立方体に貼ってみました。 私が作ったロゴをテクスチャとして使いました。 これが面ごとに貼られているのがわかります。背景がグレーなのは見やすさのためです。テクスチャが貼れるようになるといろいろなことができるようになります...
WebGL

立方体を回転させるアニメーション

四角形は平面上にある図形なので、板状のものが表示されました。今回は立方体を表示しています。そのため立体感が出ています。 6面ごとに色を別に付けてあり、それが回転しています。 深度テストまたはZテストと呼ばれる処理を有効にしました。これは深度...
WebGL

四角形を回転させるアニメーション

上の記事でグラデーションのかかった四角形を描きました。WebGLで表示しているので3D空間に板状の四角形を配置してそれを表示しているのですが、表示しているものが板状で3D感がありませんでした。 今回はそれを改善するために回転し、しかもアニメ...
WebGL

四角形を描画する

グラデーションのかかった四角形を描く 頂点に色の情報を持たせることでグラデーションのかかった四角形を描画しました。三角形を構成する頂点の間に存在するピクセルでは補完をした値が渡ってくるために中間色が現れます。3つの頂点の色を同じにすれば均一...
WebGL

WebGLをWordPressに埋め込む

以前のやり方 でWebGLを記事に埋め込んでみました。このときはテキストエディタでソースコードをそのまま書いていました。WordPressは文章を書くためのものなので、ソースをWordPress上で書くのは非常に不向きでした。書いたとおりに...
WebGL

WebGLを試す

WebGLというのはブラウザ上で3DCGを表示させるための仕様です。 JavaScriptを使ってOpenGL ESを使えるようにすると考えて良いようです。 使うにはcanvas要素を取得して、そこからOpenGL ES 2.0のレンダリン...