S.F. Page

Programming,Music,etc...

シェーダーコードを書く

8bitコンピュータ風コンソール画面をthree.jsに移植する。

以前WebGLで作って放置していた8bitコンピュータ風コンソール画面をthree.jsに移植してみた。 function sf10328749687196045071() { let doc = document.getElementById('sf10328749687196045071'); doc.height = doc.offsetWidth * 200 / 320; } window.add…

レイマーチングを学ぶ

3Dグラフィックスもままならないのに、レイマーチングに手を出そうという。 レイマーチングとはレイトレーシングの一種だとのことだ。レイトレの高速アルゴリズム版、DFTに対するFFTのようなものか。 コードはとても簡素だけど、生成した画像をは恐ろしく…

sound - acid jam - GPUによる音声の生成?

ShaderToyはSoundタブがあって、そこでGLSLで音声処理を書くことができる。vec2 mainSound(float time)の引数が時間、返り値はステレオサンプルである。mainSound()で音声処理を書いてvec2でステレオサンプルを返せば、音が鳴る。例えば下の動画は、音声サン…

プラズマ - なんとなく書いたシェーダー・コード

昔のメガデモ等でよく見たプラズマ。これは「GLSL 2D Tutorials」のチュートリアルのコードのまんまだけれども。 3d_codes/src/00003 at gh-pages · sfpgmr/3d_codes · GitHub { let doc = document.getElementById('sf10328749687194148357'); doc.height =…

なんとなく書いたシェーダー・コード

偶然できました。 { let doc = document.getElementById('sf00002'); doc.height = doc.offsetWidth * 9 / 16; } 3d_codes/src/00002 at gh-pages · sfpgmr/3d_codes · GitHub どうも回っているものを見ると酔いますな。。ずっと見ていると遊園地のコーヒー…

ちょっとまあ、書いたシェーダー・コードの公開環境をgithub pagesに作った。

私のはShadertoyに載せるにはレベルが低すぎるので。。とりあえず1つめはこれ。 { let doc = document.getElementById('sf10328749687193382251'); doc.height = doc.offsetWidth * 9 / 16; } 3d_codes/src/00001 at gh-pages · sfpgmr/3d_codes · GitHub S…

フラグメント・シェーダー(Shadertoy)で2D Line(線分)を描く

フラグメント・シェーダー(Shadertoy)で線分を書いてみようと思った。 Shadertoyのフラグメント・シェーダーは描画するピクセルごとにmainImage(out vec4 fragColor, in vec2 fragCoord)が呼ばれる。画面のピクセル個数分このmainImage()が呼ばれるのである…