Posted on 2019/08/16, 4:08 PM By admin22
最近またGLSLを復習する目的で過去のコードを眺めていたところ、ProcessingでGLSLを動かす環境が、WebGLのGLSLSandboxの再現しやいと思い、試してみました。
上記サイトのコードを使って再現します。
環境: Processing 3.3.7 / Mac
fshader.glsl
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
uniform float time; uniform vec2 mouse; uniform vec2 resolution; const float PI = 3.14159265358979; const float num = 2.0; void main( void ) { vec2 pos = ( gl_FragCoord.xy / resolution.xy ); vec3 color = vec3(0.05, 0.05, 0.2); float r, g, b, cl; cl += 0.5/abs(length(vec2( pos.x-0.5+cos(time*0.3)*0.1 - mouse.x * 0.1, pos.y-0.5+sin(time*0.3)*0.1 + mouse.y * 0.1 ))-0.3); r = cl * color.x; g = cl * color.y; b = cl * color.z; gl_FragColor = vec4(r, g, b, 1.0 ); } |
mouseの動きで変化をつける部分を追加しました。
このフラグメントシェーダプログラムをProcessingから呼び出します。
このブログラムと同じ階層にdataフォルダを作りその中にシェーダプログラムをおきます。
GraphicsサンプルのLowLevelGLVboSeparateなどが参考になります。
(modes/java/examples/Demos/Graphics/LowLevelGLVboSeparate)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
PShader sh; void setup() { size(400, 400, P2D); sh = loadShader("fshader.glsl"); } void draw() { sh.set("time", millis() / 1000.0); sh.set("resolution", (float)width, (float)height); sh.set("mouse", (float)mouseX/(float)width, (float)mouseY/(float)height); shader(sh); rect(0, 0, width, height); } |
実行結果
当然ですが、GLSL Sandboxと違って、バーテックスシェーダも使えます。
グラフィックアートを表現する方法として、ProcessingではGLSLに頼らなくてもかなりのことはできるのですが、GLSLという並列プログラミングの手法のトレーニング環境として興味深いものと思っています。
Categories: Graphics タグ: GLSL