Hi I have tried for a week to get this code to work now but I only get a white screen when trying to move all the canvas and texture. Maybe I can find some help here. I marked the few lines i suspect might be good to move out of the main loop with “!!!” So basically i just want to avoide re-creat…

Creating DOM canvas element inside the animation loop is not a good idea. When I try to fix your code, I see a green square moving diagonally inside black area (from top-left to bottom-right corner). Is this what it is supposed to look like? https://codepen.io/boytchev/full/MWqKYGg [image]

Hi, yes that’s correct, I wanted to draw the canvas and apply a shader for the full canvas in 60 fps. That was amazingly quick you saved my sanity as I was trying to understand what I was doing wrong for days. You’re correct about the DOM are there any other suggestion to watch our for when using t…

The final goal iis to try to apply this particular shadertoy shader Shader - Shadertoy BETA on the canvas so I am trying to learn how to convert toyshadesr into the GLSL that three.js wants.

[image] Kim2017: I am trying to learn how to convert toyshadesr into the GLSL that three.js wants. related Easy cool vsual effect to apply to an existing image texture while a replacement image is loading? - #5 by hofk

It still seems difficult to understand how to write ontop of an already shaded screen. So you have some things not being affected.

Ran into pretty much the same issue (wanting to convert a shadertoy shader to an app) and figured out it was easier to simply drop threejs and use WebGL directly. Made a template for future uses (edit src/frag.glsl to get started): https://github.com/nmattia/webgl-shader-template

Shader on 2d canvas

Questions

hofk February 20, 2023, 5:14pm 5

Topic		Replies	Views
How to get canvas as a texture to 'chain' together shaders Questions textures	1	1775	June 9, 2020
Webgl shader into three js Questions shaders	6	1926	August 11, 2022
[Solved] How can I render a shader to a render target? Questions post-processing , render-target	7	4788	March 25, 2021
Bake glsl shader into a Texture? Questions textures , shaders	3	1730	December 5, 2022
Help Porting ShaderToy fragment to Three.js Questions textures , shaders , shadertoy	1	513	May 29, 2023

Shader on 2d canvas

Related topics