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

Question

我正在尝试更改我的三角形颜色，但它没有 happen.When 我按下 'k' 必须是随机的 color.Is 基本上有任何方法可以完成此任务或不同 ways.Here 是我的代码；

<!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 时，它会显示警报但不会改变三角形的颜色。

Answer 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>

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

How to change object color with keyboard in WebGL?

javascript

webgl