# Webgl shader into three js

**URL:** <https://discourse.threejs.org/t/webgl-shader-into-three-js/41295>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [August 11, 2022, 12:18am UTC](https://discourse.threejs.org/t/webgl-shader-into-three-js/41295 "2022-08-11T00:18:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [August 11, 2022, 12:18am UTC](https://discourse.threejs.org/t/webgl-shader-into-three-js/41295/1 "2022-08-11T00:18:16Z")

</div>

Hi all,  
so i have this pretty neat shader mouse thing made with webgl: [https://codepen.io/uiunicorn/pen/QWmBXzy](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

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [August 11, 2022, 12:22am UTC](https://discourse.threejs.org/t/webgl-shader-into-three-js/41295/2 "2022-08-11T00:22:04Z")

</div>

it is neat, indeed 😍 who wrote it?

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [August 11, 2022, 12:28am UTC](https://discourse.threejs.org/t/webgl-shader-into-three-js/41295/3 "2022-08-11T00:28:10Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [August 11, 2022, 12:31am UTC](https://discourse.threejs.org/t/webgl-shader-into-three-js/41295/4 "2022-08-11T00:31:16Z")

</div>

> [@UI\_UNICORN](#):
>
> the best way of integrating it

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.

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [August 11, 2022, 12:41am UTC](https://discourse.threejs.org/t/webgl-shader-into-three-js/41295/5 "2022-08-11T00:41:54Z")

</div>

> [@makc3d](#):
>
> renderer.state.reset()

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

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [August 11, 2022, 12:55am UTC](https://discourse.threejs.org/t/webgl-shader-into-three-js/41295/6 "2022-08-11T00:55:42Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [August 11, 2022, 5:44am UTC](https://discourse.threejs.org/t/webgl-shader-into-three-js/41295/7 "2022-08-11T05:44:23Z")

</div>

[https://rachelbhadra.github.io/smoke\_simulator/smoke\_sim/index.html](https://rachelbhadra.github.io/smoke_simulator/smoke_sim/index.html)

> **[Stable Fluids with three.js | mofu-dev](https://mofu-dev.com/en/blog/stable-fluids/)**
>
> Misaki Nakano writes about the discoveries about WebGL, Shader, and 3DCG.

[https://fluid-threejs.netlify.app/](https://fluid-threejs.netlify.app/)

> **[GitHub - amsXYZ/three-fluid-sim: 🌊✒️ 2D Fluid Simulation three.js...](https://github.com/amsXYZ/three-fluid-sim)**
>
> 🌊✒️ 2D Fluid Simulation three.js implementation. Contribute to amsXYZ/three-fluid-sim development by creating an account on GitHub.

[FluidsGL-master.zip](https://discourse.threejs.org/uploads/short-url/18JP63hlJoxsAuVWgtb6g6D4Guc.zip) (154.4 KB)