raymarching for games - primitive: blog
demoscene の世界では近年 raymarching というレンダリング手法がよく用いられています。ポリゴンモデルは使わず、モデルデータは数式の図形としてシェーダコードの中で表現し、pixel shader で図形との距離を求めて可視化していく、というものです。 demoscene (4k/64k intro) の厳しい容量制限の中綺麗な絵を出すために生み出された手法ですが、従来のポリゴンベースの手法では難しい独特の絵を出すことができるという副次的効果があります。 raymarching の代表的な作品群 この手法は PS4 世代以降、小規模ゲーム開発チーム向けの有用なツールになるんじゃないかと考えていて、atomic では試しに背景にこの手法を用いています。以下はその過程や考察です。 まず、raymarching の基本については demoscene.jp の人たちが素晴らしい解説
端末性能を測るWebGLアプリ作ってみた - KAYAC engineers' blog
こんにちは。技術部平山です。 この記事では、雑にベンチマークプログラムを作ってみたことと、それに付随して、 ベンチマークプログラムを作りたくなるような事情 テストの設計と、その背後にあるハードウェア といった点について書きます。 なお、実行はこちらからWeb上で可能です(上のスクショを押しても飛べます)。 UnityのWebGLにすることで、余計な手間なく多くの機械で測れるようにしています。 ただし、WebAssemblyを使っている関係上、iOS9以前では動きません。ご容赦ください。 測ってくださった方は、 twitterで結果(スクショ)を頂けると大変うれしいです。 ゲーム機、ハイエンドPC、古いスマホ、などは特に歓迎です! なお、ソースコードもgithubにあります。 測定方法 「ALL」を押し、元の画面に戻ってくるまで(キャラクターの絵が出てくるまで)放っておきます。 途中でスリー
最新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」より 国内でも
webgl-waterのコースティクス解説
はじめに 最近バズっていたwebgl-waterのコースティクスをshadertoyで実装しました。せっかくなので簡単に解説したいと思います。 https://www.shadertoy.com/view/MttBRS https://www.shadertoy.com/view/MldfDn レイマーチングで絵が出せるぐらいの予備知識があると、ソースを理解しつつ読み進めることが出来ると思います。 レイマーチングについては@gam0022さんのスライドが詳細で分かりやすく解説されているのでおススメです。 シェーダだけで世界を創る！three.jsによるレイマーチング 解説に入る前に、見慣れない方もいると思うので webgl-water と コースティクス についての説明を先にします。 webgl-waterとは 2011年に登場した、ブラウザで動作する水面のリアルタイムシミュレーションです
次世代仕様のWebGPUとは？ 次期macOSでのOpenGL非推奨化はWebGLに影響をもたらすのか - ICS MEDIA
次世代仕様のWebGPUとは？ 次期macOSでのOpenGL非推奨化は WebGLに影響をもたらすのか ウェブの3Dグラフィックスを扱う新しい仕様として、WebGPUが提案されています。広く普及したWebGLがある中で、WebGPUとはどういった目的で生まれようとしているのでしょうか？ 本記事ではWebGLとWebGPUの違いと、近況を紹介します。 業界を震撼させたAppleのOpenGL非推奨化 今月6月上旬に開催されたWWDC 18で発表されたmacOS 10.14 MojaveとiOS 12のウェブページでは、OpenGL/OpenCLおよびOpenGL ESを非推奨化する旨が記載されています。macOS 10.14とiOS 12でOpenGL等は引き続き動作するものの、Metalへの置き換えを呼びかけています。 ▲What’s New in macOSにはOpenGLとOpenC
WebGLの基本
WebGLを基本から学ぶ授業. この記事はWebGLを基本から教える記事である。 他のサイトに載せてあるような昔のOpenGLが更新された記事ではなく、 時代遅れのアイデアを捨てて、 WebGLとは何か、WebGLがどうやって動くかについて、理解へと導く、完全に新たな記事である。 WebGL2に興味があればこれを参照して下さいwebgl2fundamentals.org 基本 基本 WebGLの仕組み WebGLのシェーダーとGLSL WebGL State Diagram 画像処理 WebGLにおける画像処理 WebGLにおける画像処理。続き 2Dでの移動、回転、拡大縮小、行列計算 二次元での移動 二次元での回転 二次元での拡大縮小 二次元での行列数学 3D 三次元の正投影 三次元透視投影 三次元のカメラ Lighting 三次元指向性光源 三次元点光源 Spot Lighting St
[WebGL] Instanced Stereo Renderingを実装してみる - Qiita
WebGLで、VRに関連する高速化技術を実装してみたという話です。 はじめに VRを行う場合、両目の映像をレンダリングする必要があります。このため、単純な実装ですと左右それぞれに対しドローコールを発行する必要がある為、非VRの場合の少なくとも2倍のドローコールが必要となります。WebGLの場合はオーバヘッドがもっと大きくなる為、事態は一層深刻になります。 1回のドローコールで両目の映像を一度に描画する手法として、以下のものが提案されています1: ジオメトリシェーダを利用する。 この方法はピクセルシェーダの書き換えが不要、CPU側コードの修正量が少ない等の点で優れています。しかし、頂点シェーダの微小な修正が必要、GPUによっては著しいオーバヘッドを生じる (660 GTXで3x以上のジオメトリスループット低下) などの欠点があります。 一番の問題は、ジオメトリシェーダをサポートしていないAP
![[WebGL] Instanced Stereo Renderingを実装してみる - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf01c812025cf676e66c96299a386767ca8f2517/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV2ViR0wlNUQlMjBJbnN0YW5jZWQlMjBTdGVyZW8lMjBSZW5kZXJpbmclRTMlODIlOTIlRTUlQUUlOUYlRTglQTMlODUlRTMlODElOTclRTMlODElQTYlRTMlODElQkYlRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTY5YjQxMTY4MWRkN2JjZmRkYjc4OTEwNTBjNGE3MGM3%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBZVlQmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTI0MGYwYTlmYjBmOWY3ZGZhM2I0ZmFhOWEzYWM3MDJk%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3D57d2da6be0b2a18968a2b117e16bdd0a)
three.js + キューブマップでお手軽IBL - Qiita
この記事は，WebGL Advent Calendar 2016 16日目の記事です。 今年も何もしてないなぁと思いながら生きていたのですが、WebGLで色々成果を挙げている友人に感化されて飛び入り参加しました。よろしくお願いします。 今回は環境マップでよく利用されているキューブマップを使って、WebGL上で擬似的なIBLを、拡張機能を利用する方法としない方法の2つ実装しました。 この記事では実装の中で得た知見を共有できればと思います。 今回作ったもの https://github.com/kaneta1992/cubemapIBL IBL(Image Based Lighting)とは IBLと略すこともある。実在する風景の写真や高精細な画像をライティングの色情報に使用して、シーンをレンダリングする方法。広いレンジの明るさ情報を記録できるHDRIを用いることで、自然な光と陰影を表現できる
条件分岐のためにstep関数を使う時の考え方をまとめてみた - Qiita
GLSLでは条件分岐をする際にif/else構文を使うと処理負荷が高いと言われています。 （その分だけ暖を取りやすくなるかもしれませんが・・・？） そこで、最初に考えつく代替案は三項演算子ではないでしょうか？ vec3 BLACK = vec3(0.0); vec3 WHITE = vec3(1.0); vec3 color; // こんなif文は、 if (x < 0.5) { color = WHITE; } else { color = BLACK; } // こんな三項演算子に置き換える color = (x < 0.5) ? WHITE : BLACK; こんな感じでif/else構文を避けていくわけですが、この方法の欠点はベクトルを一度に条件分岐することができない事です。 ですが、step関数とmix関数を使うとベクトルの要素ごとに条件分岐をしてその結果をベクトルに直接反映させ
GLSL で太陽っぽいものを描く - Qiita
シェーダ書きたくてしょうがないマン！ GLSL で暖を取りたいみなさまこんばんは。🔥🔥🔥 世の中にはたくさんの シェーダ書きたくてしょうがないマン が居るはずなんですが、身分を明かすことにより悪の組織から生命を狙われる可能性がある彼らはおいそれと Advent Calendar に投稿することもままなりません。悲しいですね。 そこで、一般市民として平々凡々に生活している私が代わりに、GLSL で世の中の GPU の温度を一度でも温められるようにがんばらなくてはと一念発起いたしました。 GLSL ワークショップ 先日、GLSL のワークショップを開催しました。そこではたくさんのシェーダ作品が投稿され、まさに 隠れシェーダ書きたくてしょうがないマン や、有望な 新人シェーダ書きたくてしょうがないマン を発掘することができました。ありがとうございました。 そんなワークショップで私が投稿した
[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)
【乖離性MA】開発者必見！PC版『乖離性』で採用されたWebGLの魅力を聞いてきた | ファミ通App【スマホゲーム情報サイト】
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 フレームワーク WhitestormJS - WebGL 総本山
three.js をさらにラップしたフレームワーク 今回ご紹介するのは、WebGL 使いなら誰もが知っていると言っても過言ではない three.js を、さらにもう一段ラップすることでより使いやすくするフレームワーク、WhitestormJS です。 Github や公式サイトには Examples が掲載されていますが、WebGL ヘルパーライブラリである three.js など、コア部分に外部のライブラリを組み込むことによって、驚くほど少ないコードの記述で 3D のシーンを構築できるように工夫されています。 物理演算などのゲーム開発に必要となる機能も追加することで、かなり利便性の高いフレームワークになっているようです。 使いやすさを重視した設計、ドキュメントも完備 この WhitestormJS ですが、実は結構昔からその存在は知っていました。 ちょっと前に見た時は、一見すると開発が止
あまりにも完成度の高すぎるパーティクルの神域！ ヘネシーの WebGL 製サイトが凄すぎる！ - WebGL 総本山
ムービーとの境界を感じさせない見事な演出 今回ご紹介するのは、ブランデーの銘柄として、お酒にあまり詳しくない方でも耳にしたことがあると思われる、ヘネシー（Hennessy）のウェブサイトです。 ヘネシーは、フランスのコニャックと呼ばれる地方で生産されている高級ブランデーのブランド名ですね。……と偉そうに書いて見たものの、私はお酒は全然詳しくないので、その点の解説はやめておきます。 今回のサイトは、現時点での WebGL におけるパーティクル表現としては、間違いなく世界随一の出来栄えと断言できます。 ムービーと WebGL レンダリングとの境い目がわからないほど見事なシーン遷移も含め、あらゆる点で他の追随を許さない完璧な完成度となっています。 公式ムービーをさらに WebGL で彩った作品 Youtube などでヘネシーの最近公開された動画を探してみると、今回のサイトの背景に時折流れる、オリ
WebGL のレンダリングパフォーマンスを感覚的に知る | TECH BLOG
three.js で WebGL のはなし。（というか requestAnimationFrame だな。） stats.js で 60fps 出てるからだいじょーぶーと思っていても、実際のレンダリング時間が 1/60 秒で終わってるか 1/200 秒でおわってるかはわからねいのですね。それはブラウザ (Chrome) がリフレッシュレートに同期して (VSync) requestAnimationFrame を動かしているからで、通常の液晶モニターだとリフレッシュレートは 60Hz なので、60fps に制限される、というわけ。画面が書き換わる速度以上にデータを書き換えても無駄だから。 Chrome ではその VSync をしないように設定できる。しないようにすると、画面書き終わったあとにつぎの周期をまたなくなるので、可能な限り最大限の速度で requestAnimationFrame
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Richard Mattka | Portfolio
2Dの流体 (stable fluids) の表現を使ってクリエイティブコーディングをしてみた。｜Takumi HASEGAWA (unshift Inc.)
Graphtoy
Microsoft、EdgeでWebVRを試験的にサポート 
Moved…