Back to my research page. Back to my personal page. Back to my demos page. My Ordered list of Shadertoys. All my shadertoy demos on Shadertoy website. See also: my Shadertoy unofficial blog (GLSL/Shadertoy tricks).
Shadertoys
Back to my research page. Back to my personal page. Back to my demos page. My Ordered list of Shadertoys. All my shadertoy demos on Shadertoy website. See also: my Shadertoy unofficial blog (GLSL/Shadertoy tricks).
https://www.shadertoy.com/view/MtGSWc （※音が出ます） Shadertoy 楽しいデスネ！ 去年(2016)末、javascript でも SiON みたいなソフトウェアシンセを作れないかなと思って GPGPU シンセサイザについて下調べをしていました。その際 Shadertoy が GPU による音生成に対応している事を知り、裏側でどういう処理をしているのか調べていました。 残念ながら、GPGPU シンセサイザは汎用性を持たせるのは難しい、という結論に至ったのですが（この経緯については後日書きたいと思います）、先週 GLSL 作曲入門 という記事が投函され Shader Music が結構注目されているのを見て、せっかく勉強したので乗っかてみることにしました。 どうせならちゃんと描きたい とりあえず簡単な Shader Music を実装しようと思っ
A bit older shader on fhtr.net this time, from the time I was getting started with ray tracing. This one's path tracing spheres and triangles with motion blur. Might even work on Windows this time, but YMMV. I should get a test machine for that. "So", I hear you ask, "how does that work?" I'm glad you asked! It's a common Shadertoy-style WebGL shader where two triangles and a trivial vertex shader
私のShader開発環境 - Qiita
UnityShader まずはUnityのShaderを書くときの環境です。 Visual Studio Code UnityのC#をデフォルトで書くときはVisual Studioを基本使いますが、 Shaderを書くときはVisual Studio Codeを使います。以後VSCodeと略します。 VSCodeにいくつかの拡張機能を入れてShaderを書きやすいように環境を整えます。 Japanese Language Pack for Visual Studio Code ダウンロードサイト VSCodeのUIが英語になっていて使いにくいので日本語にします。 Shader languages support for VS Code ダウンロードサイト Shader言語(HLSL,GLSL,Cg)のシンタックスハイライトを可能にします。 ShaderlabVSCode(Free) ダウ
これは Surma 著 WebGPU — All of the cores, none of the canvas の翻訳です。英語版は Creative Commons Attribution 4.0 International License で公開されています。 この翻訳は Creative Commons Attribution 4.0 International License の許諾に基づいて公開されます。 WebGPU は低レベルで汎用な GPU アクセスを提供する Web API であり、現在策定が進んでいる。 私はグラフィックスが専門というわけではない。OpenGL でゲームエンジンを作るチュートリアルを読んで WebGL について何となく理解し、Inigo Quilez が ShaderToy で 3D メッシュやモデル無しにシェーダーだけで素晴らしいことをするのを見て
こんにちはアマギです。もうすぐUnity歴3ヶ月です。 8/27、表参道のADIRECTORチャネルにてVJ出演しました。 Radical Hardcore Clique x VJ Takayosi Amagi (2018.08.27) #dollhouse #brdg #madewithunity #veta #ADIRECTORチャネル pic.twitter.com/wKcquy8aq8— BRDG / VRDG (@tokyomax) 2018年8月28日 ADIRECTORはavexによるテクノロジーとアートのイベントです。 4階建てのビルをまるごと使って、FEMMによるパフォーマンスや、観客参加型のプロジェクションマッピングなどを楽しめました。 https://adirector.jp/ 会場には6画面の透過スクリーンを使ったライブ会場があり、Radical Hardcore
Wolfenstein: Ray Tracing On using WebGL1 - reindernijhoff.net
Since the introduction of the Nvidia RTX graphics cards last summer, ray tracing is back again. In the last months, my Twitter feed got flooded with a continuous stream of RTX On / RTX Off comparisons. After seeing so many nice images, I wanted to get experience combining a classical forward renderer and a ray tracer myself. Suffering from the not-invented-here syndrome, I created my own hybrid re
Current Interests January 31, 2024by Eric Haines It's all about me me me. This page is mostly about my professional interests, newest to oldest, with some hobby bits interspersed. I tend to put graphics-related links on Twitter and blog here. You can also check LinkedIn. Write me at erich@acm.org. Along with Elena Garces, I'm a Program Chair for EGSR 2024: early July, Imperial College, London, UK.
魅せろ！ Flutter で目を惹く UI デザインを実装する - enechain Tech Blog
はじめに こんにちは、enechain でソフトウェアエンジニアをしている @tomohiko-tanihata です。 先日、国内最大級の Flutter カンファレンスである FlutterKaigi2023 が開催されました。私たち enechain は、モバイルアプリに Flutter を採用しており、昨年に引き続き、今年も FlutterKaigi の Silver スポンサーとして協賛しました！ チームのみんなでセッションに応募したところ、私のセッションが採択され、登壇する機会を得ました 🎉 セッションのタイトルは「魅せろ！Flutter で目を惹く UI デザインを実装する」で、目を惹く UI デザインを実現するための 4 つの方法について紹介しました。 当日の発表資料には GIF をたくさん貼っており、PDF で公開するのに不向きなスライドになっていたので、記事として F
We first introduced support for dmabufs and graphics offload last fall, and it is included in GTK 4.14. Since then, some improvements have happened, so it is time for an update. Improvements down the stack The GStreamer 1.24 release has improved support for explicit modifiers, and the GStreamer media backend in GTK has been updated to request dmabufs from GStreamer. Another thing that happens on t
Shadertoy
This help only covers the parts of GLSL ES that are relevant for Shadertoy. For the complete specification please have a look at GLSL ES specification Language: Version: WebGL 2.0 Arithmetic: ( ) + - ! * / % Logical/Relatonal: ~ < > <= >= == != && || Bit Operators: & ^ | << >> Comments: // /* */ Types: void bool int uint float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 uvec2 uvec3 uvec4 ma
The Book of Shaders
ユニフォーム変数 ここまで、GPUが沢山のスレッドを並列に処理する様子を見てきました。それぞれのスレッドは画像の各部分への色の割り当てを受け持っています。シェーダーではスレッド間の情報のやりとりを行うことはできませんが、CPUからそれぞれのスレッドに入力を送ることはできます。グラフィックカードは全てのスレッドにまったく同じ入力を、読み取り専用で送るように設計されています。それぞれのスレッドは同じデータを受け取り、それを書き換えることはできません。（訳注：英語の”uniform”には均一な、一様な、という意味があります） これらの入力は uniform 変数と呼ばれGLSLでサポートされているほとんどの型が使えます。サポートされている型には float、vec2、vec3、vec4、mat2、mat3、mat4、sampler2D、samplerCube などがあります。 uniform変数
Work | gam0022.net
最終更新: 2023-02-19 Publications 執筆した書籍を紹介します。 2021年6月 Unityゲーム プログラミング・バイブル 2nd Generation 2021/6/29発売の『Unityゲーム プログラミング・バイブル 2nd Generation』を執筆しました。 37のトピックのうち、私は次の2つを担当しました。 レイマーチング：基礎から応用まで Timelineによる映像制作 関連記事 『Unityゲーム プログラミング・バイブル 2nd Generation』のレイマーチングとTimelineの章を執筆しました | gam0022.net 2020年9月 CGWORLD vol.266（2020年10月号）の「デモシーンを支えるプロシージャル技術」 9/10（木）発売のCGWORLD vol.266（2020年10月号）に「デモシーンを支えるプロシージャ
oilArt
This help only covers the parts of GLSL ES that are relevant for Shadertoy. For the complete specification please have a look at GLSL ES specification Language: Version: WebGL 2.0 Arithmetic: ( ) + - ! * / % Logical/Relatonal: ~ < > <= >= == != && || Bit Operators: & ^ | << >> Comments: // /* */ Types: void bool int uint float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 uvec2 uvec3 uvec4 ma
Shadertoy
This help only covers the parts of GLSL ES that are relevant for Shadertoy. For the complete specification please have a look at GLSL ES specification Language: Version: WebGL 2.0 Arithmetic: ( ) + - ! * / % Logical/Relatonal: ~ < > <= >= == != && || Bit Operators: & ^ | << >> Comments: // /* */ Types: void bool int uint float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 uvec2 uvec3 uvec4 ma
2018 Winners
2023 2022 2021 2020 2019 2018 2017 2016 These are the winners of the STARTS Prize – Grand prize of the European Commission honoring Innovation in Technology, Industry and Society stimulated by the Arts 2018: Amsterdam’s 3D Printed Steel Bridge MX3D & Joris Laarman Lab Grand Prize – Innovative Collaboration: Awarded for innovative collaboration between industry or technology and the arts (and the c
Shadertoy
This help only covers the parts of GLSL ES that are relevant for Shadertoy. For the complete specification please have a look at GLSL ES specification Language: Version: WebGL 2.0 Arithmetic: ( ) + - ! * / % Logical/Relatonal: ~ < > <= >= == != && || Bit Operators: & ^ | << >> Comments: // /* */ Types: void bool int uint float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 uvec2 uvec3 uvec4 ma
PixelsWorld
What is PixelsWorld? PixelsWorld is a plugin for After Effects to render graphics by running simple processing scripts. You can achieve almost any visual effect with this plugin. Run Processing-like code. Render 3D geometry via SpreadSheet. Run GLSL code. Run code from shadertoy.com. Run Lua code. Apply easily sharable code presets Creative Coding in After Effects PixelsWorld bridges the gap to al
Shadertoy
This help only covers the parts of GLSL ES that are relevant for Shadertoy. For the complete specification please have a look at GLSL ES specification Language: Version: WebGL 2.0 Arithmetic: ( ) + - ! * / % Logical/Relatonal: ~ < > <= >= == != && || Bit Operators: & ^ | << >> Comments: // /* */ Types: void bool int uint float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 uvec2 uvec3 uvec4 ma
Minutes from the 2017-09-22 meeting from Corentin Wallez on 2017-09-26 (public-gpu@w3.org from September 2017)
From: Corentin Wallez <cwallez@google.com> Date: Tue, 26 Sep 2017 09:54:30 -0400 To: public-gpu <public-gpu@w3.org> Message-ID: <CAGdfWNOxJ6NEg5Amc1GFwjTwr_zDX6bR-fy-LQPbHXrNX=4=-g@mail.gmail.com> GPU Web 2017-09-22 Chicago F2F Minutes from last meeting <https://docs.google.com/document/d/1seCUVBkzkRPEj0sfcDBymGjwSPndTGPhsQJPkUQscNY> TL;DR of the TL;DR - Better fleshed out target for the MVP, some
これが世界最高峰の GLSL シェーダデモか！ 質感にもこだわりを感じる驚きの GLSL 作品 Snail がすごい！ - WebGL 総本山
top 2015 年 12 月 これが世界最高峰の GLSL シェーダデモか！ 質感にもこだわりを感じる驚きの GLSL 作品 Snail がすごい！ 並の PC では滑らか再生は難しい 今回ご紹介するのは、ShaderToy に投稿された驚きの GLSL シェーダデモ作品です。 当サイトではこれまでにも ShaderToy の作品をご紹介したことがありましたが、正直言って、あのサイトには驚きのデモが本当にたくさんあります。そんな中でも、今回のデモには一種突出した、よくわからんけどとにかくすごい感 がありますね。 この作品を投稿したのは、なんと ShaderToy の生みの親である iq さんです。彼はレイマーチングに関する多くの文献を公開するなど、この界隈ではかなり有名なエンジニアです。 質感も見事なカタツムリ！ 今回の作品には Snail というタイトルがつけられています。 デモを見れ
Dave Voyles | Software Engineer, Microsoft Data science, game development, and financial services Unity, and Epic’s Unreal Engine, the popular middleware tools frequently used by game developers are not limited to creating compiled applications that run as an executable. Unity previously had a web player, which was a downloadable plugin that used ActiveX. Chrome killed support for NPAP (Netscape P
This article describes my minimal reference code for modern GPU-enabled real-time 3D graphics, which is both a sample program and a self-contained tutorial. This code is useful for programmers working with a new device (such as a virtual reality head mounted display: VR HMD) for the first time, or for programmers working with hardware graphics at all for the first time. I also use it as a testbed
In this tutorial, I explore the fascinating realm of shader art coding and aim to offer helpful insights and guidance to assist you in beginning your own creative journey. I hope to share my passion with you along the way! Final shader: https://www.shadertoy.com/view/mtyGWy Resources presented in the video: • Shadertoy: https://www.shadertoy.com/ • Inigo Quilez website: https://iquilezles.org/ar
Shadertoy
This help only covers the parts of GLSL ES that are relevant for Shadertoy. For the complete specification please have a look at GLSL ES specification Language: Version: WebGL 2.0 Arithmetic: ( ) + - ! * / % Logical/Relatonal: ~ < > <= >= == != && || Bit Operators: & ^ | << >> Comments: // /* */ Types: void bool int uint float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 uvec2 uvec3 uvec4 ma
Shadertoy
Hi Shadertoy friends, we have been online for two months now! We have learnt a lot in that time, but perhaps the most important thing is that now,...
Winding numbers using a Cauchy integral, with WebGL This is what the winding number n(γ,a) of curve γ around point a, expressed as special case of Cauchy’s integral formula looks like on potentially non-closed loops, with complex numbers mapped to a hue-luminance space. $$ n(\gamma ,a) = \frac{1}{2 \pi i}\int_{\gamma}^{}\frac{1}{z-a}dz $$ Demo (drag your mouse/thumb across the red canvas) Each pix
Noise
■ノイズの種類 OFF ホワイトノイズ ブロックノイズ(fBm) バリューノイズ(fBm) パーリンノイズ(fBm) セルラーノイズ セルラーノイズ反転 セルラーノイズ(タイル分割) セルラーノイズ反転(タイル分割) ■fBm反復回数 ■アニメーション 説明 ノイズテクスチャをオフスクリーンで生成して、レイマーチングの距離関数にマッピングさせてみました。 ここで紹介しているのはベーシックなノイズ生成手法のみですが、更に調べていくと頭のおかしい手法がまだまだたくさんあって面白い、というか発狂しそうです。 情報源としてはこちらやこちらのサイトが有名です。いつも勉強させていただいてます。 補助関数 ノイズの生成に使用する関数をいくつか準備しておきます。 // vec2の入力から0.0～1.0の乱数を出力する float random(vec2 v) { // この実装が伝統的によく使われる //
Today we are painting a landscape using mathematics. Support this channel: https://www.patreon.com/inigoquilez Buy this painting in a metal, canvas or photographic paper print: https://www.redbubble.com/shop/ap/39843511 This is the link to the real-time rendering code (that you can edit yourself live) for the painting: https://www.shadertoy.com/view/4ttSWf Music by Bent Stamnes (https://twitter.
Resources for Learning Graphics Programming — Stephanie Hurlburt
Look, I’ve just accepted the fact that I’m never going to turn this Twitter thread into a proper fancy blog post. But it’s a darn useful Twitter thread, and I link to it at least a few times a month. So, it shall have a place here on this blog. Keep in mind graphics can be quite fast-paced, and this thread was written in 2017, but many things still do stay the same or prove useful down the road. F
概要 以前に、「[コードリーディング] レイマーチングによる波表現を読み解く」というタイトルで波表現をするレイマーチングのコードを読み解きました。 （そのときの動画はこれ↓） 今回はこちらのShadertoyの作品をコードリーディングしたいと思います。 ちなみにこんな感じの絵が出ます↓ （下記は、上の作品にコメントつけたり分かりやすくしたりしたもののキャプチャです） こちらの作品を、自分が分かる範囲でコメントを付けつつ、変数などもできるだけ意味付けしながら解説・読解していこうと思います。 なお、自分がコメントを付けたバージョンはこちらにポストしてあります。 また読解に際して、こちらのブログ記事（Creating a Volumetric Ray Marcher）も参考にさせていただきました。 いちおう翻訳とかも全文やってみたのですが、書いた方が許可してくれたら掲載しようと思います。 許可さ
![[コードリーディング vol.2] レイマーチングによる雲表現を読み解く - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/24ecd6ed5b6588f7f424fd48386d083ebf0e5f20/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgzJUFBJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJTIwdm9sLjIlNUQlMjAlRTMlODMlQUMlRTMlODIlQTQlRTMlODMlOUUlRTMlODMlQkMlRTMlODMlODElRTMlODMlQjMlRTMlODIlQjAlRTMlODElQUIlRTMlODIlODglRTMlODIlOEIlRTklOUIlQjIlRTglQTElQTglRTclOEYlQkUlRTMlODIlOTIlRTglQUElQUQlRTMlODElQkYlRTglQTclQTMlRTMlODElOEYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTY2NmExMzUyYzYxMGNhMzMzYWJiOTUwYzAyZWMyYTMy%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZWRvX20xOCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MWZhNjI3N2Y5N2YyYmU4NTJmMzc3YzAyOGM1MTQ2NjA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dbff6374d3c4b030811107fd70a0ec441)
概要 今回はちょっと趣向を変えてコードリーディングをしてみたいと思います。 まずは以下の動画を見てください。 https://www.shadertoy.com/view/Ms2SD1 とてもきれいな海の映像ですよね。 これ、レイマーチングと呼ばれる方法でプログラムでリアルタイムに描いている映像なのです。 Shadertoyの投稿作品のページに飛べば、実際にレンダリングされている様子を見ることができます。 投稿者でなくても一時的なコードの変更をすることができるので（当然保存はできない）、パラメータをいじったりするとリアルタイムに内容が反映されるのが分かるかと思います。 今回はこの海のコードを読み解きつつ、内容を理解していくのが目的となります。 なお、この海のレンダリングにはいくつかの技術が使われており、それぞれについて個別に記事をまとめたのでそちらも合わせて見てもらうとより理解が深まるかな
![[コードリーディング] レイマーチングによる波表現を読み解く](https://cdn-ak-scissors.b.st-hatena.com/image/square/330bba3072f84fe60611ccd67b6c231ceb44e2a4/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgzJUFBJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJTIwdm9sLjElNUQlMjAlRTMlODMlQUMlRTMlODIlQTQlRTMlODMlOUUlRTMlODMlQkMlRTMlODMlODElRTMlODMlQjMlRTMlODIlQjAlRTMlODElQUIlRTMlODIlODglRTMlODIlOEIlRTYlQjMlQTIlRTglQTElQTglRTclOEYlQkUlRTMlODIlOTIlRTglQUElQUQlRTMlODElQkYlRTglQTclQTMlRTMlODElOEYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWMzNGZiNTBiM2U4MzA2MjVlYzljYWQxN2Y3ZWUyYTVj%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBlZG9fbTE4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lMmQ5MGMxNzhmNTEyNmZmYmVlZTEzOTliMzVmNzRhZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dd3a749598b467abbbab5a0b25f7a478b)
Shadertoy
This help only covers the parts of GLSL ES that are relevant for Shadertoy. For the complete specification please have a look at GLSL ES specification Language: Version: WebGL 2.0 Arithmetic: ( ) + - ! * / % Logical/Relatonal: ~ < > <= >= == != && || Bit Operators: & ^ | << >> Comments: // /* */ Types: void bool int uint float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 uvec2 uvec3 uvec4 ma
Shader Toy
Are you sure you aren't in the wrong URL? You probably want to visit Shadertoy at http://www.shadertoy.com
Shadertoy
This help only covers the parts of GLSL ES that are relevant for Shadertoy. For the complete specification please have a look at GLSL ES specification Language: Version: WebGL 2.0 Arithmetic: ( ) + - ! * / % Logical/Relatonal: ~ < > <= >= == != && || Bit Operators: & ^ | << >> Comments: // /* */ Types: void bool int uint float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 uvec2 uvec3 uvec4 ma
Work Visualisation Development Flourish / Canva SEED Google Creative Lab; Visual Editions Understanding npm NodeSource N|Solid NodeSource Evolyte University Project stackgl Open Source Vikings: A World Revealed Jam3 run.south.im Web Directions South Shader School NodeConf Fragment Foundry Electrofringe WebGL Workshop CampJS Ectoplasmid BEAMS Festival; Yours & Owls Contact [email protected] GitHub
［SIGGRAPH］リアルタイムレンダリングの最先端が集結するイベント「Real-time Live!」レポート（前編）
［SIGGRAPH］リアルタイムレンダリングの最先端が集結するイベント「Real-time Live!」レポート（前編） ライター：西川善司 SIGGRAPH会期中の人気イベントとしては，CG映画祭的な「Computer Animation Festival」が最も有名だが，それとは別に，SIGGRAPH 2010から始まり，人気を集める比較的新しいイベントがある。それが「Real-Time Live!」だ。 Real-Time Live!とは，グラフィックスとそれに関わるインラクティブ技術を，実際にPCやゲーム機上でデモを動かして“リアルタイムで披露する”ことがコンセプトのイベントである。その場で実際に動かさなくてはならないので，ときにはマシンのハングアップやらネットワークトラブルがあったりして，うまく動作しない場合もあったりする。そうしたトラブルも含めて楽しむのが，Real-Time
概要 今回は2次元の六角形を描き出す方法の解説です。 これを応用して、レイマーチした平面に描き出すとこんな感じの絵が作れます↓ 動くものはShadertoyに上げてあります。 - Radial hexagon space ちなみにこのUV値による描画は以下の動画を大いに参考にさせていただきました。 動画ではひとつひとつ、徐々に作り上げていってくれるのでとても参考になります。 時間がある方は動画を見たほうがより理解を深められるかもしれません。 - Hexagonal Tiling Explained! 六角形（Hexagon）を描く さて、まずは六角形を描く方法を見ていきましょう。 UV値を加工して六角形を描き出します。 まずはコードを示し、そのあとで解説を加えます。 void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2
![[GLSL] UV値を使って2Dの六角形を描く - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/58694ed6173c6dfd05c07cf5c5b8f6efc3e20dad/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCR0xTTCU1RCUyMFVWJUU1JTgwJUE0JUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2MkQlRTMlODElQUUlRTUlODUlQUQlRTglQTclOTIlRTUlQkQlQTIlRTMlODIlOTIlRTYlOEYlOEYlRTMlODElOEYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTJkZTAwNjAxN2RkNjRkMWQ0MzRkMTAyODFjOTljNmMx%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBlZG9fbTE4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lMmQ5MGMxNzhmNTEyNmZmYmVlZTEzOTliMzVmNzRhZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D0f8a075e3566a9c0561f42a212a19988)
Music Shader シーケンス - Qiita
最近、shaderで音楽について模索してきました。なんとなく形になったので記事を書きたくなりました。 音楽をshaderで作る為に必要なことは、「音源」と「シーケンス」の２つです。 音源についてはディープな知識が必要でまだまだ足りないのですが、シーケンスについては使えるレベルになりました。 このシーケンスについて書いていきます。 サンプルは、ここです。 https://www.shadertoy.com/view/4sXcWM シーケンスをする為にマクロを使う シーケンスをするのには関数を作るよりマクロを使った方が記述量を含め考えてみると有利みたいです。配列を使う方法もありそうですが、直観的に記述するなら面倒な感じです。 とりあえず今回使うマクロ群です。 #define BPM 120.0 #define INIT(t) float tmp = t, nTime = t; int val,
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Shadertoy はじめました - Qiita
Opus 2, GLSL ray tracing tutorial
WebGPU - コアの全てを canvas 抜きで (翻訳) - inzkyk.xyz
UnityでVJシステム作ってパフォーマンスした - マルシテイア
Eric Haines' Homepage
GTK Development Blog – All things GTK
Asm.js and WebGL for Unity and Unreal Engine
http://notlion.github.io/audio-shadertoy/
OpenGL Sample Code (including VR samples)
An introduction to Shader Art Coding
Winding numbers using a Cauchy integral, with WebGL
Painting a Landscape with Maths
[コードリーディング vol.2] レイマーチングによる雲表現を読み解く - Qiita
[コードリーディング] レイマーチングによる波表現を読み解く
Hugh Kennedy
[GLSL] UV値を使って2Dの六角形を描く - Qiita