Hi, I referenced the /cross_browser-master/client/fingerprint/texture/app.js file, but the susan model was not drawn successfully in the end. Can you help me check the specific reasons?

[Deval520]

[Deval520]

I am a developer and my business is risk control, can you add my WeChat? My WeChat ID is pdm_peng, I am also studying this recently, but I have not succeeded in drawing the texture

[Deval520]

import { mat4, glMatrix } from "gl-matrix"
import susan from "./susan"

let getGL = function(canvas) {
var gl = null;
for (var i = 0; i < 4; ++i) {
gl = canvas.getContext(
[ "webgl", "experimental-webgl", "moz-webgl", "webkit-3d" ][i], {
antialias : false,
preserveDrawingBuffer : true,
willReadFrequently : false,
depth: true
});
if (gl)
break;
}

if (!gl) {
  alert('Your browser does not support WebGL');
}
return gl;

}

let vsText = `
precision mediump float;

    attribute vec3 vertPosition;
    attribute vec2 vertTexCoord;
    varying vec2 fragTexCoord;
    uniform mat4 mWorld;
    uniform mat4 mView;
    uniform mat4 mProj;
    
    void main()
    {
    fragTexCoord = vertTexCoord;
    gl_Position = mProj * mView * mWorld * vec4(vertPosition, 1.0);
    }
`;

let fsText  = `
    precision mediump float;

    varying vec2 fragTexCoord;
    uniform sampler2D sampler;
    
    void main()
    {
    gl_FragColor = texture2D(sampler, fragTexCoord);
    }
`;

let width = 500,
height = 400,
cvs = document.createElement("canvas"),
gl = getGL(cvs);

let init = function(image) {
let susanVertices = susan.meshes[0].vertices;
let susanIndices = [].concat(susan.meshes[0].faces);
let susanTexCoords = susan.meshes[0].texturecoords[0];
let texture = image

cvs.width   = 256;
cvs.height  = 256;
// gl.viewport(0.0, 0.0, cvs.width, cvs.height);
document.body.appendChild(cvs);



gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.frontFace(gl.CCW);
gl.cullFace(gl.BACK);

//createShader
let vertexShader    = gl.createShader(gl.VERTEX_SHADER);
let fragmentShader  = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(vertexShader, vsText);
gl.shaderSource(fragmentShader, fsText);

gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    console.error("编译VertexShader错误", gl.getShaderInfoLog(vertexShader));
    return;
}

gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    console.error("编译FragmentShader错误", gl.getShaderInfoLog(fragmentShader));
    return;
}

let program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error("link program错误", gl.getProgramInfoLog(program));
}
gl.validateProgram(program);
if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS)) {
    console.error("validate program错误", gl.getProgramInfoLog(program));
    return;
}

//createBuffer
let allVertices = susanVertices;
let allIndices  = susanIndices;
let allTexCoords    = susanTexCoords;

let allPosVertexBufferObject    = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, allPosVertexBufferObject);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(allVertices), gl.STATIC_DRAW);

let allTexCoordVertexBufferObject   = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, allTexCoordVertexBufferObject);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(allTexCoords), gl.STATIC_DRAW);

let allIndexBufferObject    = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, allIndexBufferObject);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(allIndices), gl.STATIC_DRAW);

gl.bindBuffer(gl.ARRAY_BUFFER, allPosVertexBufferObject);
let positionAttribLocation  = gl.getAttribLocation(program, "vertPosition");
gl.vertexAttribPointer(
    positionAttribLocation, 
      3,                      
      gl.FLOAT,               
      gl.FALSE,
      3 * Float32Array.BYTES_PER_ELEMENT, 
      0
);
gl.enableVertexAttribArray(positionAttribLocation);

gl.bindBuffer(gl.ARRAY_BUFFER, allTexCoordVertexBufferObject);
let texCoordAttribLocation = gl.getAttribLocation(program, "vertTexCoord");
gl.vertexAttribPointer(
    texCoordAttribLocation, 
    2,                      
    gl.FLOAT,               
    gl.FALSE,
    2 * Float32Array.BYTES_PER_ELEMENT, 
    0
);
gl.enableVertexAttribArray(texCoordAttribLocation);

//create texture
let tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture);
gl.bindTexture(gl.TEXTURE_2D, null);

gl.useProgram(program);

let matWorldUniformLocation = gl.getUniformLocation(program, "mWorld");
let matViewUniformLocation  = gl.getUniformLocation(program, "mView");
let matProjUniformLocation  = gl.getUniformLocation(program, "mProj");

let worldMatrix = new Float32Array(16);
let viewMatrix  = new Float32Array(16);
let projMatrix  = new Float32Array(16);
mat4.identity(worldMatrix);
mat4.lookAt(viewMatrix, [ 0, 0, -7 ], [ 0, 0, 0 ], [ 0, 1, 0 ]);

mat4.perspective(projMatrix, glMatrix.toRadian(45),
cvs.width / cvs.height, 0.1, 1000.0);

gl.uniformMatrix4fv(matWorldUniformLocation, gl.FALSE, worldMatrix);
gl.uniformMatrix4fv(matViewUniformLocation, gl.FALSE, viewMatrix);
gl.uniformMatrix4fv(matProjUniformLocation, gl.FALSE, projMatrix);

let xRotationMatrix = new Float32Array(16);
let yRotationMatrix = new Float32Array(16);

//main render loop
var identityMatrix  = new Float32Array(16);
mat4.identity(identityMatrix);
let angle   = 0,
    count   = 45;
var identityMatrix  = new Float32Array(16);

mat4.identity(identityMatrix);
gl.enable(gl.DEPTH_TEST);

let loop    = function() {
    let frame   = requestAnimationFrame(loop);
    angle   = count++ / 20;
    mat4.rotate(yRotationMatrix, identityMatrix, angle, [0, 1, 0]);
    mat4.rotate(xRotationMatrix, identityMatrix, angle / 4, [ 1, 0, 0 ]);
    mat4.mul(worldMatrix, yRotationMatrix, xRotationMatrix);
    gl.uniformMatrix4fv(matWorldUniformLocation, gl.FALSE, worldMatrix);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);

    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.activeTexture(gl.TEXTURE0);
    gl.drawElements(gl.TRIANGLES, allIndices.length, gl.UNSIGNED_SHORT, 0);
    if (count == 50) {
        cancelAnimationFrame(frame);
        // sender.getData(gl, parent.IDs[ID]);
        // parent.childComplete();
    }
}
requestAnimationFrame(loop);

}

let callback = function(image) {

init(image);

}

export default callback;