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