Threer.js Shader issue

Questions
1

Hello webgl experts.
I would like to use console.log() in three.js shader code, or something similar with that.
Of course I know that console.log() is imporsible in glsl code.

My idea is to use Uniform.
First. declare a uniform in javascriop.
Second. change it’s value to something you want to show in console.
Then, detect the uniform value is changed in javascript.

Please let me know if this is possible.

2

Hi!
There are more questions, than answers.

How do you instantiate the uniform?
How do you change its value?
How do you use this uniform?

Any chance to demonstrate it with a minimal working example?

3

Now, I’m seeking solution.
But I think you can change the uniform value in your glsl code using something like:

UniformsUtils.setValue(myUniformValue, 0.5);
glUniform1f(myUniformValue, 0.5);

4

:thinking: There is no .setValue() method in UniformsUtils

let someUniform = {value: 1}; // instantiate
console.log(someUniform);

someUniform.value = 2; // change
console.log(someUniform);

That’s all what you do with uniforms.

5

So, is there any way to change uniform value in shader code?

6

It’s hard to help, having no code that demonstrates what and how you do.

7

No, this shader code will generate an error:

uniform float my_uniform;

void main() {
    my_uniform += 0.2;
}

if you need to use a modified value of a uniform in the shader code, you can do this:

uniform float my_uniform;

void main() {
    float my_new_uniform = my_uniform + 0.2;
}

you can not print my_new_uniform using JavaScript, the best you can do is to map the value into the [0,1] range and set it as the output pixel color in the fragment shader, then pick it up from the screen.

Uniform values for THREE are simply JavaScript variables as any other, you can track changes in their values by any JavaScript means available, this has nothing to do with 3D.