0
votes

i'm trying to realize a web version of a hlsl shader i've made (with vvvv)- i'm rather new to web programming but found three.js/webGL would be the way to go.

so far everything is working out ok, but now I'm stuck at the most complex part, which involves texture feedback: the output texture of a renderpass is it*s input texture in the next frame (very easy to do in vvvv using a "frameDelay" function")

to make this as easy as possible let's say i want to add 0.1 to the red component of a pixel in each frame (modulo 1.0 of course)- so red values keep looping from 0 to 1.....how would i do that in three.js?

i couldn't find any example realizing something similar; from searching the web/this site i've learned it should generally be possible (in GLSL) using "fbo pingpong" or "double-buffering", but i got no luck in implementing that....

so before posting all code i'd like to confirm the necessary steps, any help much appreciated:

-setup scene1 + gemoetry -setup material1: "red counter" shader (-setup scene2 and material2) -setup 2 WebGLRenderTargets Texture1 + Texture2

-render scene1 to Texture1, with Texture2 as uniform input for material1 (-render Texture1 to Screen (using scene2/material2)) -swap Texture1 with Texture2 and (re-)set uniforms for material1

1

1 Answers

0
votes

I've succeeded in doing a feedback loop in three.js using fbo texture swapping aka pingpong, which (as always) brought up new questions- for anybody else trying to achieve texture feedback have a look at my new question where I've posted the code (in the render loop you can delete the if statement and only keep what's in the else block).