Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

setUniform not working #67

Open
RainCatalyst opened this issue Aug 14, 2020 · 4 comments
Open

setUniform not working #67

RainCatalyst opened this issue Aug 14, 2020 · 4 comments

Comments

@RainCatalyst
Copy link

Here is a minimal reproducible example of the issue. I should get just a gray canvas but it looks like u_gray uniform is always zero. Am I doing something wrong?

index.js

var canvas = document.getElementById('glslCanvas');
var sandbox = new GlslCanvas(canvas);
sandbox.setUniform("u_gray", 0.5);

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
	<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js"></script>
    </head>
    <body>
	<canvas id="glslCanvas" class='glslCanvas' data-fragment-url="shader.frag" width="512" height="512"></canvas>
	<script type="text/javascript" src="index.js"></script>
    </body>
</html>

shader.frag

precision mediump float;

uniform float u_gray;

void main() {
  gl_FragColor = vec4(vec3(u_gray), 1.0);
}
@2nafish117
Copy link

Yep, have the same issue. The js console says Uncaught TypeError: Cannot read property 'useProgram' of undefined at GlslCanvas.uniform (GlslCanvas.js:1769) at GlslCanvas.setUniforms (GlslCanvas.js:1729) at GlslCanvas.setUniform (GlslCanvas.js:1716)

@myreauks
Copy link

I have the same issue with setUniform, although I do not get errors. The value just does no transfre to the shader.
Here is my code:
` var canvas = document.getElementById("glslCanvas");

    if (canvas) {
        const sandbox = new GlslCanvas(canvas);
        let hue = 1.5;
        sandbox.setUniform('u_hue', hue);
    }`

@bnlcas
Copy link

bnlcas commented Oct 20, 2022 •
edited
Loading

I'm having the same issue. The GlslCanvas is not correctly updating the list of uniforms for me (Chrome 106 - caching disabled).

One quick thing that I noticed is that the canvas style's background color is being set to canvas.style.backgroundColor = "rgba(1, 1, 1, 0)" sometime after loading.
Adding canvas.style.backgroundColor = "rgba(1, 1, 1, 1)" did at least make it appear. Something fishy.

Will report any progress on this.

@thisisseb
Copy link

I having the same issue. As a workaround, I noticed that setting uniforms works fine when loading the fragment manually using sandbox.load(), with the call to the load method before the call(s) to setUniform.

So for now to get around the issue, I'm doing something like this, which seems to work well for me:

const canvas = document.querySelector('#my-canvas');
const sandbox = new GlslCanvas(canvas);

document.addEventListener('DOMContentLoaded', () => {
  fetch(`/path/to/shader.frag`)
    .then(res => res.text())
    .then(fragmentText => {
      sandbox.load(fragmentText);
      sandbox.setUniform('u_brightness', 0.5);
    });
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@bnlcas @2nafish117 @RainCatalyst @myreauks @thisisseb