I'm currently facing an issue with rendering .obj and .mtl files in my WebGL project. I've successfully loaded the files into the program, but the rendering is not displaying the expected shapes. Despite ensuring the correctness of the .obj and .mtl files, the rendered shapes do not match the expected geometry. I'm seeking assistance in troubleshooting why the rendering is incorrect and finding a solution to properly display the shapes from the .obj and .mtl files.
In this code I don't know how to add other library script files on stack overflow, but they are correctly working. This is the Code of my main.js file.
function main() {
// Retrieve <canvas> element
let canvas = document.getElementById("webgl");
// Get the rendering context for WebGL
let gl = WebGLUtils.setupWebGL(canvas, undefined);
//Check that the return value is not null.
if (!gl) {
console.log("Failed to get the rendering context for WebGL");
return;
}
// Set viewport
gl.viewport(0, 0, canvas.width, canvas.height);
// Set clear color
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT, gl.DEPTH_BUFFER_BIT);
// Initialize shaders
let program = initShaders(gl, "vshader", "fshader");
gl.useProgram(program);
// Get the stop sign
let stopSign = new Model(
"https://web.cs.wpi.edu/~jmcuneo/cs4731/project3/stopsign.obj",
"https://web.cs.wpi.edu/~jmcuneo/cs4731/project3/stopsign.mtl"
);
// Get the lamp
let lamp = new Model(
"https://web.cs.wpi.edu/~jmcuneo/cs4731/project3/lamp.obj",
"https://web.cs.wpi.edu/~jmcuneo/cs4731/project3/lamp.mtl"
);
// Get the car
let car = new Model(
"https://web.cs.wpi.edu/~jmcuneo/cs4731/project3/car.obj",
"https://web.cs.wpi.edu/~jmcuneo/cs4731/project3/car.mtl"
);
// Get the street
let street = new Model(
"https://web.cs.wpi.edu/~jmcuneo/cs4731/project3/street.obj",
"https://web.cs.wpi.edu/~jmcuneo/cs4731/project3/street.mtl"
);
// Get the bunny (you will not need this one until Part II)
let bunny = new Model(
"https://web.cs.wpi.edu/~jmcuneo/cs4731/project3/bunny.obj",
"https://web.cs.wpi.edu/~jmcuneo/cs4731/project3/bunny.mtl"
);
// Check every 100 milliseconds if the stop sign is loaded
let checkInterval = setInterval(function () {
if (stopSign) {
clearInterval(checkInterval); // Stop the timer
// render(); // Render the stop sign
render(gl, stopSign, program);
}
}, 100);
// console.log("After**************");
}
function render(gl, stopSign, program) {
for (let face of stopSign.faces) {
// Create buffers for vertices and normals
let scaledVertices = face.faceVertices.map(vertex => vertex.map(coord => coord * 1)); // Scale down by a factor of 0.5
let vBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(scaledVertices.flat()),
gl.STATIC_DRAW
);
let vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
let nBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, nBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(face.faceNormals.flat()),
gl.STATIC_DRAW
);
let vNormal = gl.getAttribLocation(program, "vNormal");
gl.vertexAttribPointer(vNormal, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vNormal);
gl.drawArrays(gl.TRIANGLES, 0, face.faceVertices.length);
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CS 4731 Final Project Part I</title>
<script id="vshader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main() {
gl_Position = vPosition;
}
</script>
<script id="fshader" type="x-shader/x-fragment">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script type="text/javascript" src="lib/webgl-utils.js"></script>
<script type="text/javascript" src="lib/initShaders.js"></script>
<script type="text/javascript" src="lib/MV.js"></script>
<script type="text/javascript" src="lib/model.js"></script>
<script type="text/javascript" src="lib/face.js"></script>
<script type="text/javascript" src="main.js"></script>
<style>
body {
padding: 32px;
margin: 0;
background-color: rgb(15, 15, 15);
font-family: sans-serif;
}
h1 {
color: #f3f3f3;
text-align: center;
}
.section-canvas {
width: 100%;
height: 500px;
background: rgb(151, 128, 128);
}
</style>
</head>
<body onload="main()">
<h1 id="mode">CS 4731 Final Project</h1>
<canvas id="webgl" class="box section-canvas" width="100%" height="900">
Please use a browser that supports the "canvas" tag.
</canvas>
</body>
</html>