如何将制服传递给着色器?我做错了什么？
如何将制服传递给着色器?我做错了什么？
提问于 2016-01-23 01:13:12
我试着用WebGL学习Javascript，试着在互联网上搜索和阅读，并学习如何使用它，但我似乎就是不知道我做错了什么。
var canvas;
var gl;
var points = [];
var numCirclePoints = 30;
var radius = 0.5;
function init() {
dostuff();
setInterval(dostuff, 1000);
}
function dostuff() {
points = [];
var x = Math.random();
var y = Math.random();
var xLocation;
var yLocation;
var center = vec2(x, y);
// End of shenanigans
canvas = document.getElementById("gl-canvas");
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) {
alert("WebGL isn't available");
}
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(1.0, 1.0, 1.0, 1.0);
//
// Load shaders and initialize attribute buffers
//
var program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
//console.log(center);
points.push(center);
createCirclePoints(center, radius, numCirclePoints);
var vBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
xLocation = gl.getUniformLocation(program, "x");
yLocation = gl.getUniformLocation(program, "y");
render();
}
window.onload = init;
// Create the points of the circle
function createCirclePoints(cent, rad, k) {
var dAngle = 2 * Math.PI / k;
for (i = k; i >= 0; i--) {
a = i * dAngle;
var p = vec2(rad * Math.sin(a) + cent[0], rad * Math.cos(a) + cent[1]);
points.push(p);
}
}
function render() {
gl.clear(gl.COLOR_BUFFER_BIT);
gl.uniform1f(xLocation, x);
gl.uniform1f(yLocation, y);
// Draw circle using Triangle Fan
gl.drawArrays(gl.TRIANGLE_FAN, 0, numCirclePoints + 2);
window.requestAnimFrame(render);
}
Here 's the HTML I suspect my lack of knowledge in this shines there.
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
uniform float x;
uniform float y;
void
main()
{
gl_Position = vPosition;
gl_Position.x += x;
gl_Position.y += y;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void
main()
{
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}<html>
<head>
<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="initShaders.js"></script>
<script type="text/javascript" src="MV.js"></script>
<script type="text/javascript" src="dop.js"></script>
</head>
<body>
<canvas id="gl-canvas" width="512" height="512">> Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>
所以，我唯一想做的就是把x变量变成一个统一的变量，但是我做不到！我不知道怎么解决这个问题。
回答 1
Stack Overflow用户
发布于 2016-01-23 01:42:03
您将在dostuff中获取着色器程序中制服的位置
dostuff(){
var xLocation;
...
xLocation = gl.getUniformLocation( program, "x");
...
}然后，您将尝试在render中使用它
function render() {
...
gl.uniform1f(rndLocX, rndX);
...
}第一个问题是您在render中没有对xLocation的作用域访问权限，因为它是在dostuff中声明的。快速解决方法是将作用域向上移动。在声明numCirclePoints的地方旁边声明xLocation。
我认为正在发生的第二个问题是您没有正确地使用uniform1f。签名是：
uniform1f(the_uniform_location, the_uniform_value);因此，如果您的范围正确，基本流程将是：
var xLocation = gl.getUniformLocation(program, "x");
var myRandX = Math.random() * (5);
gl.uniform1f(xLocation, myRandX);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34952379
复制相关文章
相似问题
腾讯云开发者
