Как изменить цвет объекта с клавиатуры в WebGL? - PullRequest
Новая
       0

Как изменить цвет объекта с клавиатуры в WebGL?

0 голосов
/ 27 октября 2018

Я пытаюсь изменить свой цвет треугольника, но этого не происходит. Когда я нажимаю '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 , он показывает мне предупреждение, но не меняет цвет треугольника.

1 Ответ

0 голосов
/ 27 октября 2018

Ваш треугольник отображается только один раз.Вы должны перерисовать треугольник при нажатии клавиши.

Создайте функцию, которая устанавливает значение единой переменной цвета и отображает треугольник: 

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 - Анимация : 

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:" + "" + gl.getShaderInfoLog(vertShdr) + "
"; alert (msg); console.log (msg); return -1;}} var fragElem = document.getElementById (фрагментShaderId); if (! FragElem) {alert (" Невозможно загрузить вершинный шейдер "+ фрагментShaderId); return -1;} else {fragShdr = gl.createShader (gl.FRAGMENT_SHADER); gl.shaderSource (fragShdr, fragElem.text); gl.compileShader (fragShdr); if (! gl.getShaderParameter (fragShdR, gl.COM))) {var msg = "Фрагмент шейдера не удалось скомпилировать.Журнал ошибок: "+" 
" + gl.getShaderInfoLog(fragShdr) + "
"; alert (msg); console.log (msg); return -1;}} var program = gl.createProgram (); gl.attachShader (program, vertShdr); gl.attachShader (программа, fragShdr); gl.linkProgram (программа); if (! gl.getProgramParameter (program, gl.LINK_STATUS)) {var msg = "Шейдерной программе не удалось установить связь.Журнал ошибок: "+" 
" + gl.getProgramInfoLog(program) + "
"; предупреждение (msg); console.log (msg); return -1;} возвращение программы;} 
<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>
...