GraphtoyGraphtoy v0.4 by Inigo Quilez (feedback from Rafæl Couto, Florian Mosleh, Nicholas Ralabate, Rich Eakin and Jason Tully). If you find Graphtoy useful, please consider supporting it through Patreon or PayPal.
[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/1981ffff27a607dcfae6355d73834ea93e9a04cd/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-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCV2ViR0wlNUQlMjBJbnN0YW5jZWQlMjBTdGVyZW8lMjBSZW5kZXJpbmclRTMlODIlOTIlRTUlQUUlOUYlRTglQTMlODUlRTMlODElOTclRTMlODElQTYlRTMlODElQkYlRTMlODIlOEImdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPTA2MTBlMDU4ZjY2YTJjMTI1ZDlhNDRjYTcyNTE0ODlj%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwWVZUJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03MWUzOWY4MGM0ZTI5ZjIxYTRjYmNhNWQzYzM4ZDlmYw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D15b867d3f3ed9b01762caa11bfc093e2)
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 のワークショップを開催しました。そこではたくさんのシェーダ作品が投稿され、まさに 隠れシェーダ書きたくてしょうがないマン や、有望な 新人シェーダ書きたくてしょうがないマン を発掘することができました。ありがとうございました。 そんなワークショップで私が投稿した
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022
これが世界最高峰の GLSL シェーダデモか！ 質感にもこだわりを感じる驚きの GLSL 作品 Snail がすごい！ - WebGL 総本山
top 2015 年 12 月 これが世界最高峰の GLSL シェーダデモか！ 質感にもこだわりを感じる驚きの GLSL 作品 Snail がすごい！ 並の PC では滑らか再生は難しい 今回ご紹介するのは、ShaderToy に投稿された驚きの GLSL シェーダデモ作品です。 当サイトではこれまでにも ShaderToy の作品をご紹介したことがありましたが、正直言って、あのサイトには驚きのデモが本当にたくさんあります。そんな中でも、今回のデモには一種突出した、よくわからんけどとにかくすごい感 がありますね。 この作品を投稿したのは、なんと ShaderToy の生みの親である iq さんです。彼はレイマーチングに関する多くの文献を公開するなど、この界隈ではかなり有名なエンジニアです。 質感も見事なカタツムリ！ 今回の作品には Snail というタイトルがつけられています。 デモを見れ
3D みたいだけど 2D なんだけどやっぱりよくみたら 3D なんだけどでもやっぱり 2D なんだけどでもよくよく考えてみたらこれって GLSL 使ったレイマーチングなんじゃね？ - Qiita
3D みたいだけど 2D なんだけどやっぱりよくみたら 3D なんだけどでもやっぱり 2D なんだけどでもよくよく考えてみたらこれって GLSL 使ったレイマーチングなんじゃね？WebGLGLSL WebGL Advent Calendar 2015 の 21 日目の記事です。 ごあいさつ みなさんこんばんは！！ 🌙 ﾑｰﾝ! 今年はお正月に連休とっていいらしいということで人生初と言っても過言ではないとても一般的な年越しができそうなことを本気で嬉しく感じております doxas ともうします！ 🎍 さて、今年の WebGL アドベントカレンダーはとてもガチな人たちがたくさんの有用な記事を書いてくださっており、超個人的な感想をいきなり捩じ込みますがわたくしとても嬉しいです。 思えば 3 年ほど前、wgld.org を書き始めたころは WebGL というと動作も不安定で、本当にマニアみたいな
Pragmatic physically based rendering : Setup & Gamma
Pragmatic physically based rendering : Setup & Gamma This blog post is a part of series about implementing PBR in WebGL from scratch: IntroSetup & GammaUpdates2015/09/03 Removed gamma correction for input param colors and assuming they are in the linear space already 2015/09/22 Reversed back to gamma input colors based on the discussion here https://github.com/mrdoob/three.js/issues/5838 Before we
The Book of Shaders
by Patricio Gonzalez Vivo and Jen Lowe This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. Contents About this book Getting started What is a shader? “Hello world!” Uniforms Running your shader Algorithmic drawing Shaping functions Colors Shapes Matrices Patterns Generative designs Random Noise Cellular noise Fractional brownian motion Fractals Image
WebGLのドローコール最適化手法―CreateJS勉強会/池田発表資料(後編) ― ICS LAB
本記事は2015年2月10日（火）に開催されたCreateJS勉強会 (第5回) の発表資料「CreateJSクリエイトジェイエスで制作するスペシャルコンテンツ」の後編となります。前編(CanvasとWebGLの比較)に続けて本記事ではWebGLウェブジーエルの最適化手法を紹介します。 WebGLのドローコールの最適化について 前編ではHTML5 CanvasとWebGLの使い分けについて紹介しましたが、ここからはWebGLの最適化手法の1つを紹介します。よく知られているテクニックですが、WebGLでは描画命令のドローコールを少なくすることが有効だと言われています。ドローコールが少なくなることで滑らかなモーション = 60fps(遅延なきRequestAnimationFrameの達成）を実現し、スマートフォンでの実行時の消費電力を抑えられます。 下図は複数の要素を画面に表示するときのWe
HTML5 Conference に登壇します――GLSL や Blender に関するハンズオンもやるよ！！ - WebGL 総本山
まもなく開催！ HTML5 Conference ! 2015 年 1 月 25 日に、北千住で開催される HTML5 Conference に登壇します。 今回は「【ハンズオン】やってみたら実は簡単！ WebGLで開ける新しい表現」と題し、WebGL にあまり馴染みのない方にも楽しんでいただけるような、ハンズオン形式のセッションになる予定です。 私が全編しゃべるわけじゃなくて GLSL に関する発表の部分だけ、一部担当します。 事前の準備が必要な部分もあるので注意！ HTML5 Conference は残念ながら参加募集が既に満員御礼状態…… 参加者枠は 1200 人でしたが既に数百人のキャンセル待ちが発生している状態です。 これだけの人数が一堂に会することになるため、当日は Wifi など、通信関係はほぼ使えない状態になることが予想されています。 そこで私たちのセッションでは、ハンズオ
WebGL と GLSL で気軽にレイトレーシングに挑戦してみよう！ - Qiita
はじめに 全国 8,120 万人のレイトレファン の皆様こんにちは！ WebGL でレイトレがどうしてもやりたいんだというお便りがついに 1,021 万通を超えたので、そろそろ WebGL で簡単なレイトレーシングの実装について解説する頃合いかなと思い立ち筆を執った次第です。 今回はあくまでも 基本に忠実 に、簡単なレイトレーシングの実装を GLSL だけで行ってみましょう。全国のレイトレファンの皆さんの声援に応えてがんばって解説記事を書いていこうと思います。 前置き 私は幸運なことに WebGL について解説する機会がそれなりにあります。 そういった席ではよく、数学的な知識はとりあえず後回しにしてまずはやってみることからスタートしましょうという話をします。たとえば行列やクォータニオンについて、その数学的な詳細にまで勉強するのは大変です。ですから、まずは使い方から覚えようという促し方をする
これまでの無料フィルターアプリに飽きた人へ。「FILTERS」が写真の加工をもっと楽しくする - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -
スマホの写真をキレイにするフィルターアプリ。まるでプロが撮った写真のように加工できて楽しいですよね。しかし、最近のフィルターアプリは似たものが多く、どこかつまらない……と感じている人も多いのではないでしょうか？ 先日、誰かが作ったフィルターを使ったり、自分でフィルターを作ったりできるユニークなフィルターアプリがリリースされました。その名も「FILTERS」。早速、見ていきましょう。
![これまでの無料フィルターアプリに飽きた人へ。「FILTERS」が写真の加工をもっと楽しくする - U-NOTE[ユーノート] - 仕事を楽しく、毎日をかっこ良く。 -](https://cdn-ak-scissors.b.st-hatena.com/image/square/20979808f6c5ae936c0a5f04c42f7d3c29fb2078/height=288;version=1;width=512/https%3A%2F%2Fimgs.u-note.me%2Fnote%2Fcaption%2F47500825.jpg)
iPhone とリアルタイムに連動する GLSL シェーダコーディングを楽しもう！ Filters がリリース開始！ - WebGL 総本山
GLSL とカメラアプリのコラボレーション Filters は先日リリースされたばかりの iphone アプリ。 GLSL を用いたシェーダコーディングとカメラアプリをうまく組み合わせた今までにない新しいタイプのカメラアプリになっています。 今回はこの Filters について簡単にご紹介します。 独自のフィルターを作り出そう！ Filters では、iphone と連動して動作することによって、PC 側で記述したシェーダがリアルタイムに iphone にも反映されるような仕組みになっています。 PC 側で書き換えたコードがリアルタイムに反映されるというのはなかなか斬新です。 上図は Filters の公式サイトからの引用ですが、PC の画面と iphone が同期している様子が描かれています。 実際に動かしてみた感じもまさにこんな雰囲気で、リアルタイムに反映される様子はなかなか面白いです
Filters | 面白法人カヤック
「Filters」は、カメラフィルターを自作して投稿・共有できるカメラフィルターのプラットフォームアプリです。 コーディングしたオリジナルのカメラフィルターをアプリに投稿し、他のユーザーと共有することができます。投稿されたフィルターはアプリ内に蓄積されるため、常にオリジナリティある新しいフィルターが無限に増えていき、これまでにないスマートフォンカメラの楽しみ方が体験できます。 ●フィルターをつかおうモザイク、ミラー、アート、3D、ソフト、ビンテージ、マンガ風など、すでにつくられたフィルターや、毎日新しくつくられるフィルターを使って、写真や動画を撮りましょう。 ●フィルターをつくろうエンジニアの方は、専用PCサイト上（http://filters.kayac.com/edit）でコーディングしてオリジナルのフィルターをつくりましょう。開発言語はGLSL（OpenGL Shading Lang
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
歪曲収差（ディストーション）を GLSL で表現！ レンズによる歪みを再現できる fisheye.js！ - WebGL 総本山
フラグメントシェーダの実装チュートリアルや小さなデモが多数公開されているブログ xdPixel - WebGL 総本山
Lebarba
Filters〜世界一面白いカメラフィルターが、ここから生まれる。〜
