个人中心
gpt4 book ai didi

javascript - 如何在 WebGL 中使用键盘更改对象颜色？

转载 作者：行者123 更新时间：2023-11-29 23:15:13 27 4
gpt4 key购买 nike

我正在尝试更改我的三 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/

27 4 0
文章推荐： Javascript:时间表，将第一个单元格设为空白，试图获得此输出
文章推荐： javascript - javascript 中的闰秒在哪里？
文章推荐： javascript - 尝试使用 aws rails 5.2 的 shrine direct_upload 实现拖放直接上传时出现问题
文章推荐： javascript - 带有 if 的球动画
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com