glslCanvas
glslCanvas copied to clipboard
patriciogonzalezvivo
setUniform not working
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);
}
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)
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);
}`
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.
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);
});
});
