I am in the process of converting a hlsl shader I created with vvvv into a web version, and although I am new to web programming, I have decided that using three.js/webGL is the best approach.
Everything has been going smoothly so far, but I have hit a roadblock at the most challenging part, which involves texture feedback. Specifically, the output texture of one render pass needs to be the input texture for the next frame (a task easily achieved in vvvv using a "frameDelay" function).
To simplify things, let's say I want to increment the red component of a pixel by 0.1 in each frame (wrapping around from 0 to 1). How can I accomplish this in three.js?
I have not been able to find any examples of something similar being done. Through my research, I have learned that it should be possible in GLSL using techniques like "fbo pingpong" or "double-buffering," but I have had no success implementing them.
Before sharing all of my code, I would like to confirm the necessary steps. Any assistance would be greatly appreciated:
- Set up scene1 and geometry. - Create material1: the "red counter" shader. (- set up scene2 and material2.) - Set up 2 WebGLRenderTargets, Texture1 and Texture2.
- Render scene1 to Texture1, with Texture2 as a uniform input for material1. (- Render Texture1 to the screen using scene2/material2.) - Swap Texture1 with Texture2 and reset uniforms for material1.