最新WebGL通信 〜いまキャッチアップしたいWebGL2・WebGPU・WebXRとは〜 - ICS MEDIA
2011年に仕様が正式リリースされて以来、WebGLは多くのブラウザベンダー、コンテンツ開発コミュニティの手によって普及してきました。本記事では、2019年1月現在のWebGLの現状と周辺技術、そして未来について紹介します。 環境が完全に普及したWebGL 1.0 WebGLの最初のバージョンであるWebGL 1.0は、現在ではデスクトップ、モバイルともにすべての主要なブラウザで対応しています。対応環境という観点ではもはや案件での採用も問題ない状況といえるでしょう。実際のユーザーのWebGLサポート環境を集計する「WebGL Stats」によると、デスクトップ、スマートフォンともに98%もの環境で動作していることがわかります。 ▲WebGL 1.0を利用可能なブラウザについて。「Can I use…」より ▲WebGL 1.0のサポート環境について。「WebGL Stats」より 国内でも
Three.jsのコードは間違い！ WebGLが使える環境かどうかのホントの判定方法 Android対応版 - Qiita
Three.jsのコードは間違い！ WebGLが使える環境かどうかのホントの判定方法 Android対応版JavaScriptWebGLthree.js 「Three.js」はWebGLを使ったリッチな3D表現が使用できる人気のライブラリ。ところが、Three.js公式サイトで紹介しているWebGL有効判定はAndroid 4系のWebView向けのWebGL有効判定が不十分なので、WebGLコンテンツを表示させようとすると真っ黒になるという最悪の事態が発生します(2016/3/2現在 ver74)。Android 4.03からアップデートした4.4の一部でも同様の現象を確認しました。2016/3/2現在、Android ４系のユーザーは62%(参考：「Android Developers」)もいますので、スマートフォン向けWebGLコンテンツを作るならば決して無視できないバグです。 この
意地でもCreateJSでWebGLを使ってみよう―CreateJS勉強会/川勝発表資料 - ICS MEDIA
CreateJS勉強会 (第6回)でのライトニングトーク「意地でもCreateJSでWebGLを使ってみよう」（発表者：川勝）の発表内容を記事としてまとめました。CreateJSのWebGL機能は高いパフォーマンスが得られるものの、表現の制約があります。本記事ではCreateJSのWebGL機能を拡張することで、その制約を超えて望みの表現を実現する方法を紹介します。 CreateJSではWebGLレンダリングに対応 CreateJSの中で、描画機能を提供しているEaselJSはWebGLでのレンダリングに対応しています。WebGLではレンダリングにGPUを使用できるため、高速に描画が可能です。CreateJSではWebGLを使用すると、従来のContext2D形式に比べて環境によっては最大51倍もの高速化が見込めます（参照「WebGL Support in EaselJS - Create
第5回 HTML5の広がりとこれから
みなさん、こんにちは。hifive開発チームの下田です。2013年11月、アメリカのスミソニアン博物館は、所蔵品の3Dデータの公開を始めました。3Dデータは無償でダウンロードでき、3Dプリンターで印刷すれば文字通り“手にする”ことができます。また、ブラウザー上で自由に拡大・回転させながら鑑賞することも可能です（図1）。実は、このブラウザー上での表示には、HTML5の関連技術である「WebGL」が使われています。 従来、こうした高度なリアルタイム3DレンダリングをWebブラウザー上で行うことは難しく、（1）事前に動画にしておいたり、様々な角度から写真を撮って切り替えたりすることで疑似的に3D表現する、（2）3D表示のためのプラグインソフトを別途導入する――などの必要がありました。 しかし、WebGLという標準化された技術の登場によって、リアルタイム3D描画がブラウザーの標準機能になりました。
WebGLのドローコール最適化手法―CreateJS勉強会/池田発表資料(後編) ― ICS LAB
本記事は2015年2月10日（火）に開催されたCreateJS勉強会 (第5回) の発表資料「CreateJSクリエイトジェイエスで制作するスペシャルコンテンツ」の後編となります。前編(CanvasとWebGLの比較)に続けて本記事ではWebGLウェブジーエルの最適化手法を紹介します。 WebGLのドローコールの最適化について 前編ではHTML5 CanvasとWebGLの使い分けについて紹介しましたが、ここからはWebGLの最適化手法の1つを紹介します。よく知られているテクニックですが、WebGLでは描画命令のドローコールを少なくすることが有効だと言われています。ドローコールが少なくなることで滑らかなモーション = 60fps(遅延なきRequestAnimationFrameの達成）を実現し、スマートフォンでの実行時の消費電力を抑えられます。 下図は複数の要素を画面に表示するときのWe
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
WebRTCにやってくる「次の波」とは？─WebRTC Conference Japan基調講演
WebRTCにやってくる「次の波」とは？─WebRTC Conference Japan基調講演 白石 俊平（HTML5 Experts.jp編集長） 2月5日、6日にかけて「WebRTC」をテーマとした、日本初のカンファレンスであるWebRTC Conference Japanで開催されました。 本記事では、その中の基調講演の1つである、「The WebRTC Continuum」の内容について紹介します。プレゼンターはOracleのダグラス・タイト氏です。 ▲Oracleの通信マーケティング担当ディレクターであり、通信業界のビジネスと技術のエキスパート Douglas Tait（ダグラス・タイト）氏 WebRTCの第一の波は終わった。次の波に備えよう WebRTCが本格的に議論され始めたのは、ここ3年ほどのことです。Oracleも、WebRTCが議論され始めた当初から、通信分野の大手企
WebGLで最小限のコードで三角形を描く - Qiita
WebGLのはじめの一歩をさがしていたところ、こんなページ(https://sites.google.com/site/hackthewebgl/learning-webglhon-yaku/the-lessons/lesson-1 )を見つけまして、かなりコンパクトでよいとは思ったものの、まだ外部の行列演算ライブラリを使ってパースペクティブ変換を行うなど「最初の一歩」としてはムダなコードが多いので、不要なところを削ってみました。ファイル一つで実行可能です。 参考になれば幸いです。 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>WebGL triangle</title> <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3
続：WebGLでベジェ曲線を描いてみた | SONICMOOV LAB
12月になり、各所でアドベントカレンダーが始まっていますね。ソニックムーブのスタッフブログも25日まで毎日更新となります。 ソニックムーブ Advent Calendar 2014 開催です！ 初日を担当します、フロントエンジニアのらくさんです。元々3日目を担当する予定だったので初日らしい内容というわけでもなく、WebGLでベジェ曲線を描いてみた の続きになります。前回、2次ベジェ曲線の断片ひとつをシェーダで描画することはできました。今回は、複数の2次ベジェ曲線で構成されるパスの内部を塗りつぶします。 ステンシルバッファを使って凹型ポリゴンを塗りつぶす 本題に入る前に、ステンシルバッファを使って凹型ポリゴンを塗りつぶす方法を紹介します。次節では、これを2次ベジェ曲線のパスを塗りつぶすのに応用します。 上図左の凹型ポリゴンABCDEを塗りつぶす場合を考えます。まず、このポリゴン上の頂点のうち
Pex
PEX is a set of JavaScript libraries for computational thinking in Plask/Node.js and WebGL in the browser. Installation Pex is using node.js and npm npm install pex -g pex init demo-project cd demo-project npm install npm run watch open index.html Basic Example var sys = require('pex-sys'); var glu = require('pex-glu'); var materials = require('pex-materials'); var gen = require('pex-gen'); var Co
WebGL版Away3D入門―第5回 モデルデータの読み込み – ICS LAB
Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ（HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 そこで、初級者にもやさしいAway3D TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。 この記事について AwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three
WebGL Fundamentals
WebGL from the ground up. No magic. These are a set of articles that teach WebGL from basic principles. They are NOT old rehashed out of date OpenGL articles like many others on the net. They are entirely new, discarding the old out of date ideas and bringing you to a full understanding of what WebGL really is and how it really works. If you are interested in WebGL2 please see webgl2fundamentals.o
WebGL 入門 その1
最近 WebGL の勉強を始めまして、doxas さんが主催している WebGL 勉強会に参加している。 WebGL、かなりややこしい感じなので、受講した日はその日の情報を咀嚼しようと思った。 （有料の講座ですが、こういうの書くのは講師の方に許可得てます。） 今日は WebGL の基本的な部分の話だった。 基本の部分で既に無事死亡している。 WebGL とは GPU に直接アクセスできるブラウザに組み込まれた API で、OpenGL というネイティブで動作するグラフィック API を、ブラウザから呼び出すパイプ的な存在。 直接 GPU を利用できるので、すっごい高速。ぬるぬるしてるのはそういうことなんですね。 ただ、ブラウザに組み込まれた API ということは、つまりブラウザ側の実装に依存しているというわけで、ブラウザ間の差異や、そもそも OS レベルで無効化されてることもあるそう。 ま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
360度のパノラマビデオを再生できる動画プレイヤー「Valiant360」:phpspot開発日誌
jsfiddleライクにWebGLの動作テストが可能なOSS・「WebGL playground」