JavaScript でリアルタイム 3DCG を実現する WebGL の使い方 - WebOS Goodies
先日、ちょっとした思いつきで WebKit の Nightly Build をインストールし、 WebGL を試してみました。 WebGL というのは現在策定中の新しい規格で、 JavaScript を使って本格的な 3DCG を実現する API です。同じ目的を持つものとして Google の O3D がありますが、 WebGL は OpenGL ES を管理している Khronos グループを中心に Google, Mozilla, Opera, NVIDIA, AMD といった企業が参画しており、標準化という面ではリードしています。 まだ策定中の規格なので今後変化するかもしれませんが（WebGL 1.0 が正式リリースされました）、少なくとも現状の WebKit の実装については使い方がわかったので、本日はそれをご紹介します。 WebGL は Web 上の最も重要なグラフィックス A
Google Sites: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
HTML要素の上にWebGLの描画を合成 - 強火で進め
最速チュパカブラ研究会さんの「HTML要素の上にWebGLの描画を合成」についての記事。 HTML要素の上にWebGLの描画を合成したらどうなるの - 最速チュパカブラ研究会 http://d.hatena.ne.jp/gyuque/20110219 ページの裏に情報を持たせるUIってのは面白いですね。 重ねると加算合成みたいな描画結果になるのは気になりますね。 そういうモノなのか、もしそうだった場合に回避方法は有るのかなどそのうち時間んを取って調査してみたいですね。 (2011/02/23 追記) WebOS Goodiesさんが原因と解決方法の解説記事を書かれました。 WebGL の描画結果を HTML に正しく合成する方法 - WebOS Goodies http://webos-goodies.jp/archives/overlaying_webgl_on_html.html
【レポート】Safariのタマゴ「WebKit」でWebGLの3D描画を試す (1) WebKit - キーワードは「HTML5」 | パソコン | マイコミジャーナル
WebGLは、3Dグラフィックスを活用したWebアプリの実現を目指し制定された、OpenGL準拠のAPIセット。OpenGL関連であることからうかがえるように、各種グラフィックス技術の標準化を進める団体Khronosグループが仕様の策定を進めている。今回、Safariなど多数のWebブラウザに採用されているHTMLレンダリングエンジン「WebKit」が、WebGL実装を含む開発者向けテスト版の配布を開始したことを受け、どのように表示されるかなどエンドユーザからの目線でテストを実施した。 OpenGLベースの3Dグラフィックスがブラウザ上で、しかもプラグインなしに動作する「WebGL」 What's WebGL? WebGLの特徴を語るとき、キーワードとなるのが「HTML5」。次世代のHTML規格としてW3Cが策定を進めるHTML5は、標準の機能としてマルチメディア再生に対応、audio /
OpenGLなにそれうまいの?? という人のためのWebGLの始め方 - hagino3000's blog
追記：例題の頂点シェーダーで何をしているか説明を追加しました 追記：動作環境の所修正しました、IE9では動作しません。 皆さんはじめまして、荒川智則です。この記事はJavaScript Advent Calendarの21日目です。 この記事では、Google I/OやFirefox Developers Conferenceで華麗なデモがバリバリ出てくるにもかかわらず、実際に使っている人が異常なまでに少ないWebGLについて書きます。対象読者はWebGLに興味があるor手を出してみたけどクソ難しそうだし既に諦めそう、という人です。 WebGLの概要 WebGLはOpenGL ES 2.0のグラフィックAPIをCanvas要素上で使える様にした物です。OpenGL ESはOpenGLの組み込み機器向けのサブセットで、iPhoneやandroid端末にも搭載されています。OpenGL ESな
WebGL の描画結果を HTML に正しく合成する方法 - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先日、最速チュパカブラ研究会さんのこちらの記事で、 WebGL で描画した半透明オブジェクトを HTML に重ねるとおかしな結果になることが報告されていました（同時にクールなデモも公開されているので、必見です）。この問題、実は私も以前にハマったことがあって、一応解決策も見つけました。 Render To Texture による 2 パスレンダリングでも必要になる、
【レポート】話題の3D描画技術「WebGL」とは - WebKit上の試験実装でデモ | パソコン | マイコミジャーナル
WebKitでの試験実装を利用したデモ WebGLをご存知だろうか? 端的にいえば、Webブラウザ上で3D描画を可能にする技術だ。ただ従来までの3Dテクノロジーと違うのは、プラグインを必要としないこと、Webブラウザ上でネイティブ動作し、場合によってはハードウェアアクセラレーションにより高速動作が可能になるという特徴がある。ゲーム開発メーカーのWolfire Gamesによれば、近い将来にも3DゲームはWebブラウザへと稼働プラットフォームを移行する可能性があるという。 WebGL自体はまだ実装が開始されたばかりの仕組みであり、現状ではAppleが支援するオープンソースのレンダリングエンジンWebKitで試験的に実装が行われただけだ。だがそのデモを見れば、片鱗の部分だけでも可能性が体感できるだろう。 仕組みとしてはHTML5で導入されるCanvasタグを使って3D描画を実現している。Ope
東日本大震災震源3Dマップ[BETA] (WebGL)
東日本大震災震源3Dマップ[BETA] (WebGL) 操作方法： 左ドラッグで前後移動 右ドラッグ または Shift＋左ドラッグで上下移動 中ドラッグ または Ctrl＋左ドラッグで視線の回転 スペースキーで交差法表示 ESCキーでリセット 震源データ： tenki.jp Hi-net 表示する震源： M0 M1 M2 M3 M4 M5 M6 M7 以上 再生速度： 停止 または 1秒 1分 10分 1時間 6時間 24時間 を1秒で表示 地震波： 非表示 表示 表示期間： 10分 1時間 6時間 1日 3日 ずっと WebGLの利用方法 １．まず最初に、OpenGL2.0が利用できるGPUを用意します。 ２．WebGL対応のブラウザを用意します。 2a. Chromeを使うなら→ こちら 2b. Minefieldを使うなら→ こちらでDLして、 about:config にて we
Learning WebGLで学ぶWebGL入門
WebGL勉強会 第5回(http://atnd.org/events/11693)で発表をした時のスライドに少し、加筆したもの。WebGLをこれから勉強する方のとっかかりに成る様に意識して作成したので、発表向けというより授業向けに近い内容と成っています。
Chrome 10からWindows XPでのWebGLサポートを停止 - 強火で進め
Twitter上でWindows XPでWebGLが動かなく成った!!ってつぶやきをいくつか見つけましたが、調べてみたところ、Chrome 10からサポートされなく成ったみたいです。 正確にはChrome 10、Windows XP、Nvidia 7300 GTの組み合わせでGoogle Bodyが動作しない事が発端としてDev版をWindows XPにインストールした場合、デフォルトでWebGLがdisableになった様です。 まとめ Windows XPでChrome 10を動かした場合、ビデオカードによっては動作しない場合が有る。 最新のDev版をWindows XPにインストールした場合、デフォルトでWebGLがdisable。 あまりお勧め出来ませんがどうしてもXPでも有効にしたい場合はこちらの「強制的にハードウェアアクセラレーションを使用する」の項目を参照下さい。 Chrome
HTML要素の上にWebGLの描画を合成したらどうなるの - 最速チュパカブラ研究会
みたいなことを先週、ぴろたんと話していてですね。実際どうなるのか試してみました。こうなります。 赤い点線の枠が WebGL を有効にした canvas で、中の青い三角形は WebGL で描画されています。後ろの写真と「GL Overlay Test」という文字は通常の HTML です。 一見ちゃんと描画されているように見えますが、左側の半透明の三角形が、加算合成したような描画結果になっており、少し変です。本来であればもう少し暗い色で描画されている筈です。これは Chrome/Firefox あるいは Mac/Windows を問わず同じなので、今のところWebGL の描画結果を半透明で合成すると確実におかしくなるので、やめたほうがいいと言えます。が、逆に言えば、完全に不透明か完全に透明な部分は正しく合成されるので、限定的には使えるとも言えます。（描画結果にアンチエイリアスがかかっている場
Operaも遂にWebGL対応版(プレビュー)をリリース - 強火で進め
OperaはWebGL対応について全然情報が出てこなかったので正直、WebGLの対応はしないのかな？って思っていました。 しかし、数日前に突如OperaのWebGL対応についての話が出たのを見つけました。 Opera Core Concerns - WebGL and Hardware Acceleration http://my.opera.com/core/blog/2011/02/28/webgl-and-hardware-acceleration-2 Windows、Linux、Mac OSとOpenGL ESが搭載されている最近のスマートフォンやWeb対応のTVにて利用可能になるみたいです。 なお、実際にハードウェアアクセラレーションが効く為にはWebGL用のOpenGL 2.x互換性の有るグラフィックカード及び、ドライバが必要なそうです。 Windows版については既にプレビュ
WebGL勉強会 第5回で発表して来ました - 強火で進め
WebGL勉強会 第5回(http://atnd.org/events/11693)で発表してきました。 タイトルは「Learning WebGLで学ぶWebGL入門」です。Learning WebGLのLesson 1を解説しながらWebGLを勉強して行く内容と成っています。 WebGLをこれから勉強する方のとっかかりに成る様に意識して作成したので、発表向けというより授業向けに近い内容と成っています。これからWebGLを勉強する人の参考になりましたら幸いです。 Learning WebGLで学ぶWebGL入門View more presentations from nakamura001. (2011/02/18 追記) 補足、書きました。 「Learning WebGLで学ぶWebGL入門」の補足 - 強火で進め http://d.hatena.ne.jp/nakamura001/20
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
GDCで公開されたOperaで実行するWebGLデモ - 強火で進め
WebGLでCanvas APIを実現する「WebGL-2D」 - 強火で進め
WebGLでRPGを作った人が登場 - 強火で進め
Cubeを使ったパズル - 強火で進め
three.jsのサンプル「Large mesh test」が凄い - 強火で進め
three.jsでMMDのモデルを表示 - 強火で進め
