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
WebGL Advent Calendar 3日目の記事です。初めて赤くなりました！ ブラウザで、Youtube上の曲を元にしてGLSL(WebGL)でリアルタイムビジュアライズします。応用編としてitunesの曲や自分の声でもできるようになりました。（無理矢理） Web Audio APIのアナライザーノードというのは使ったことがなかったんですが、mdnのデモを見ていて、結構感度が良かったのでゴニョゴニョやってみる。 ↓イメージ（canvasとvideoの二枚重ね） 音のソースとしてYoutube（実際にはマスターのオーディオ）を使い、背景でも流しつつ、Web Audio APIで取得します。 その上にcanvasを置いて、WebGL経由でGLSLのシェーダーを置いていきます。 最後に音域データを料理して、シェーダーに反応させます。ビートを刻んでいる感じになりました。 ##何はともあれ、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
