raymarching for games - primitive: blog
demoscene の世界では近年 raymarching というレンダリング手法がよく用いられています。ポリゴンモデルは使わず、モデルデータは数式の図形としてシェーダコードの中で表現し、pixel shader で図形との距離を求めて可視化していく、というものです。 demoscene (4k/64k intro) の厳しい容量制限の中綺麗な絵を出すために生み出された手法ですが、従来のポリゴンベースの手法では難しい独特の絵を出すことができるという副次的効果があります。 raymarching の代表的な作品群 この手法は PS4 世代以降、小規模ゲーム開発チーム向けの有用なツールになるんじゃないかと考えていて、atomic では試しに背景にこの手法を用いています。以下はその過程や考察です。 まず、raymarching の基本については demoscene.jp の人たちが素晴らしい解説
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年に登場した、ブラウザで動作する水面のリアルタイムシミュレーションです
GLSL で太陽っぽいものを描く - Qiita
シェーダ書きたくてしょうがないマン！ GLSL で暖を取りたいみなさまこんばんは。🔥🔥🔥 世の中にはたくさんの シェーダ書きたくてしょうがないマン が居るはずなんですが、身分を明かすことにより悪の組織から生命を狙われる可能性がある彼らはおいそれと Advent Calendar に投稿することもままなりません。悲しいですね。 そこで、一般市民として平々凡々に生活している私が代わりに、GLSL で世の中の GPU の温度を一度でも温められるようにがんばらなくてはと一念発起いたしました。 GLSL ワークショップ 先日、GLSL のワークショップを開催しました。そこではたくさんのシェーダ作品が投稿され、まさに 隠れシェーダ書きたくてしょうがないマン や、有望な 新人シェーダ書きたくてしょうがないマン を発掘することができました。ありがとうございました。 そんなワークショップで私が投稿した
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
Three.jsのオフスクリーンレンダリングとping-pongで、リアルタイム動体除去を行う - 自習室
はじめに 前回に続き、ブラウザ内だけで画像処理的なことをしよう、というチャレンジです。今回は動体除去というか、モーションブラーというか、画像の時間平均処理をしてみます。 上の写真は、割と短時間の平均画像です。動いているものが透けているのがわかると思います。画像の平均処理をもっと長時間で行うと、ほぼ動体が見えなくなります。アルゴリズムはあとから説明します。 OpenCVをC++で使うと、普通にMatとかで前回のフレームを保存しておいたり差分を取ったりとお手軽に出来ますが、おなじことをJavaScriptでやろうとすると、必要な枚数画像を展開して、ピクセルを全走査するなど、かなりヘビーな感じになります。今回はブラウザ内で完結させてみるのが目的なので、WebGLのシェーダを使ってみます。 完成品 完成品はこちらで確認出来ます。ページを開いたら、カメラ利用に許可を与えて下さい。上部のバーで除去具合
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
wgld.org | WebGL: バンプマッピング |
特殊なライティングテクニック 前回はフレームバッファへのレンダリング結果に対して、ブラーフィルターを適用して全体にぼかし処理を掛ける方法を解説しました。フラグメントシェーダを使ってピクセルごとに処理することで、一度レンダリングした結果にエフェクトを掛けることが可能となり、様々な効果を演出できます。ぼかし処理はその一例でしかありませんが、シェーダの使い方などを参考にしていただけたらと思います。 さて、話は変わって今回は、バンプマッピングをやってみたいと思います。 バンプマッピング(bump mapping)は一般に、法線マップなどを用いることによってあたかも凹凸があるかのように見せることができるライティングテクニックです。バンプマッピングを活用すると、少ないポリゴン数のモデルであっても高い表現力を得ることができるようになります。 と、言葉で説明されてもいまいちわかりにくいですね。 たとえば、
Animate your HTML5
Accès rapide: ➛ CSS3 ➛ SVG ➛ Canvas ➛ WebGL ➛ CSS shaders précédentsuivant action action = sur la plupart des slides, il se passe quelque chose quand on clique (surtout les slides 4, 9, 19, 31 et 38 :-) Quick access: --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- previous next action action = on most slides, something happens when you click (especially sl
ray marching に簡単に触れただけのスライドだけど - webgl and javascript
slider 001 はい、手前味噌で大変恐縮ですが、一応シェアの意味でここにもリンクを張っておきます。 wgld.org にもテキストを今後増やしていく予定ですが、導入として、ray marching がどんなものなのかを知るにはちょうどいいかなと思います。
レイマーチングなどのシェーダサンプルが豊富 - webgl and javascript
www.kevs3d.co.uk/dev/shaders/ WebGL ＋ GLSL でシェーダをうまく活用したサンプルがいくつかある。 非常に素晴らしいのだけど、それぞれのサンプルの負荷はそれなりにあるため閲覧には注意。
夢が広がる Shader Editor - webgl and javascript
Shader Editor - Firefox Developer Tools | MDN 一時期、ごく一部で非常に話題になりました。 これは、もうなんていうか、すごいなぁ。ヘタなネイティブアプリケーションよりも、ブラウザ一丁のほうがいろいろ便利になっていくのかなと、いやがおうにも感じさせます。 でも相当いいスペックのマシンじゃないとけっこう厳しいのでしょうね。
WebGL のシェーダーでグリグリできる CSS Shaders の使い方 - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 こちらの記事を見て「おお、ついに CSS Shaders 実装されたんか！」と喜び勇んで試した後、すべてが終わってから Dev 版 Chrome でも使えることに気づくという情弱ぶりを発揮した今日この頃、みなさんいかがお過ごしでしょうか。いったいいつから使えてたんだろう・・・（´・ω・｀） そんなわけで、最新の話題でもないみたいですが、せっかく試したので記事にして
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Graphtoy
フラグメントシェーダの実装チュートリアルや小さなデモが多数公開されているブログ xdPixel - WebGL 総本山
Procedural Volumetric Fire
Shadertoy