Question

我希望我的javascript程序将三角形向右移动。我现在关注的是矩阵和绘制循环。我从未做过这样的事情，所以我可能会离开公路，但我试图做的事情，出于学习目的是这样的：

- 设置webgl管道，以便正确显示三角形（OK）

- 使用矩阵编写一个函数，允许我传入翻译的值（似乎没问题，但我不确定）

var translation_prototype = [1,0,0,0,
                             0,1,0,0,
                             0,0,1,0,
                             tx,ty,0,1];

暂时离开缩放和模型视图，因为我非常高兴（仅仅为了练习）和webgl提供的正交视图。

- 设置一个循环遍历drawArrays的循环（即使在这里我不确定循环是否在正确的位置开始和结束）

我怀疑我真的很接近，但三角形并没有移动（tx保持不变）。

这里是代码（我想我甚至不需要清除颜色和深度缓冲区，因为我只是在x轴上进行平移）

＆＃13;

    <!DOCTYPE HTML>
    <html>
        <canvas id = "can" width="400" height="400">
        </canvas>
    
        <script>
            var webgl_canvas = document.getElementById('can');
            var gl = webgl_canvas.getContext('experimental-webgl');
            var triangles = [-0.8,-0.8,0,0.8,-0.8,0,0,0.8,0];
            var vertexBuffer = gl.createBuffer();
            var tx = 0.1;
            var ty = 0;
            var translation_prototype = [1,0,0,0,
                                         0,1,0,0,
                                         0,0,1,0,
                                         tx,ty,0,1]; 
            
            var vertexShader_source = 'attribute vec3 a_position;' + 'uniform vec4 u_translation;' + 'void main() { gl_Position = u_translation * vec4 (a_position,1);}';
            var fragmentShader_source = 'precision mediump float;' + 'void main() { gl_FragColor = vec4 (0.9,0,0.1,1); }';

            function getTimeInSeconds () {
                return Date.now() * 0.001;
            }
            
            function makeTranslation (tx, ty) {
                return translation_prototype;  
            }
            
            //Compile shaders
            var buildShader = function (shaderSource, typeOfShader) {
                var shader = gl.createShader(typeOfShader);
                gl.shaderSource(shader, shaderSource);
                gl.compileShader(shader);
                if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                    alert (gl.getShaderInfoLog(shader));
                }
                return shader;
            }
            
            var compiledVertexShader = buildShader (vertexShader_source, gl.VERTEX_SHADER);
            var compiledFragmentShader = buildShader (fragmentShader_source, gl.FRAGMENT_SHADER);
            
            //setup GLSL program
            program = gl.createProgram();
            gl.attachShader(program,compiledVertexShader);
            gl.attachShader(program,compiledFragmentShader);
            gl.linkProgram(program);
            
            //Fill the buffer with vertex data
            
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(triangles), gl.STATIC_DRAW); 
            vertexBuffer.itemSize = 3;
            vertexBuffer.numItems = 3;

            gl.clear(gl.COLOR_BUFFER_BIT);
            var positionLocation = gl.getAttribLocation(program,"a_position");
            gl.enableVertexAttribArray(positionLocation);
            gl.useProgram(program);
            var shaderTranlsationMatrix = gl.getUniformLocation(program, "u_translation");
            gl.uniformMatrix4fv(shaderTranlsationMatrix,false,new Float32Array(translation_prototype));
            gl.vertexAttribPointer(positionLocation, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
        
            var startTime = 0;
            function animate (time) {
                //Draw loop
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
                var deltaTime = (time - startTime);
                makeTranslation((tx*deltaTime),(ty*deltaTime));
                console.log(tx,ty,deltaTime);
        
                gl.drawArrays (gl.TRIANGLES, 0, vertexBuffer.numItems);
                startTime = time;
    
                window.requestAnimationFrame(animate);
            }
    
            animate(0);
        </script>
    </html>

＆＃13;

<!-- start last edited snippet -->


<!DOCTYPE HTML>
<html>

<canvas id = "can" width="400" height="400">

</canvas>


<script>
var webgl_canvas = document.getElementById('can');
var gl = webgl_canvas.getContext('experimental-webgl');

var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,0,1,-1,0,0,1,0]), gl.STATIC_DRAW); 

vertexBuffer.itemSize = 3;
vertexBuffer.numItems = 3;

var identityMatrix = [1,0,0,0,
                      0,1,0,0,
                      0,0,1,0,
                      0,0,0,1];

function translation (tx,ty,tz) {
    return [1,0,0,0,
            0,1,0,0,
            0,0,1,0,
           tx,ty,tz,1]
}


var vertexShader_source = 'attribute vec3 a_position;' + 'uniform mat4 u_move;' + 'void main() { gl_Position = u_move * vec4 (a_position,1); }';
var fragmentShader_source = 'precision mediump float;' + 'void main() { gl_FragColor = vec4 (0.9,0,0.1,1); }';







//Compile shaders
var buildShader = function (shaderSource, typeOfShader) {
var shader = gl.createShader(typeOfShader);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert (gl.getShaderInfoLog(shader));
}
return shader;
}

var compiledVertexShader = buildShader (vertexShader_source, gl.VERTEX_SHADER);
var compiledFragmentShader = buildShader (fragmentShader_source, gl.FRAGMENT_SHADER);

//setup GLSL program
program = gl.createProgram();
gl.attachShader(program,compiledVertexShader);
gl.attachShader(program,compiledFragmentShader);
gl.linkProgram(program);



var positionLocation = gl.getAttribLocation(program,"a_position");
gl.enableVertexAttribArray(positionLocation);
gl.useProgram(program);


var tx = 0, ty = 0, tz = 0;
var translate = gl.getUniformLocation (program, "u_move");
gl.uniformMatrix4fv(translate,false,new Float32Array(identityMatrix));
gl.vertexAttribPointer(positionLocation, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);

//Draw
var start_time =0;
var animate=function(time) {
var dt= time-start_time;
tx+=0.5;
translation((dt*tx),0,0);
console.log(dt);
console.log(tx);
start_time=time;
gl.drawArrays (gl.TRIANGLES, 0, vertexBuffer.numItems);
window.requestAnimationFrame(animate);
}
animate(0);
</script>

</html>

<!-- end last edited snippet -->

Answer 1

以下是工作代码段

<强> JSFIDDLE

您的顶点着色器应如下所示：

attribute vec3 a_position;' + 'uniform mat4 u_translation;' + 'void main() { gl_Position = u_translation*vec4 (a_position,1);}

为了使对象在空间中移动，您必须将所有向量和矩阵乘以位置向量以获得结果。 Tranlation Wiki

您必须在每个循环周期更新translation_prototype变量：

    deltaTime += 0.005;
    makeTranslation(tx+deltaTime,ty+deltaTime);

deltaTime在循环外声明并在每个循环中递增

您的makeTranslation功能也应如下所示：

function makeTranslation (x, y) {
    translation_prototype = 
            [1,0,0,0,
             0,1,0,0,
             0,0,1,0,
             x,y,0,1]
    return translation_prototype;  
}

（如果使用全局变量，可以删除return语句，但建议使用局部变量）

（我必须尝试这个新的代码段功能：D）

＆＃13;

 var webgl_canvas = document.getElementById('can');
    var gl = webgl_canvas.getContext('experimental-webgl');
    var triangles = [-0.5,-0.5,0,0.5,-0.5,0,0,0.5,0];
    var vertexBuffer = gl.createBuffer();
    var tx = 0;
    var ty = 0;
    var translation_prototype = [1,0,0,0,
                 -               0,1,0,0,
                                 0,0,1,0,
                                 0,0,0,1]; 
    
    var vertexShader_source = 'attribute vec3 a_position;' + 'uniform mat4 u_translation;' + 'void main() { gl_Position = u_translation*vec4 (a_position,1);}';
    var fragmentShader_source = 'precision mediump float;' + 'void main() { gl_FragColor = vec4 (0.9,0,0.1,1); }';
    
    
    
    function getTimeInSeconds () {
    	return Date.now() * 0.001;
    }
    
    function makeTranslation (x, y) {
        translation_prototype = 
                [1,0,0,0,
                 0,1,0,0,
                 0,0,1,0,
                 x,y,0,1]
    	return translation_prototype;  
    }
    
    
    //Compile shaders
    var buildShader = function (shaderSource, typeOfShader) {
    var shader = gl.createShader(typeOfShader);
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    	alert (gl.getShaderInfoLog(shader));
    }
    return shader;
    }
    
    var compiledVertexShader = buildShader (vertexShader_source, gl.VERTEX_SHADER);
    var compiledFragmentShader = buildShader (fragmentShader_source, gl.FRAGMENT_SHADER);
    
    //setup GLSL program
    program = gl.createProgram();
    gl.attachShader(program,compiledVertexShader);
    gl.attachShader(program,compiledFragmentShader);
    gl.linkProgram(program);
    
    //Fill the buffer with vertex data
    
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(triangles), gl.STATIC_DRAW); 
    vertexBuffer.itemSize = 3;
    vertexBuffer.numItems = 3;
    
    
    gl.clear(gl.COLOR_BUFFER_BIT);
    var positionLocation = gl.getAttribLocation(program,"a_position");
    gl.enableVertexAttribArray(positionLocation);
    gl.useProgram(program);
    var shaderTranlsationMatrix = gl.getUniformLocation(program, "u_translation");
    gl.uniformMatrix4fv(shaderTranlsationMatrix,false,new Float32Array(translation_prototype));
    gl.vertexAttribPointer(positionLocation, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
    	
    var startTime = 0;
    var deltaTime = 0;
    function animate (time) {
    
    	//Draw loop
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    	deltaTime += 0.005;
        makeTranslation(tx+deltaTime,ty+deltaTime);
        
        gl.useProgram(program);
        var shaderTranlsationMatrix = gl.getUniformLocation(program, "u_translation");
        gl.uniformMatrix4fv(shaderTranlsationMatrix,false,new Float32Array(translation_prototype));
        gl.vertexAttribPointer(positionLocation, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
    	
    	gl.drawArrays (gl.TRIANGLES, 0, vertexBuffer.numItems);
    	startTime = time;
    
    	window.requestAnimationFrame(animate);
    }
    
    animate(0);

＆＃13;

<canvas id = "can" width="300" height="300">

</canvas>

＆＃13;

WebGL绘制循环和翻译

1 个答案: