【发布时间】：2021-05-24 14:18:27
【问题描述】：
这是我的代码：
我只是想在 webgl 中渲染三角形，但我做不到。
控制台中没有错误或警告，而画布中没有呈现任何内容。
`use strict`;
const vsTriangle = `#version 300 es
in vec3 a_position;
out vec3 varying_color;
uniform mat4 u_vpMatrix;
void main(){
gl_Position = u_vpMatrix*vec4(a_position, 1.0);
varying_color = a_position;
}
`;
const fsTriangle = `#version 300 es
precision mediump float;
in vec3 varying_color;
out vec4 outColor;
void main(){
outColor = vec4(1.0, 0.0, 0.0, 0.7);
}
`;
const up = [0, 1, 0];
let modelDegree = 0;
let cameraYposition = 2.0;
const positionTriangle = [0.0, 1.0, 0.0, 0.5, 0.5, 0.0, 1.0, 0.0, 0.0];
(function() {
const canvas = document.querySelector("#main-canvas");
let gl = canvas.getContext("webgl2");
if (!gl) {
console.log("webgl2 not found");
return;
}
var ext = gl.getExtension("OES_element_index_uint");
let programTriangle = webglUtils.createProgramFromSources(gl, [
vsTriangle,
fsTriangle,
]);
let vao = gl.createVertexArray();
gl.bindVertexArray(vao);
let position = gl.getAttribLocation(programTriangle, "a_position");
let modelMatrixLocation = gl.getUniformLocation(programTriangle, "u_vpMatrix");
let posTriangleBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, posTriangleBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(positionTriangle),
gl.STATIC_DRAW
);
let cameraDegree = 0;
function degToRadian(deg) {
return (Math.PI / 180) * deg;
}
function initialCameraSetup(cameraPosition, up) {
let cameraMatrix = m4.lookAt(cameraPosition, [1, 0, 0], up);
return cameraMatrix;
}
function drawScene() {
webglUtils.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0.5, 0.5, 0.5, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.BACK);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
let cameraRadian = degToRadian(cameraDegree);
let cameraMatrix = m4.yRotation(cameraRadian);
cameraMatrix = m4.translate(cameraMatrix, 0.0, 0.0, 1.5);
cameraPosition = [cameraMatrix[12], cameraMatrix[13], cameraMatrix[14]];
cameraMatrix = initialCameraSetup(cameraPosition, up);
viewMatrix = m4.inverse(cameraMatrix);
let aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
let fieldofView = degToRadian(90);
let projectionMatrix = m4.perspective(fieldofView, aspect, 0.01, 1000);
let vProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
gl.bindBuffer(gl.ARRAY_BUFFER, posTriangleBuffer);
gl.enableVertexAttribArray(position);
gl.vertexAttribPointer(
position,
3,
gl.FLOAT,
false,
0,
0
);
gl.useProgram(programTriangle);
gl.uniformMatrix4fv(
modelMatrixLocation,
false,
vProjectionMatrix
);
gl.drawArrays(gl.TRIANGLES, 0, 3);
window.requestAnimationFrame(drawScene);
}
requestAnimationFrame(drawScene);
})();#main-canvas {
width: 720px;
height: 360px;
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test !!!</title>
<link rel="stylesheet" href="./styles/main.css" />
</head>
<body>
<div class="canvas-container">
<canvas id="main-canvas"></canvas>
</div>
<script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
<script src="https://greggman.github.io/webgl-lint/webgl-lint.js"></script>
</body>
</html>【问题讨论】：
标签： javascript glsl shader webgl webgl2