WebGL Advent Calendar 2015 7日目の記事です。 2015年10月、UnityはWeb Playerを非推奨とすることを発表しました。Flashについても終わりが見え始めています。また、最近はiOSやAndroidを搭載したモバイル端末の利用率が増加していますが、これらはUnity Web PlayerもFlashも対応していません。このため、以前はWebGLは軽量な3Dコンテンツ程度にしか使用されていませんでしたが、これまでUnity Web PlayerやFlash Stage3Dが担当していたような本格的な3Dのブラウザゲーム(もしくはインタラクティブコンテンツ)も、そのほとんどがWebGLに移行していくと予想されます。 現代のPC/コンソール向けゲームでは、HDRレンダリングやリニアブレンディングが当然のように使用されています。しかしながら、WebGLで同じ
![[WebGL] HDRレンダリングの様々な実現方法の比較 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4c09e3b1f9e54db4624fc0497a6d96b92450025d/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%253Fixlib%253Drb-4.1.1%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzg1NzglMkZwcm9maWxlLWltYWdlcyUyRjE0ODA4NzU2MDg_aXhsaWI9cmItNC4xLjEmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPTE2ZDFlYzAyM2U3NDhhYjg0YTRkZDVlNmUyMDRmMWNi%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dd2a0189555372bb38d34fe6f6570367c%3Fixlib%3Drb-4.1.1%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTk2MCZoPTMyNCZ0eHQ9JTVCV2ViR0wlNUQlMjBIRFIlRTMlODMlQUMlRTMlODMlQjMlRTMlODMlODAlRTMlODMlQUElRTMlODMlQjMlRTMlODIlQjAlRTMlODElQUUlRTYlQTclOTglRTMlODAlODUlRTMlODElQUElRTUlQUUlOUYlRTclOEYlQkUlRTYlOTYlQjklRTYlQjMlOTUlRTMlODElQUUlRTYlQUYlOTQlRTglQkMlODMmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0wMmQ1ZGJjZWU4YTViMTdhMzY1N2FhZGI0NDAwOGQ1Mg%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTgzOCZoPTU4JnR4dD0lNDBZVlQmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1kYjY1NjNhY2MzMWI1YTNlYWFkOWI1OGNhMTQyNzliYg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dc552ad2d3eda0bc0182827e465615b49)
WebGL brings hardware-accelerated 3D graphics to the web. Many features of WebGL 2 are available today as WebGL extensions. In this article, we describe how to use the WEBGL_draw_buffers extension to create a scene with a large number of dynamic lights using a technique called deferred shading, which is popular among top-tier games. live demo • source code Today, most WebGL engines use forward sha
About WebGL Inspector is a tool inspired by gDEBugger and PIX with the goal of making the development of advanced WebGL applications easier. What Firebug and Developer Tools are to HTML/JS, WebGL Inspector is to WebGL. Note: this is alpha software - if you find bugs, let me know (or better yet, fork and fix them! :) Check out the readme on github for more information. Status There hasn't been an u
3Dグラフィックスをウェブに組み込むためのこれまでの取り組みが、インターネット上で最も便利かつ広く利用されているサイトの1つでついに実を結んだ。それは「Google Maps」だ。 GoogleはGoogle Mapsに、「WebGL」を使用して建物を3D表示するオプション「MapsGL」を組み込んだ。WebGLは、主要ブラウザ5つのうち4つが採用しているウェブ用の3Dグラフィックス技術だ。 この動きは、ブラウザベースのGoogle Mapsと、Googleが2004年に買収したKeyholeの技術に支えられた没入型ソフトウェア「Google Earth」の連携がさらに一歩進んだことを示している。Google Earthでは、仮想的に空を飛び回ったり、起伏のある地形上に画像を重ね合わせたり、建物を3D表示したりできる。 WebGLを使用することで、Google Mapsでも建物の3D表示（
現在の仕様だとふつうにやるのは無理そうだったので、vec4にエンコードして返して、javascript側でデコードするようにした。 シェーダ側。 vec4 nvjs_encode_float(float v) { vec4 c = vec4(0.0, 0.0, 0.0, 0.0); if (v < 0.0) { c[0] += 64.0; v = -v; } float f = 0.0; float e = ceil(log2(v)); float m = v * exp2(-e); if (e < 0.0) { e = -e; c[0] += 128.0; } c[0] += e; m *= 255.0; f = floor(m); c[1] = f; m -= f; m *= 255.0; f = floor(m); c[2] = f; m -= f; m *= 255.0; c[3]
WebGL OES_texture_float Extension Specificationという仕様があってこれを有効にするとGoogle Chromeだと使えた。 alert(gl.getExtension("OES_texture_float") ? "使える!!!" : "使えない!!"); Firefoxは対応していない。 ということで、WebGL GPGPUでfloat型のデータが入力可能になった。ハジマッタ…。 と思ったけど、出力を受け取るのに使っているgl.readPixelsはgl.FLOATに対応していない。 とりあえず、値に幅を持たせたいときは複数のUNSIGNED_BYTEで1つの数値を表すなどエンコードデコードすればいいと思います･。 http://www.udp.jp/misc/nvjs/gpgpu.html:title= のrun3にgl.FLOATの入力と
下のイラスト調のやつを爆速にしようと思って試した。（まだイラスト調のほうは実装してないです） WebGL GPGPU Sample Code WebGLで計算を行う方法は、 GPU側へ入力データをテクスチャとして転送 出力サイズの画面にフレームバッファオブジェクトを設定して画面サイズの四角を描画 このときのフラグメントシェーダーでテクスチャ(入力データ)を参照して計算を行う javascript側から結果を読む としています。 基本的にはOpenGLでやる場合と同じなので、以下のサイトがとても参考になります。 OpenGLによる実装方法 - Satoshi OHSHIMA's web site (今落ちてるみたいですが、そのうち復活することを願ってリンクを張っておきます) 「GPGPU シェーダ」とかでググれば、古のGPGPU手法に関するPDF等がいっぱいヒットすると思います。 オレオレ計
three.js - webgl cube reflection demo. skybox by Paul Debevec
yebo blog: WebGLに脆弱性
2011/05/12 WebGLに脆弱性 ブラウザ上で3Dグラフィックスを実行するための規格「WebGL」の仕様および実装上の脆弱性が見付かったとの事[context, us-cert]。この問題を利用すると、攻撃者はDoS、クロスドメインによる情報漏洩の危険があるそうだ( atsushieno氏がブログでContextの翻訳を載せており非常に詳しい)。問題の根本原因はWebGLの仕様に関わる問題だが、Khronous Groupは、DoS攻撃についてはOpenGLの拡張機能「GL_ARB_robustness」で対応できるとしており、クロスドメインの問題については悪用を防ぐ手法を今後検討するとしている。 ブラウザ上でのゲームに対する影響がありそうだが、WebGLがデフォルトで有効になっているFirefox 4およびChromeブラウザは無効にしておいた方が無難だろう[セキュリティホールm
WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0 Khronosは3月3日(米国時間)、WebGLの初のメジャーリリースとなるWebGL 1.0を公開した。 WebGL 1.0はOpenGL ES 2.0のAPIをJavaScriptから利用できるようにするAPI。プラグインをインストールすることなくブラウザのみでグラフィックアクセラレータの機能を活用した3Dレンダリングが可能になる。Apple、Google、Mozilla、Operaがすでに対応を実施している。 ブラウザで3Dレンダリングを実施する方法はいくつかある。これまではプラグインをインストールして利用するというのが一般的な方法だったが、よりオープンでかつブラウザ互換
みたいなことを先週、ぴろたんと話していてですね。実際どうなるのか試してみました。こうなります。 赤い点線の枠が WebGL を有効にした canvas で、中の青い三角形は WebGL で描画されています。後ろの写真と「GL Overlay Test」という文字は通常の HTML です。 一見ちゃんと描画されているように見えますが、左側の半透明の三角形が、加算合成したような描画結果になっており、少し変です。本来であればもう少し暗い色で描画されている筈です。これは Chrome/Firefox あるいは Mac/Windows を問わず同じなので、今のところWebGL の描画結果を半透明で合成すると確実におかしくなるので、やめたほうがいいと言えます。が、逆に言えば、完全に不透明か完全に透明な部分は正しく合成されるので、限定的には使えるとも言えます。（描画結果にアンチエイリアスがかかっている場
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
ブラウザ上の2DグラフィックとしてはCanvas APIが標準としての地位を築いたが、3DについてはMozillaのWebGLとGoogleのO3Dが競合していたが、Googleが折れたようだ。O3DはWebGL上のJavaScriptライブラリとして再構築されることが正式にアナウンスされた。 The future of O3D GoogleもWebGLには積極的に参画していたようであるし、O3DをJavaScriptで実装した場合に懸念されるパフォーマンスも最近のJavaScriptの高速化により大きな問題ではなくなったということかも知れない。 WebGLはOpenGLのJavaScriptマッピングであり非常にプリミティブな機能を提供するのに対して、O3Dはシーングラフなどを使ったより抽象度の高い3Dモデリング機能を提供する。OpenGLのプログラミング経験があればWebGLはすんなり
WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provide
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
