Webgl shader into three js

Hi all,
so i have this pretty neat shader mouse thing made with webgl: https://codepen.io/uiunicorn/pen/QWmBXzy

and im wondering what would be the best way of integrating it into a canvas thats running three?
thanks in advance

it is neat, indeed :heart_eyes: who wrote it?

I can’t even remember where i got it from as i’ve had it a few years now you’ll probably find it on google though!

calling renderer.state.reset() before/after renderer.render(scene, camera) might help to keep them happy with each other, also you will need to turn renderer.autoClear off and think when to clear the canvas.

might be a stupid question but how would i go about having just one render loop requesting a frame

well obviously you will need to ctrl+f in your codepen code their reqAnimFrame function and call it from 3js animation loop instead of passing it to reqAnimFrame directly.

also the part where webgl context is created, you will have to get it from the renderer (or pass it to the renderer)

https://rachelbhadra.github.io/smoke_simulator/smoke_sim/index.html

https://fluid-threejs.netlify.app/

FluidsGL-master.zip (154.4 KB)