[Shadertoy] シェーダのみで表現されたとある惑星……思わず信じられないと叫びたくなる出来栄え！ - WebGL 総本山
GLSL だけで表現された世界 今回は、ちょっと普段と趣向を変えて、シェーダだけで表現されたデモを投稿できるサービスである Shadertoy から、驚きの GLSL 作品をご紹介します。 Shadertoy には、いい意味で頭がおかしい人たちがたくさん生息しています。もちろん、彼らの生み出すデモ作品もとんでもない出来栄えのものばかり。 今回ご紹介するのもそんな作品のなかのひとつです。 珍しい長編ムービーのような作品 Shadertoy には前述のとおり、たくさんのキチガイな作品が投稿されていますが、ここまで長編ムービー仕立てになっているものは珍しいです。 約 2 分ほどの時間を掛けて、ゆっくりとシーンが切り替わっていきます。冒頭は、ややカメラを引き気味に、宇宙空間に浮かぶ土星のような惑星の全体が映ります。 惑星の周囲にある輪に影が落ち、近くに恒星があるのだろうなということが想像できます。
![[Shadertoy] シェーダのみで表現されたとある惑星……思わず信じられないと叫びたくなる出来栄え！ - WebGL 総本山](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e78c1d6a8badb6ffc85771673360782606e1c62/height=288;version=1;width=512/https%3A%2F%2Fwebgl.souhonzan.org%2Fi%2Fentry%2F211_001.jpg)
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
Error - Shadertoy BETA
Sorry! :-( We either didn't find the page you were looking for, or there was an internal error. If you encounter this problem repeatedly, feel free to send us feedback.
GLSLでテトリスをつくる - Qiita
こんにちはphi16です。今年1月頃に作ってしまった謎のテトリスの経緯と実装のちょっとした解説をしようとおもいます。 それがこちら : https://www.shadertoy.com/view/4d33Dj (見た目バグってますけど、最初にBufAタブ内のreturn 0;をコメントアウトしてください。稀にWebGLが落ちますけど。後述。) 2019年になったのでセーフティを抜きました ;D Shadertoyについて 1日目に書かれていた通り一級品のシェーダがぽんぽん投稿されていくサイトです。 https://www.shadertoy.com 最初にGLSLだけでなんか作れそうだなぁ、と思って見つけてしまったのがコレだったので世界は広いんだなぁと実感しました。 意味のわからない激ヤバシェーダもいっぱいありますが、教育的な感じでわかりやすいコードのものもありますし。 意味のわからなく
Volume Rendering with WebGL
January 13, 2019 Figure 1: Example volume renderings, using the WebGL volume renderer described in this post. Left: A simulation of the spatial probability distribution of electrons in a high potential protein molecule. Right: A CT scan of a Bonsai Tree. Both datasets are from the Open SciVis Datasets repository. In scientific visualization, volume rendering is widely used to visualize 3D scalar f
はじめに この記事はVRChat Advent Calendar 2018の23日目の記事です。 昨日の記事は、@synqark さんの「VRChatの皆に手軽に綺麗になってほしくて作ったシェーダーの話」でした。 この記事を書いてみて、実践的な内容が含まれてない事に気付いてつまらないなぁと思ったので急遽UnityでGANTZ風シェーダー解説という記事も併せて書きました。Unityシェーダーを触って雰囲気分かってきた人向けの内容です。良ければこちらも読んでみて下さい。 こんにちは、梶田悠です。 今年の6月頃からUnityにおけるShaderをしっかり勉強し始めました。 12月現在まででシェーダーで作ったものを以下にいくつか抜粋します。 半年くらいのシェーダー経験を踏まえて、これから学習する人向けにガイドラインを作る事が本記事の目的です。 厳密には間違った表現をしていたり書いていたりするかもし
Using WebGL on Chrome (AKA: "Why don't I have the WebGLs?!?")
It occurred to me the other day that although WebGL is now available on more devices with Chrome than ever before, Google actually hasn't said a whole lot about who has it, how to get it, and what to look for if you don't have it. Today I'm going to try and fix that! The TL;DR version is that with some predictable exceptions most devices that run Chrome can get to WebGL at this point, and an incre
2019年2月に作ったシェーダーを紹介する - なんかやる
サムネ用 はじめに 去年の12月頃から、個人的にシェーダーのみで短い映像や画像を作ってtwitterで公開するという事をやっています。 今月から、シェーダーを作成した月の月末に公開しなかったシェーダーも含めて、軽く解説やバックボーンを交えて紹介しようと思います。 2/4（公開してない） PBR 物理ベースレンダリング（PBR）をテストする時に作成しました。 直接光のBRDFモデルは、拡散反射に正規化ランバートモデル、鏡面反射にCook-Torranceマイクロファセットモデルを使用しています。 両者ともに実装した経験があることや、モデル自体がよく知られているので文献や参考実装が豊富にあり、困ることはなかったです。（正しく実装できているかはあまり自信がない...） 間接光のBRDFモデルは、Unreal Engineで使用されているPre-filtered environment mapと言
VRChatを始めて二年になったので、この一年を少し振り返りました。一年目については以下の記事に書いてあるのでよかったら読んでください。 butadiene.hatenablog.com 今年は「項目」ごとにまとめていけたらなと思います。 前提 Shader（単体）の話 GLSLライブコーディング インターン 真夏 電ド 酢 BeyondReality バーチャルキャスト CodingActor(大学祭での展示) HDRP Houdini DJ tidal cycles Unity 大学でのShader講座 学業 メンタル マネタイズ ツイッター VRChat おまけ Spotify 前提 私が一年前思っていたことです まずVRChat1年目を終えて2年目を迎えようとする僕にとってはいくつかの考えや意気込みがありました。 まずShaderが本当に楽しいという話です。自分にとって初めて得た表
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
Hi guys, Disclaimer: This post is not an overview of signed distance fields, nor is it a guide on how to create them/work with them. I will write a more comprehensive post about the whole topic in future once I’ve “finished” the implementation. Note: Usually all my code is available on github, but as this is WIP I’m currently using a private local branch. You can try this stuff at a later date whe
WebGL Virtual Meetup - May 2021 Meeting Recording and Presentation Archives WebGL Virtual Meetup - March 2021 Meeting Recording and Presentation Archives SIGGRAPH Asia 2020 WebGL Updates for SIGGRAPH Asia 2020: WebGL Working Group WebGL Virtual Meetup - November 2020 Meeting Recording Introduction: WebGL Working Group PlayCanvas 2020 Update: Will Eastcott, PlayCanvas BlackSmithSoft Digital Constru
Hello. This is the first of a series of blog posts I plan to write, breaking apart the algorithms and implementation of a custom 2D global illumination (or path tracing, or radiosity, or whatever you want to call it) lighting engine in Godot. To skip some preamble and get to the Godot implementation, click here. If you want to skip everything and get the code, click here. I want to do more than ju
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
こんにちは。traP Advent Calendar 2016 22日目担当のArkです。 今回はクリエイティブコーディングについて書きます。 1. クリエイティブコーディングとは みなさん、クリエイティブコーディングを知っていますか？ 僕は知りません。 ・・・。 ちょうどいい言葉ないかなーとググってみたらこのワードが出てきたのでタイトルに使ってみました。 wikipediaによれば、 Creative coding is a type of computer programming in which the goal is to create something expressive instead of something functional. とのこと。 要は「プログラミングによってクリエイティブな作品を創ろう」というものだと思います（たぶん）。 今年は クリエイティブコーディング
Today we are painting a cartoon character using mathematics. Support this channel by subscribing or joining my Patreon: https://www.patreon.com/inigoquilez This is the link to the real-time rendering code (that you can edit yourself live) for the painting: https://www.shadertoy.com/view/WsSBzh Links I mentioned in the video I'd leave here: * Raymarching: https://iquilezles.org/articles/raymarch
Gaussian Blur Shader
I’m attempting to do a 3-pass gaussian blur shader on a texture. The first pass is a horizontal blur, the second pass is a vertical blur, and the third pass is to draw the original image back on top of the two blurred versions. The result I am looking for is what I would describe as a yellow outer glow effect. I think I am running into a problem because of my grab pass which passes the result of t
Part 1 of this series about my toy renderer covers the most fundamental design decisions. Over the years, I have written many renderers and for a long time their complexity kept growing. This time, I took the opposite route. I wanted to maximize the fraction of code that implements crucial functionality rather than wasting my time on bloaty infrastructure. The code that I wrote (excluding shaders)
qiita.com GPUで暖を取りたい人のためのGLSL Advent Calendar 2016，24日目の記事です． 前回の記事で紹介したアルゴリズムを用いて双曲円盤上での敷き詰め模様を描いてみます．前回の例では，ユークリッド平面，つまり私達が普段考える平面での敷き詰めを行いました．敷き詰め模様は無限に続き，果てが見えません． 幾何学を研究する数学者たちは，私達の世界の法則を崩した世界を考えました．双曲幾何学(Hyperbolic Geometry)はそんな世界を考える幾何学の分野の一つです．そして，双曲幾何学の世界を一枚の円盤だとみなしたモデルが存在します．このモデルはポアンカレの円板モデルと呼ばれ，円盤の端がユークリッド平面における無限遠点，世界の端となり，円弧がこの世界における直線だと考えられます．また，三角形の内角の和が180度以下になります．この世界におけるタイルの敷き詰め
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
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
特定のプログラム、フレームワーク、API 等は無く、 コンピューターグラフィックスの為の GLSL (今回はWebGL) を使って音声を生成する呼称のようなモノのよう。 Shadertoy で音が流れるのをどうやっているのかが気になったのがきっかけで調査。 キャンバスに WebGL を使いシェーダーで描画、描画結果から WebGLRenderingContext.readPixels() によりピクセルブロックを読み取り、結果の ベクトル vec2 の X を左チャンネル、Y を右チャンネルとして Web Audio API AudioBuffer に割り当て、音を再生。 描画時のキャンバスサイズやサンプリングレートの値を変更する事により生成する音の長さ等を変更可能。 例えば 512px × 512px のキャンバス で 44.1kHz のサンプリングレートとした場合。
NEORT β版をリリースしました
こちらの記事は「NEORT was released」の日本語版です。 デジタルアートのプラットフォーム「NEORT」をβ版としてリリースしました！ この記事では私たちがNEORTに込めた想いや、どんなことができるかなどを紹介します。 デジタルアートがどんなものかについてのお話はこちらの記事をご覧ください。 どんなサービス？NEORTはデジタルアートのプラットフォームです。 作品を閲覧し、つくり、学び、繋がることができます。 特定の技術ではなく、美的表現で繋がるサービスです。 ShaderToy, OpenProcessingなど技術を軸にしたデジタルアートの偉大なサービスはたくさんありますが、NEORTは技術を横断して作品・美的表現自体で繋がるプラットフォームです。 様々な技術でつくられた多様な作品はきっとあなたに刺激を与え、創造力を広げるでしょう。 誰のためのサービス？デジタルアートを
A Beginner's Guide to Coding Graphics Shaders | Envato Tuts+
Learning to write graphics shaders is learning to leverage the power of the GPU, with its thousands of cores all running in parallel. It's a kind of programming that requires a different mindset, but unlocking its potential is worth the initial trouble. Virtually every modern graphics simulation you see is powered in some way by code written for the GPU, from the realistic lighting effects in cutt
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
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
【改良版！】SDF EditorでShadertoyやGLSLのモデリングが劇的に簡単に！ - Qiita
21年5月30日に、SDF Editorのソースコードが公開され、 より簡単にGLSL用のコードが出力できるようになりました。 下記記事をごらんいただき、本記事は下記記事の参考としてください。 【改良版】SDF EditorでShadertoyやGLSLのモデリングが劇的に簡単に！ 21/05/25 この記事に続く完結編です->https://qiita.com/quittardis/items/488ec98983367ce1bd78 2日前にQuiitaにポストしたばかりhttps://qiita.com/quittardis/items/7a0d23359fcebaeb21a6 であるが、"SDF Editor" https://joetech.itch.io/sdf-editor からなんとかGLSLコードをひねりだす工夫だが、前のより良いアプローチがあったので紹介する。 以前のバ
Info | phi16
Email : phi16.256@gmail.com Twitter : @phi16_ GitHub : phi16 Steam : phi16 NEORT : phi16 Shadertoy : phi16 Qiita : phi16 Discord : phi16#1139 Hatena Blog : Imaginantia Booth : phi16 / Imaginantia VRChat : phi16 連絡はTwitterが有り難いです。
TouchDesignerでGLSLを扱っている人は多いと思いますが、GLSL事始め的なエントリが少ないことに気づいたのでメモ代わりに書いておきます。 サンプルコードはこちら。 TouchDesignerでGLSLを扱うためのノード TouchDesignerではGLSLを扱うためのノードが3つ用意されています。 GLSL MATとGLSL TOP、GLSLMulti TOPの3つです。 GLSL MAT GLSL MATは最も一般的なシェーダになります。 TouchDesignerにおけるGeometry COMP、Camera COMP、Light COMPと連携し、Renderへの描画処理を記述していくものです。 記述が簡単になる独自関数やCamera COMPやLight COMPと簡単に連携できる変数がすでに準備されているため、詳細はwikiのWrite a GLSL Mater
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
Inigo Quilez
Intro One of the basic building blocks of Signed Distance Field (SDF) modeling based on basic primitives (as opposed to Grids or Neural Networks) is the Smooth-Minimum operator or Smooth-Union. This is similar to a regular Minimum/Union operator, but, well "smooth". This means that where the regular or non-smooth Minimum/Union takes two input SDFs a and b and returns the closest one of the two, ef
dFdxとdFdyとは GLSL1.1以降からdFdx/dFdyという組み込み関数が使えるのですが、そこまで使う機会がないため、使い方を知っている方は少ないかもしれません。 dFdx/dFdyはスクリーンのX方向・Y方向の偏微分を計算するフラグメントシェーダの関数です。 偏微分というと、難しそうな印象を受けるかもしれませんが、単なるスクリーン上の画素値（本当は任意の値）の差分です。 この記事では、dFdx/dFdyの使い方をエッジ検出の実例を踏まえて解説します。 なお、WebGLでdFdx/dFdyを使用するためには、gl.getExtension("OES_standard_derivatives")と拡張を有効にする必要があります。 dFdxとdFdyでお手軽エッジ検出！ dFdx/dFdyに関しては、難しいことを考えずに実例を見たほうが分かりやすいです。 今回はShadertoyで動
JavaScriptoon2</title> <meta name="Subject" content=""> <meta name="Keywords" content=""> <meta name="Author" content="TechBooster"> <meta name="Creator" content="LaTeX with hyperref package"> <meta name="Producer" content="dvipdfm"> <meta name="CreationD
JavaScriptoon2 TechBooster 著 2016-01-28 版 TechBooster 発行 はじめに JavaScriptoo2 を手に取っていただき、ありがとうございます。本書は、Web テクノロジ を追う上で欠かせないホットなトピックスを集めています。最新の Web アプリケーション フレームワーク Angular2、リアルタイムコミュニケーションを可能にする WebRTC、グラ フィックス技術である WebGL、C/C++ を Web で使うための Emscripten などなど注目技術 を集めました。目まぐるしく変わる Web ステージでガチバトル！ （発行代表 @mhidaka） 本書の内容について • Web アプリケーションフレームワーク Angular2 の導入と解説 • イカデンワの作者が解説する WebRTC • シェーダだけでレンダリングす
Twitter: @The_ArtOfCode Facebook: https://www.facebook.com/groups/theartofcode/ Patreon: https://www.patreon.com/TheArtOfCode PayPal Donation: https://paypal.me/theartofcode I did an effect a little while ago that shows rain dripping down a window. I figured it could be good to use in a game perhaps but since it was made in ShaderToy, and ShaderToy is not used for game development, I figured I wo
Malt is a fully customizable real-time rendering framework for animation and illustration.
Malt Malt is a fully customizable real-time rendering framework for animation and illustration. It's aimed at artists who want more control over their workflow and/or their art style, with special care put into the needs of stylized non photorealistic rendering. Designed as a community effort to expand the possibility space of 3d rendering, it provides graphics programmers and technical artist an
メガデモ勉強会2021で発表しました | gam0022.net
昨日の2/14（バレンタインデー）に開催されたThe Tokyo Demo Fest team presents: メガデモ勉強会2021に参加しました。 私は「64KBのWebGLデモを実装する技術とデモ制作から得た『学びと発見』」というタイトルで発表を行いました。 発表スライドはこちらです。 本日の #メガデモ勉強会 の発表資料です！ Revision2020のPC 64K Introで優勝したデモ作品『RE: SIMULATED』を題材にして、効率的なデモ制作に必要なエディタ機能やWebGLのプロジェクトの構成、制作中に直面した問題と解決について解説しました。 レイマーチングはいいぞ！https://t.co/QWHOXHmZqu — がむ (@gam0022) February 14, 2021 Revision2020のPC 64K Introで優勝したデモ作品『RE: SIMU
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
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
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Unity Shader入門した頃の自分に教えたい事 - Qiita
VRChatを始めて二年が経ちました - Butadiene Works
Signed Distance Field Rendering Journey Pt.2
Presentations - WebGL Public Wiki
2DGI #1 - Global Illumination in Godot
クリエイティブコーディングをしよう！【その１】GLSLで遊ぶ
Painting a Character with Maths
My toy renderer, part 1: Keep it simple
GLSLで描くHyperbolic Tessellation - 心鏡曼荼羅
shader で音を鳴らして遊んでみた。 - DeNA Design
TouchDesignerでGLSLを扱うには - Qiita
dFdxとdFdyでわずか4行のお手軽エッジ検出！ - Qiita
Making a rainy window in Unity - Part 1