Open Deval520 opened 4 years ago
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
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;