patriciogonzalezvivo / glslEditor

Simple WebGL Fragment Shader Editor
http://editor.thebookofshaders.com
MIT License
2.36k stars 242 forks source link

how to set external uniforms #94

Closed gummikonsumer closed 2 months ago

gummikonsumer commented 2 months ago

Hi, I am working on a simple web-editor for shaders used in recur, which is open hardware, based around a fork of glslviewer. It has video textures & some analog inputs that it provides as uniforms, so i need to do same on web.

Screenshot 2024-09-09 at 7 11 11 PM

In this screenshot, the controls on the right are for these:

uniform sampler2D u_tex0;
uniform sampler2D u_tex1;

uniform float u_x0;
uniform float u_x1;
uniform float u_x2;
uniform float u_x3;

I can work out things like "set sampler2D uniform from video" and "turn this knob into float value", main thing I need to understand is how to hook into the actual uniforms (u_x0 for example.)

My code looks like this:

const glslEditor = new GlslEditor('#glsl_editor', {
  canvas_size: 500,
  canvas_draggable: true,
  theme: 'monokai',
  multipleBuffers: true,
  watchHash: false,
  fileDrops: true,
  menu: true,
  indentUnit: 2,
  tabSize: 2,
  indentWithTabs: false,
  frag
})

I tried:

glslEditor.setUniform('u_x0', 0.5)
glslEditor.shader.setUniform('u_x0', 0.5)

and both error that setUniform is not defined.

How do I set a uniform-value of the current-running shader? I assume it's something off glslEditor object, but I don't see anything that looks right.

gummikonsumer commented 2 months ago

Ah! I solved my prob, sorry for the noise. For others:

glslEditor.shader.canvas is an instance of glslCanvas, so you can do this:

glslEditor.shader.canvas.setUniform('u_x0', 0.5)