我正在尝试更改我的三角形颜色，但是没有发生。当我按'k'时，必须是随机颜色。有没有什么方法可以基本上或以其他方式执行此任务。
<!DOCTYPE html>
<html>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main() {
gl_Position = vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
</script>
<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="b.js"></script>
<body>
<canvas id="gl-canvas" width="640" height="360" style="border: solid;"></canvas>
</body>
还有我的脚本代码；
var gl;
var color = [0.0, 0.0, 1.0, 1];
window.onload = function init() {
var triangle = new Float32Array(
[ 0.2 , -0.4,
0.8, -0.4,
0.5, 0.5 ]);
var 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);
program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
var colorLocation = gl.getUniformLocation(program, "u_color");
gl.uniform4fv(colorLocation, color);
var vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData( gl.ARRAY_BUFFER, triangle, gl.STATIC_DRAW );
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
window.addEventListener("keydown", checkKeyPressed); }
function checkKeyPressed(e) {
if (e.keyCode == "84") {
color = [Math.random(), Math.random(), Math.random(), 1];
alert("t pressed");
}
}
当我按 t 时，它向我显示警报，但不会更改三角形的颜色。
答案 0 :(得分：1)
您的三角形仅渲染一次。按下键时，您必须重新绘制三角形。
创建一个函数，该函数设置颜色均匀变量的值并呈现三角形：
function render(time_ms) {
gl.clear(gl.COLOR_BUFFER_BIT);
var colorLocation = gl.getUniformLocation(program, "u_color");
gl.uniform4fv(colorLocation, color);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
使用requestAnimationFrame来触发render功能。另请参见WebGLFundamentals - Animation：
function checkKeyPressed(e) {
if (e.keyCode == "84") {
color = [Math.random(), Math.random(), Math.random(), 1];
alert("t pressed");
requestAnimationFrame( render );
}
}
注意，或者，您也可以连续重绘三角形：
function render(time_ms) {
gl.clear(gl.COLOR_BUFFER_BIT);
var colorLocation = gl.getUniformLocation(program, "u_color");
gl.uniform4fv(colorLocation, color);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame( render );
}
我将更改应用于您的原始代码，请参见示例：
var gl, program;
var color = [0.0, 0.0, 1.0, 1];
window.onload = function init() {
var triangle = new Float32Array(
[ 0.2 , -0.4,
0.8, -0.4,
0.5, 0.5 ]);
var canvas = document.getElementById("gl-canvas");
gl = canvas.getContext( "experimental-webgl" );
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);
program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
var colorLocation = gl.getUniformLocation(program, "u_color");
gl.uniform4fv(colorLocation, color);
var vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData( gl.ARRAY_BUFFER, triangle, gl.STATIC_DRAW );
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
window.addEventListener("keydown", checkKeyPressed);
requestAnimationFrame( render );
}
function render(time_ms) {
gl.clear(gl.COLOR_BUFFER_BIT);
var colorLocation = gl.getUniformLocation(program, "u_color");
gl.uniform4fv(colorLocation, color);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame( render );
}
function checkKeyPressed(e) {
if (e.keyCode == "84") {
color = [Math.random(), Math.random(), Math.random(), 1];
}
}
function initShaders(gl, vertexShaderId, fragmentShaderId) {
var vertShdr;
var fragShdr;
var vertElem = document.getElementById(vertexShaderId);
if (!vertElem) {
alert("Unable to load vertex shader " + vertexShaderId);
return -1;
} else {
vertShdr = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShdr, vertElem.text);
gl.compileShader(vertShdr);
if (!gl.getShaderParameter(vertShdr, gl.COMPILE_STATUS)) {
var msg = "Vertex shader failed to compile. The error log is:" + "<pre>" + gl.getShaderInfoLog(vertShdr) + "</pre>";
alert(msg);
console.log(msg);
return -1;
}
}
var fragElem = document.getElementById(fragmentShaderId);
if (!fragElem) {
alert("Unable to load vertex shader " + fragmentShaderId);
return -1;
} else {
fragShdr = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShdr, fragElem.text);
gl.compileShader(fragShdr);
if (!gl.getShaderParameter(fragShdr, gl.COMPILE_STATUS)) {
var msg = "Fragment shader failed to compile. The error log is:" + "<pre>" + gl.getShaderInfoLog(fragShdr) + "</pre>";
alert(msg);
console.log(msg);
return -1;
}
}
var program = gl.createProgram();
gl.attachShader(program, vertShdr);
gl.attachShader(program, fragShdr);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
var msg = "Shader program failed to link. The error log is:" + "<pre>" + gl.getProgramInfoLog(program) + "</pre>";
alert(msg);
console.log(msg);
return -1;
}
return program;
}<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main() {
gl_Position = vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}
</script>
<canvas id="gl-canvas" width="640" height="360" style="border: solid;"></canvas>