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

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

转载作者：行者123 更新时间：2023-11-29 23:15:13

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

文章推荐： javascript - javascript 中的闰秒在哪里？

文章推荐： javascript - 带有 if 的球动画

python - Pyinstaller & 键盘
我遇到了一个问题。我正在使用 pyinstaller 将代码导出到 .exe。代码包括 tkinter、PIL 和 keyboard 模块。软件在我使用 Python 的 PC 上运行完美，而在没有
STM32 HID 键盘
我正在尝试将 STM32F0-disco 用作 Windows PC 的键盘。正在打印的字符有问题。下面的代码等到板载按钮被按下，然后应该打印一次这三个字符。 /* USER CODE BE
iphone - 键盘 'Done'按钮上的Resign键盘
我想在单击键盘上的“完成”按钮时退出键盘。我怎样才能做到这一点？我有以下代码=> textView.returnKeyType = UIReturnKeyDone; 我有这个代码用于限制 TextVi
c - 键盘 Hook
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
Android 有没有办法在应用程序中调出自定义电话#键盘？
我想调出一个用于输入电话号码的键盘。有没有办法在我自己的 Activity 中显示此对话框并捕获用户输入的内容。我需要能够控制用户点击调用时发生的情况。所以我很感兴趣自定义允许用户输入电话号码的 Ac
布局顶部的 Android 键盘
我希望软键盘位于我的布局之上，而不是在它弹出时四处移动我的布局。我该怎么做呢？我查看了 list ，但从未设置 android:windowSoftInputMode="adjustResize" 此
C++ 键盘 Hook
主题:将某些键替换为另一个键值。例如如果我按 P，它应该是 F24。当我尝试从 .ini 文件加载键值时， Hook 不再是全局的。它仅在 winapi 窗体处于焦点时才有效。我的 DLL 代码
Android 键盘 - 开始小写
当我点击 EditText 时，是否可以用小写字母启动 android 键盘？基本上，我想要的是将 EditText 中的第一个字母小写，但也让用户可以根据需要将其变为大写...... (EditTe
隐藏按钮上的 IOS 键盘
我想监控 IOS 上的键盘隐藏按钮并触发一个事件。我在说: 我只想在用户按下实际按钮时进行监控。我不想要键盘隐藏时的事件。最佳答案用户键盘通知观察者.. 对于 swift NSNotificati
ios - 关闭具有多个文本字段的第一响应者/键盘
在经历了这一切之后就像认真的...... Easy way to dismiss keyboard? ...我有多个 TextFields 和一些 TextViews。有没有办法对所有文本字段进行批处
带有表情符号的 Android 键盘
所以我想在我的应用程序中添加一个键盘，其中包含表情符号，就像 Whatsapp 或环聊一样。我怎样才能做到这一点？我想保留我的键盘，因为我只想添加标签来放置表情符号。我认为软键盘很容易支持它，但到目前
ios - 如何创建自定义 iOS 键盘
首先，我会让您知道，我在 StackOverflow 以及 Google 和 Github 上查看了很多很多不同的帖子。我已经到处寻找对我有帮助的任何。但是，似乎没有任何效果。它要么已经过时(超过 1
java - 键盘 Action 监听器
当按下相应的键时，我试图让我的游戏中的宇宙飞船 (PlayerShip.gif) 向左、向右、向上和向下移动。我知道我需要一个 keyboardListener 但我在弄清楚它的去向以及它是如何实际实
usb - 隐藏式 USB 键盘
我正在尝试制作一个 HID USB 设备。我搜索了一下，发现键盘的输出有 8 个字节。第一个字节是修饰符，第二个字节是保留字节，其余 6 个字节是关键代码。我认为在某些情况下，例如“prtsc”，需要
Vim 和 azerty 键盘
我最近开始学习 Vim，在深入学习之前，我有一个问题需要回答。使用 AZERTY 键盘，我是否应该重新映射命令和快捷方式的键以适应 QWERTY 键盘的键位置？我之所以问这个，是因为显然在创建这些
keyboard - 如何使用 Dvorak 键盘？
我一直认为在使用 Dvorak 布局之前，我需要购买 Dvorak 键盘。但是我在亚马逊上找不到。仅仅是从 Qwerty 键盘上弹出键并移动它们吗？最佳答案为了帮助您了解键盘布局，您可以重新排列
iphone - 激活 iPhone 键盘
我不敢相信我还没有找到任何关于此的文档，但我想知道如何命令键盘激活并接收来自它的输入。我可以找到在编辑文本字段时操作弹出键盘的所有示例。谢谢最佳答案您还可以使用 UIKeyInput 协议(pro
iPhone 键盘 Shift 键已禁用
我有一个 UITextField，其中弹出的键盘已禁用其 Shift 键。键盘类型设置为 UIKeyboardTypeNamePhonePad，看起来应该允许大写。如果我将键盘类型更改为“默认”但保
delphi - 键盘 Hook 过程的问题
背景:我的表单有一个 TWebBrowser。我想用 ESC 关闭表单，但 TWebBrowser 吃掉了击键 - 所以我决定使用键盘 Hook 。问题是表单可以同时在多个实例中打开。无论我做什么
iphone - 定制 iPhone 键盘
我需要(即客户要求)提供自定义键盘，供用户在文本字段和区域中输入文本。我已经有一些可以执行键盘操作并将测试附加到文本字段的东西，但是我想让它更通用并让它像标准的 iphone 键盘一样工作，即当用户选

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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