WebGLに関するbokuwebのブックマーク (4)
-
WebGL2は基本的には3DグラフィックスのためのAPIですが、2Dグラフィックスにも応用することができます。WebGL2を使って2Dグラフィックスを描画する方法を学んでみましょう。 WebGL2の基礎について WebGL2は複雑なAPIを持っています。全てを説明していると非常に長くなります。WebGL2のAPIの使い方に関しては、本ブログの﹁WebGL2入門﹂の記事を読んでください。 2Dグラフィックスを描画する方法 WebGLは3DグラフィックスのためのAPIです。2Dグラフィックスを描画するには、ほんの少しだけ遠回りが必要になります。 2Dグラフィックスの描画は、三角形ふたつで四角形を作り、そこにテクスチャを貼ることで実現できます。 これだけです。以上!終わり! 描画の最適化 たったこれだけで終わるのも悪い気がするので、もうちょっと話を続けましょうか。 WebGL2はそのままでも高速
-
WebGLでブラウザゲーの未来がアツい!!スクウェア・エニックスから好評配信中のキャラクターコマンドRPG﹃乖離性ミリオンアーサー﹄︵以下、﹃乖離性﹄︶。 2016年10月より、本作のPCブラウザ版︵以下、PC版︶が、Yahoo! JAPANの運営するオンラインゲームサービス”Yahoo!ゲーム”で配信中だ。 すでに体験した人なら分かるように、スマホ版の魅力である3Dグラフィックを使用した派手な戦闘演出はPC版でも健在。そうしたブラウザベースでの動作にひと役買っているのが、WebGLという技術である。 今回は、PC版﹃乖離性﹄開発ディレクターの加島直弥氏、Mozilla Japanの清水智公氏、そしてUnity Technologies Japanの大前広樹氏に、WebGLについて話を伺った。 ※本インタビューはPC版配信前の9月末に実施されたものです。 WebGLの鍵を握るのはasm.j
-
-
Web AudioでYoutube、itunes上の曲を元に、WebGL︵GLSLシェーダー︶でリアルタイムビジュアライズHTML5WebGLGLSLWebAudioAPI WebGL Advent Calendar 3日目の記事です。初めて赤くなりました! ブラウザで、Youtube上の曲を元にしてGLSL(WebGL)でリアルタイムビジュアライズします。応用編としてitunesの曲や自分の声でもできるようになりました。︵無理矢理︶ Web Audio APIのアナライザーノードというのは使ったことがなかったんですが、mdnのデモを見ていて、結構感度が良かったのでゴニョゴニョやってみる。 ↓イメージ︵canvasとvideoの二枚重ね︶ 音のソースとしてYoutube︵実際にはマスターのオーディオ︶を使い、背景でも流しつつ、Web Audio APIで取得します。 その上にcanvasを
-
1