Question

目标是一个纹理开放的圆柱体。我相信问题出在setCamera（）函数上。我没有像以前那样使用该功能时进行任何更改。在firefox中的http服务器localhost上运行（已启用javascript）。对于如何使这项工作以及任何提示，我将非常感谢。 “ glmatrix”是一个Javascript矩阵和矢量库。

error screenshot from firefox

这是代码：

var mat4 = glMatrix.mat4;
var segments = 64;
var cylVertices=[]; //sidevertices
var positionAttribLocation = null;
var gl = null;
var program = null;
var cylVertexBufferObject = null;
var matWorldUniformLocation =null;
var matViewUniformLocation  =null;
var matProjectionUniformLocation    =null;
var worldMatrix         = null;
var viewMatrix          = null;
var projectionMatrix    = null;
var canvas = null;

var vertexShaderText =
[
'precision mediump float;',
'',
'attribute vec3 vertPosition;',
'attribute vec2 vertTexCoord;',
'varying vec2 fragTexCoord;',
'uniform mat4 mWorld;',
'uniform mat4 mView;',
'uniform mat4 mProjection;',
'',
'void main()',
'{',
'   fragTexCoord = vertTexCoord;',
'   gl_Position = mProjection * mView * mWorld * vec4(vertPosition, 1.0);',
'}'
].join('\n');

var fragmentTexShaderText =
[
'precision mediump float;',
'',
'varying vec2 fragTexCoord;',
'uniform sampler2D sampler;',
'void main()',
'{',
'   gl_FragColor = texture2D(sampler,fragTexCoord);',
'}'
].join('\n');


var initDemo = function () {
    console.log('This is working');

    canvas = document.getElementById('game-surface');
    gl = canvas.getContext('webgl');

    if (!gl) {
        console.log('WebGL not supported, falling back on experimental-webgl');
        gl = canvas.getContext('experimental-webgl');
    }
    if (!gl) {
        alert('Your browser does not support WebGL');
    }

    clear();
    gl.enable(gl.DEPTH_TEST);//enable drawing over if closer to the virtual camera

    //
    //Create Shaders
    //
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(vertexShader,vertexShaderText);
    gl.shaderSource(fragmentShader,fragmentTexShaderText);

    gl.compileShader(vertexShader);

    if (!gl.getShaderParameter(vertexShader,gl.COMPILE_STATUS)){
        console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
        return;
    }

    gl.compileShader(fragmentShader);

    if (!gl.getShaderParameter(fragmentShader,gl.COMPILE_STATUS)){
        console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragmentShader));
        return;
    }

    program = gl.createProgram();
    gl.attachShader(program,vertexShader);
    gl.attachShader(program,fragmentShader)
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program,gl.LINK_STATUS)){
        console.error('ERROR linking program!', gl.getProgramInfoLog(program));
        return;
    }

    a=0, b=0, y=0, u=0, v=0, s=0, t=0; //The origin
    r=1.0,g=0.4,b=0.6;
    theta = (Math.PI/180) * (360);
    //theta = (Math.PI/180) * (360/(segments)); //Degrees = radians * (180 / )
    for (i =0;i<=(segments);i++){
        x =  i*Math.cos(theta); 
        z =  i*Math.sin(theta);
        s=(theta+180)/360;

        cylVertices.push(x, y, z,   s,0); //Sidevertices along the bottom

        cylVertices.push(x, y+2, z, s,2); //Sidevertices along the top
   }
    cylArray = new Float32Array(cylVertices); //sidearray



    //
    //------MAIN RENDER LOOP-------
    //
    var angle = 0;
    var loop = function (){
        setCamera();
        angle = performance.now() / 1000 / 6 * 2 * Math.PI;
        mat4.rotate(xRotationMatrix,identityMatrix, angle, [0,1,0]);//x rotation
        gl.uniformMatrix4fv(matWorldUniformLocation, gl.FALSE, xRotationMatrix);

        clear();

        theVertexBufferObject = gl.createBuffer();

        drawCylSide();

        requestAnimationFrame(loop);
    };
    requestAnimationFrame(loop);
};
//
// --------------------functions--------------------
//
function drawCylSide(){
    gl.bindBuffer(gl.ARRAY_BUFFER,theVertexBufferObject);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cylArray),gl.STATIC_DRAW);

    setPointer(5);
    var texCoordAttribLocation = gl.getAttribLocation(program,'vertTexCoord');
    gl.vertexAttribPointer(
        texCoordAttribLocation,             //Attribute location
        2,                                  //Number of vertix elements
        gl.FLOAT,                           //Type of elements
        gl.FALSE,                           //Normalised
        5 * Float32Array.BYTES_PER_ELEMENT, //Size of individual vertex
        3 * Float32Array.BYTES_PER_ELEMENT, //Offset
    );

    gl.enableVertexAttribArray(positionAttribLocation);
    gl.enableVertexAttribArray(texCoordAttribLocation);

    var boxTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, boxTexture);
    gl.texParameter(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);
    gl.texParameter(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);
    gl.texParameter(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,gl.LINEAR);
    gl.texParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER,gl.LINEAR);
    gl.texImage2D(
        gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
        gl.UNSIGNED_BYTE,
        document.getElementById('wall-img')
    );
    gl.bindTexture(gl.TEXTURE_2D, null);
    gl.useProgram(program);
    gl.bindTexture(gl.TEXTURE_2D, boxTexture);
    gl.activeTexture(gl.TEXTURE0);

    gl.drawArrays(gl.TRIANGLE_STRIP,0, segments);
};
function setPointer(n){
    positionAttribLocation = gl.getAttribLocation(program,'vertPosition');
    gl.vertexAttribPointer(
        positionAttribLocation,             //Attribute location
        3,                                  //Number of vertix elements
        gl.FLOAT,                           //Type of elements
        gl.FALSE,                           //Normalised
        n * Float32Array.BYTES_PER_ELEMENT, //Size of individual vertex
        0                                   //Offset
    );
};
function clear(){
    gl.clearColor(0.75, 0.85, 0.8, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
};
function setCamera(){
    mat4.identity(worldMatrix);
    mat4.lookAt(viewMatrix,[0,1,-8],[0,0,0],[0,10,0]);
    mat4.perspective(projectionMatrix,glMatrix.glMatrix.toRadian(45),canvas.width/canvas.height,0.1,1000.0);

    gl.uniformMatrix4fv(matWorldUniformLocation,gl.FALSE,worldMatrix);
    gl.uniformMatrix4fv(matViewUniformLocation,gl.FALSE,viewMatrix);
    gl.uniformMatrix4fv(matProjectionUniformLocation,gl.FALSE,projectionMatrix);    
};

Answer 1

您需要使用glMatrix的相应create函数来初始化向量和矩阵。

var worldMatrix         = mat4.create();
var viewMatrix          = mat4.create();
var projectionMatrix    = mat4.create();

为什么会出现“输出为空”（glmatrix）错误？ Webgl

1 个答案: