我正在尝试更改我的三 Angular 形颜色，但它没有发生。当我按“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 时，它会显示警报，但不会改变三 Angular 形的颜色。
最佳答案
您的三 Angular 形只渲染一次。您必须在按下键时重新绘制三 Angular 形。
创建一个函数来设置颜色统一变量的值并渲染三 Angular 形:
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 );
}
}
请注意，您也可以连续重绘三 Angular 形:
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>关于javascript - 如何在 WebGL 中使用键盘更改对象颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53022366/