[WebGL] 浮動小数点テクスチャの扱いでハマった件 - Qiita
必要な拡張機能それで合ってますか? 最近、WebGLで遅延シェーディングしたりすると、モバイルでG-Bufferが描かれないなんてことがあった。 いや、でもOES_texture_floatは確かに正常にgetExtensionできる。 CPUで書き込み、GPUで読み出すというケース あくまで、GPU側ではRenderTargetとして使わず、tetxture2Dで読み出すと言う場合には確かにOES_texture_floatのみで問題ない。 ただし、フィルタにLINEARをかけるのであれば、OES_texture_float_linearが必要だ。 half floatテクスチャを用いたい場合は、OES_texture_half_float,OES_texture_half_float_linearをそれぞれ用いれば良い。 ここまでは常識的な範囲だろう。 GPU側で書き込みが必要なケース
![[WebGL] 浮動小数点テクスチャの扱いでハマった件 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9b5dcafc370f0dd76ce0440c36b5c9fe4ea4a2c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV2ViR0wlNUQlMjAlRTYlQjUlQUUlRTUlOEIlOTUlRTUlQjAlOEYlRTYlOTUlQjAlRTclODIlQjklRTMlODMlODYlRTMlODIlQUYlRTMlODIlQjklRTMlODMlODElRTMlODMlQTMlRTMlODElQUUlRTYlODklQjElRTMlODElODQlRTMlODElQTclRTMlODMlOEYlRTMlODMlOUUlRTMlODElQTMlRTMlODElOUYlRTQlQkIlQjYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTBhNzA2OWE1ZjkzNDVjZDI5MmRlY2I3MmQ3ZDE1NjRj%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBreWFzYmFsXzE5OTQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWYxM2I1ZTUzYWIyMjY3YmI1YjRmODI3ZWZlNWUyODk0%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D9c913691d2215bf51a91854d11daa95d)
「VR ZONE Project i Can」を仕掛けたコヤ所長・タミヤ室長の狙いとは何か？ - VR Inside
「バーチャルハロウィーン 2024」開催決定！メタバースで楽しむ新感覚ハロウィーン！ バーチャルハロウィーン2024clusterメタバースメタバースイベント 2024/10/25 18:00 最新のVR/MRゴーグルMeta Quest 3Sが販売開始！Quest 3よりもお手頃価格！ MRVRVRゴーグルMetaQuest 3SQuest 3 2024/10/18 18:00 TOKYO DIGICONXプレイベント開催！公式アンバサダーにせきぐちあいみさんが就任！ ARMRVRTOKYO DIGICONXせきぐちあいみG-STAR Gaming 2024/10/11 18:00 SHIBUYA109 LANDがThe Sandboxで未来型Y3Kファッションイベント開催！ The SandboxSHIBUYA109SHIBUYA FUTURAMAメタバースNFT 2024/10/06
GPU本来の性能を引き出すWebGL頂点データ作成法 - Qiita
この記事はWebGL Advent Calendar 2015の９日目の記事です。 ご注意 本記事は2015年当時に書いた記事なのですが、GPUがGeForce 8x00シリーズ以降、SIMDからSIMTという並列実行形式に切り替わった頃から状況が大きく変わりました。 以前は本記事でも紹介するインターリーブ形式の頂点データの方が高速だったのですが、現在のGPUでは多くの環境で非インターリーブの方が高速とされています。 AMD GPUにおいても、GCNアーキテクチャ（PS4以降の世代）から（それまでのVLIWから）SIMTに切り替わり、非インターリーブを推奨されているようです。 WebGLは基本的にネイティブ3D APIへのマッピングに過ぎないため、この傾向はおそらくWebGLでも同様と考えられます。 とはいえ、インターリーブ(AoS)や非インターリーブ(SoA)はCGをやる上でいずれ避けて
Introducing Tokyo WebGL Meetup.
こんにちは、Gaji-Labo 雑用担当の @neotag です。 この記事は Gaji-Labo Advent Calendar 2015 3日目の記事です。 今回は僕が参加している Tokyo WebGL Meetup というコミュニティのご紹介をしようと思います。 Tokyo WebGL Meetup はその名の通り東京ベースの WebGL 関連のコミュニティです。 ピクセルグリッドの @yomotsu さんを中心に、面白法人カヤックの @edo_m18 さん、ゲームエンジニアの @mattari_panda さん、wgld.org の @h_doxas さん 、 @neotag で主催しています。 ※僕はもっぱらイベントの裏方を担当しています。 身内で勉強会をやるだけでなく100人前後のイベントを開いたりしています。 最近は WebGL とセットで WebVR 熱も加熱していたりし
安藤日記 [&] WebGL Performance Tuning
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ ( via. Behind the magic of AKQA Winterlands ) #WebGL Performance Tuning WebGLコンテンツ／プログラムの速度をコツコツと速くするための、 パフォーマンスチューニング観点をまとめました。 まずはプロファイリングが重要。 闇雲にチューニングしても、あまり速くならない場合もあります。 また、最初の設計や、ハードウェア性能を知った上でのデータ量の見積もりも重要です。 ■WebGLプロファイリングのコツ ●グラフィックスパ
WebGLのドローコール最適化手法―CreateJS勉強会/池田発表資料(後編) ― ICS LAB
本記事は2015年2月10日（火）に開催されたCreateJS勉強会 (第5回) の発表資料「CreateJSクリエイトジェイエスで制作するスペシャルコンテンツ」の後編となります。前編(CanvasとWebGLの比較)に続けて本記事ではWebGLウェブジーエルの最適化手法を紹介します。 WebGLのドローコールの最適化について 前編ではHTML5 CanvasとWebGLの使い分けについて紹介しましたが、ここからはWebGLの最適化手法の1つを紹介します。よく知られているテクニックですが、WebGLでは描画命令のドローコールを少なくすることが有効だと言われています。ドローコールが少なくなることで滑らかなモーション = 60fps(遅延なきRequestAnimationFrameの達成）を実現し、スマートフォンでの実行時の消費電力を抑えられます。 下図は複数の要素を画面に表示するときのWe
WebGL 入門 その1
最近 WebGL の勉強を始めまして、doxas さんが主催している WebGL 勉強会に参加している。 WebGL、かなりややこしい感じなので、受講した日はその日の情報を咀嚼しようと思った。 （有料の講座ですが、こういうの書くのは講師の方に許可得てます。） 今日は WebGL の基本的な部分の話だった。 基本の部分で既に無事死亡している。 WebGL とは GPU に直接アクセスできるブラウザに組み込まれた API で、OpenGL というネイティブで動作するグラフィック API を、ブラウザから呼び出すパイプ的な存在。 直接 GPU を利用できるので、すっごい高速。ぬるぬるしてるのはそういうことなんですね。 ただ、ブラウザに組み込まれた API ということは、つまりブラウザ側の実装に依存しているというわけで、ブラウザ間の差異や、そもそも OS レベルで無効化されてることもあるそう。 ま
WebGLを極めるならJSライブラリを使わず書こう！モバイルでも動くHTML5の3次元スライドショーを作ってみた - ICS MEDIA
WebGLを極めるならJSライブラリを使わず書こう！モバイルでも動くHTML5の3次元スライドショーを作ってみた 2014年9月にリリースされたiOS 8においてWebGLが動作するようになったことで、スマートフォン環境での3D表現に可能性を感じ、興味を持った方も多いと思います。そこで今回、写真を読み込んで3D空間上に配置し、パーティクルに分解して次の画像に切り替わるスライドーショーのデモをJSライブラリ（Three.jsなど）を使わずにイチからHTML5とWebGLで作ってみました。WebGLが動作する端末ならモバイルでもなめらかに動作するので、是非試してみてください。マウスやタッチの操作でビューを回転させることができます。 デモを再生する（別ウインドウが開きます） ソースコード (JavaScript) 制作環境について 今回のデモを作成するにあたり、WebGLのAPIを直接呼び出す形
Google I/O の WebGL セッションが素晴らしいのでハイライトを紹介してみる - WebOS Goodies
今週はみんな Google I/O に気を取られているだろうから、ブログの更新はサボろうかな…と思っていたのですが、なんとなく動画を見てみた WebGL セッションの内容があまりに素晴らしかったので、ハイライトをご紹介することにしました。 WebGL を活用するためのテクニックやパフォーマンス Tips などが解説されていて、 WebGL に関わっている方は必見です。また、けっこう見栄えの良いデモがいろいろ出てくるので、「WebGL ってなに？」という方でも楽しく見れると思います。 とはいえ、解説されている内容をきちんと理解するには WebGL の基礎知識が必須です。もしセッションを見て興味を持たれたら、こちらの記事もぜひご参照くださいませ。 前半は処理を GPU へ移行してパフォーマンス改善する例 最初にまず WebGL の基本概念を説明。その後、円や立方体などのオブジェクトをアニメーシ
Fur
Fur - WebGL(html5) Move your mouse. An attempt at doing fur rendering. It uses only the 'shell' technique. I followed this article plus added some twists of my own. It should probably be combined with the 'fins' technique for a better result at some viewing angles. Have quite a lot of 'shells', so might be slow on your hipster 'iBook', or whatever. ;) Done using three.js. Note. You need a modern b
wgld.org | WebGL: 頂点テクスチャフェッチ(VTF) |
頂点シェーダでテクスチャの参照 前回は浮動小数点数テクスチャを、WebGL の拡張機能によって利用可能とする方法を解説しました。 仕組みとしては利用できたとしても、ハードウェアの性能によっては開発側が意図した精度が得られるとは限らないこともあり、今後に期待の掛かる楽しみな機能でした。 さて、今回は拡張機能とは少し違いますが、前回解説した浮動小数点数テクスチャと組み合わせることによって、とてつもない効果を生み出すかもしれない頂点テクスチャフェッチ(vertex texture fetch)をやってみたいと思います。 頂点テクスチャフェッチは、その英語表記の頭文字を取って VTF などと呼ばれることもあります。近年のコンシューマゲームなどでも割と活躍している技術の一つで、その応用範囲はかなり広いと言っていいと思います。 頂点テクスチャフェッチとは、簡潔に言うなら[ 頂点シェーダ内でテクスチャを
Bumpy Metaballs
Bumpy Metaballs | Click and drag to rotate, mouse wheel to zoom. Double-click to go fullscreen.Go fullscreen Isosurface created with Marching Cubes, and bump added with normal mapping. The metaballs don't have generated UV coordinates, and tangents can't be calculated with the usual method because it relies on texture coordinates. Following the triplanar mapping explained in this GPU Gems 3 articl
Simulations on GPU for Web. Contents
Introduction Super-computer in your PC. Fractal generation on GPU. WebGL 2 and experimental Compute shaders. TFjs notes WebGPU Compute shaders in progress Get started with GPU Compute on the Web by Francois Beaufort. WebGPU samples out of date :) WebGL2 Compute shaders. obsolete Matrix multiplication Tuning GEMM for Intel GPU GEMM tests on RTX 2070 WebGL 2 Flat wave and Big wave demos Monte-
WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フラグメントシェーダの実装チュートリアルや小さなデモが多数公開されているブログ xdPixel - WebGL 総本山