// Go to the bottom to see the user-implemented side of this renderer // Notes: // Coordinates are Left-Handed, Z+ Forward, Y+ Up // Features: // - Similar API to OpenGL // - <=1000 loc // - Triangle Per-Vertex data Interpolation // - Full Vertex & Fragment shaders // - Flexible Color Blending // - Early Depth Testing and Depth Writing (with toggles) // - Framebuffers // - Textures (though no way to load one from p5js due to paper :P hurry up boi) // - Backface culling // - Stippling // - Triangle, Line and Point rendering modes // - Triangle clipping // TODO: // 1. Improve GC allocations // 2. Optimize, Optimize, and then Optimize some more // 3. FrameBuffer Multiple Texture attachments // 4. Vertex Attributes - Currently hardcoded // 5. More Utility functions that would be useful in creating games class Texture2D { constructor(width, height) { this.width = width; this.height = height; this.data = new Uint8Array(width * height * 4); } setPixel(x, y, r, g, b, a) { const index = (y * this.width + x) * 4; this.data[index] = Math.min(255, Math.max(0, r * 255)); this.data[index + 1] = Math.min(255, Math.max(0, g * 255)); this.data[index + 2] = Math.min(255, Math.max(0, b * 255)); this.data[index + 3] = Math.min(255, Math.max(0, a * 255)); } getPixel(x, y) { const index = (y * this.width + x) * 4; return { r: this.data[index] / 255, g: this.data[index + 1] / 255, b: this.data[index + 2] / 255, a: this.data[index + 3] / 255 }; } } class FrameBuffer { constructor(width, height) { this.width = width; this.height = height; this.colorTexture = new Texture2D(width, height); this.depthBuffer = new Float32Array(width * height); this.blendFunction = BlendFunction.NORMAL; } setBlendFunction(blendFunction) { this.blendFunction = blendFunction; } clear(r, g, b, a) { for (let i = 0; i < this.width * this.height; i++) { const index = i * 4; if (doStipple && ((i % this.width) + (Math.floor(i / this.width))) % 2 === (frameCount % 2)) { continue; } this.colorTexture.data[index] = Math.min(255, Math.max(0, r * 255)); this.colorTexture.data[index + 1] = Math.min(255, Math.max(0, g * 255)); this.colorTexture.data[index + 2] = Math.min(255, Math.max(0, b * 255)); this.colorTexture.data[index + 3] = Math.min(255, Math.max(0, a * 255)); this.depthBuffer[i] = 1.0; // Initialize depth to maximum (1.0) } } setPixel(x, y, r, g, b, a) { if (x < 0 || x >= this.width || y < 0 || y >= this.height) { return; // Out of bounds } const srcColor = { r, g, b, a }; const dstColor = this.colorTexture.getPixel(x, y); const blendedColor = this.blendFunction.blend(srcColor, dstColor); this.colorTexture.setPixel(x, y, blendedColor.r, blendedColor.g, blendedColor.b, blendedColor.a); } setDepth(x, y, depth) { if (!doDepthWrite) return; // Cannot write depth when DepthWrite is off if (x >= 0 && x < this.width && y >= 0 && y < this.height) { this.depthBuffer[y * this.width + x] = depth; } } getPixel(x, y) { return this.colorTexture.getPixel(x, y); } getDepth(x, y) { return this.depthBuffer[y * this.width + x]; } } class Vec3 { constructor(x, y, z) { this.x = x; this.y = y; this.z = z; } normalize() { const len = Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); return new Vec3(this.x / len, this.y / len, this.z / len); } negate() { return new Vec3(-this.x, -this.y, -this.z); }; add(v) { return new Vec3(this.x + v.x, this.y + v.y, this.z + v.z); }; sub(v) { return new Vec3(this.x - v.x, this.y - v.y, this.z - v.z); }; scale(s) { return new Vec3(this.x * s, this.y * s, this.z * s); } addInPlace(v) { this.x += v.x; this.y += v.y; this.z += v.z; return this; } subInPlace(v) { this.x -= v.x; this.y -= v.y; this.z -= v.z; return this; } scaleInPlace(s) { this.x *= s; this.y *= s; this.z *= s; return this; } normalizeInPlace() { const len = Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); this.x /= len; this.y /= len; this.z /= len; return this; } static dot(a, b) { return a.x * b.x + a.y * b.y + a.z * b.z; } static cross(a, b) { return new Vec3( (a.y * b.z) - (b.y * a.z), (-a.x * b.z) + (b.x * a.z), (a.x * b.y) - (b.x * a.y)); } } class Vec4 { constructor(x, y, z, w) { this.x = x; this.y = y; this.z = z; this.w = w; } negate() { return new Vec4(-this.x, -this.y, -this.z, -this.w); }; add(v) { return new Vec4(this.x + v.x, this.y + v.y, this.z + v.z, this.w + v.w); }; sub(v) { return new Vec4(this.x - v.x, this.y - v.y, this.z - v.z, this.w - v.w); }; scale(s) { return new Vec4(this.x * s, this.y * s, this.z * s, this.w * s); } addInPlace(v) { this.x += v.x; this.y += v.y; this.z += v.z; this.w += v.w; return this; } subInPlace(v) { this.x -= v.x; this.y -= v.y; this.z -= v.z; this.w -= v.w; return this; } scaleInPlace(s) { this.x *= s; this.y *= s; this.z *= s; this.w *= s; return this; } } class Mat4 { constructor(mat) { mat = mat || [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; if (mat instanceof Array) { this.data = new Float32Array(mat); } else { this.data = new Float32Array(16); this.data[0] = mat.data[0]; this.data[1] = mat.data[1]; this.data[2] = mat.data[2]; this.data[3] = mat.data[3]; this.data[4] = mat.data[4]; this.data[5] = mat.data[5]; this.data[6] = mat.data[6]; this.data[7] = mat.data[7]; this.data[8] = mat.data[8]; this.data[9] = mat.data[9]; this.data[10] = mat.data[10]; this.data[11] = mat.data[11]; this.data[12] = mat.data[12]; this.data[13] = mat.data[13]; this.data[14] = mat.data[14]; this.data[15] = mat.data[15]; } } static translate(position) { let result = new Mat4(); result.data[0] = 1; result.data[1] = 0; result.data[2] = 0; result.data[3] = 0; result.data[4] = 0; result.data[5] = 1; result.data[6] = 0; result.data[7] = 0; result.data[8] = 0; result.data[9] = 0; result.data[10] = 1; result.data[11] = 0; result.data[12] = position.x; result.data[13] = position.y; result.data[14] = position.z; result.data[15] = 1; return result; } static rotation(angle, axis) { if (Array.isArray(axis)) { axis = new Vec3(axis[0], axis[1], axis[2]); } if (Vec3.dot(axis, axis) === 0) { throw 'Cannot create rotation matrix for a zero vector axis'; } let normAxis = axis.normalize(); let x = normAxis.x; let y = normAxis.y; let z = normAxis.z; let modAngle = angle % (2 * Math.PI); let s = Math.sin(modAngle); let c = Math.cos(modAngle); let xx = x * x; let yy = y * y; let zz = z * z; let xy = x * y; let yz = y * z; let zx = z * x; let xs = x * s; let ys = y * s; let zs = z * s; let one_c = 1.0 - c; return new Mat4([ (one_c * xx) + c, (one_c * xy) + zs, (one_c * zx) - ys, 0, (one_c * xy) - zs, (one_c * yy) + c, (one_c * yz) + xs, 0, (one_c * zx) + ys, (one_c * yz) - xs, (one_c * zz) + c, 0, 0, 0, 0, 1 ]); } static multiply(a, b) { return new Mat4([ a.data[0] * b.data[0] + a.data[4] * b.data[1] + a.data[8] * b.data[2] + a.data[12] * b.data[3], a.data[1] * b.data[0] + a.data[5] * b.data[1] + a.data[9] * b.data[2] + a.data[13] * b.data[3], a.data[2] * b.data[0] + a.data[6] * b.data[1] + a.data[10] * b.data[2] + a.data[14] * b.data[3], a.data[3] * b.data[0] + a.data[7] * b.data[1] + a.data[11] * b.data[2] + a.data[15] * b.data[3], a.data[0] * b.data[4] + a.data[4] * b.data[5] + a.data[8] * b.data[6] + a.data[12] * b.data[7], a.data[1] * b.data[4] + a.data[5] * b.data[5] + a.data[9] * b.data[6] + a.data[13] * b.data[7], a.data[2] * b.data[4] + a.data[6] * b.data[5] + a.data[10] * b.data[6] + a.data[14] * b.data[7], a.data[3] * b.data[4] + a.data[7] * b.data[5] + a.data[11] * b.data[6] + a.data[15] * b.data[7], a.data[0] * b.data[8] + a.data[4] * b.data[9] + a.data[8] * b.data[10] + a.data[12] * b.data[11], a.data[1] * b.data[8] + a.data[5] * b.data[9] + a.data[9] * b.data[10] + a.data[13] * b.data[11], a.data[2] * b.data[8] + a.data[6] * b.data[9] + a.data[10] * b.data[10] + a.data[14] * b.data[11], a.data[3] * b.data[8] + a.data[7] * b.data[9] + a.data[11] * b.data[10] + a.data[15] * b.data[11], a.data[0] * b.data[12] + a.data[4] * b.data[13] + a.data[8] * b.data[14] + a.data[12] * b.data[15], a.data[1] * b.data[12] + a.data[5] * b.data[13] + a.data[9] * b.data[14] + a.data[13] * b.data[15], a.data[2] * b.data[12] + a.data[6] * b.data[13] + a.data[10] * b.data[14] + a.data[14] * b.data[15], a.data[3] * b.data[12] + a.data[7] * b.data[13] + a.data[11] * b.data[14] + a.data[15] * b.data[15] ]); } static lookTo(cameraPosition, cameraDirection, cameraUpVector) { let axisZ = cameraDirection.normalize(); let axisX = Vec3.cross(cameraUpVector, axisZ).normalize(); let axisY = Vec3.cross(axisZ, axisX); let negativeCameraPosition = cameraPosition.negate(); let result = new Mat4(); result.data[0] = axisX.x; result.data[1] = axisY.x; result.data[2] = axisZ.x; result.data[3] = 0.0; result.data[4] = axisX.y; result.data[5] = axisY.y; result.data[6] = axisZ.y; result.data[7] = 0.0; result.data[8] = axisX.z; result.data[9] = axisY.z; result.data[10] = axisZ.z; result.data[11] = 0.0; result.data[12] = Vec3.dot(axisX, negativeCameraPosition); result.data[13] = Vec3.dot(axisY, negativeCameraPosition); result.data[14] = Vec3.dot(axisZ, negativeCameraPosition); result.data[15] = 1.0; return result; } static perspective(fieldOfView, aspectRatio, nearPlaneDistance, farPlaneDistance) { let yScale = 1.0 / Math.tan(fieldOfView * 0.5); let xScale = yScale / aspectRatio; let q = farPlaneDistance / (farPlaneDistance - nearPlaneDistance); let result = new Mat4(); result.data[0] = xScale; result.data[5] = yScale; result.data[10] = q; result.data[11] = 1.0; result.data[14] = -q * nearPlaneDistance; result.data[15] = 0.0; return result; } static multiplyVector(mat, vec) { return new Vec4( mat.data[0] * vec.x + mat.data[4] * vec.y + mat.data[8] * vec.z + mat.data[12] * vec.w, mat.data[1] * vec.x + mat.data[5] * vec.y + mat.data[9] * vec.z + mat.data[13] * vec.w, mat.data[2] * vec.x + mat.data[6] * vec.y + mat.data[10] * vec.z + mat.data[14] * vec.w, mat.data[3] * vec.x + mat.data[7] * vec.y + mat.data[11] * vec.z + mat.data[15] * vec.w ); } } class Shader { constructor(vertexShader, fragmentShader, canWriteDepth = false) { this.vertexShader = vertexShader; this.fragmentShader = fragmentShader; this.canWriteDepth = canWriteDepth; this.uniforms = {}; } use() { currentShader = this; } } class BlendFunction { constructor(srcFactor, dstFactor) { this.srcFactor = srcFactor; this.dstFactor = dstFactor; } blend(src, dst) { const srcFactor = this.srcFactor(src, dst); const dstFactor = this.dstFactor(src, dst); return { r: this.blendComponent(src.r, dst.r, srcFactor, dstFactor), g: this.blendComponent(src.g, dst.g, srcFactor, dstFactor), b: this.blendComponent(src.b, dst.b, srcFactor, dstFactor), a: this.blendComponent(src.a, dst.a, srcFactor, dstFactor) }; } blendComponent(src, dst, srcFactor, dstFactor) { return srcFactor * src + dstFactor * dst; } } // Predefined blend factors BlendFunction.ZERO = (src, dst) => 0; BlendFunction.ONE = (src, dst) => 1; BlendFunction.SRC_ALPHA = (src, dst) => src.a; BlendFunction.ONE_MINUS_SRC_ALPHA = (src, dst) => 1 - src.a; BlendFunction.DST_ALPHA = (src, dst) => dst.a; BlendFunction.ONE_MINUS_DST_ALPHA = (src, dst) => 1 - dst.a; // Predefined blend functions BlendFunction.NORMAL = new BlendFunction(BlendFunction.ONE, BlendFunction.ZERO); BlendFunction.ALPHA_BLEND = new BlendFunction(BlendFunction.SRC_ALPHA, BlendFunction.ONE_MINUS_SRC_ALPHA); BlendFunction.ADDITIVE = new BlendFunction(BlendFunction.ONE, BlendFunction.ONE); let initialized = false; let defaultFramebuffer; // state let currentFramebuffer = null; let currentShader = null; let currentBlendFunction = BlendFunction.NORMAL; let doStipple = false; let doDepthWrite = true; let doDepthTest = true; const CullMode = { NONE: 'none', BACK: 'back', FRONT: 'front' }; let cullMode = CullMode.BACK; // 0 = None, 1 = Back, 2 = Front const PolygonMode = { FILL: 'fill', LINE: 'line', POINT: 'point' }; let polygonMode = PolygonMode.FILL; // Default polygon mode draw = function() { if (!initialized) { initialized = true; defaultFramebuffer = new FrameBuffer(width, height); currentFramebuffer = defaultFramebuffer; initialize(); } // Reset state currentFramebuffer = defaultFramebuffer; currentShader = null; doDepthWrite = true; doDepthTest = true; cullMode = CullMode.BACK; polygonMode = PolygonMode.FILL; setBlendFunction(BlendFunction.NORMAL); // Default is always cleared to black defaultFramebuffer.clear(0, 0, 0, 1); update(); updateP5Canvas(); } function setPolygonMode(mode) { if (Object.values(PolygonMode).includes(mode)) { polygonMode = mode; } else { console.error("Invalid polygon mode. Use PolygonMode.FILL, PolygonMode.LINE, or PolygonMode.POINT."); } } function setCullMode(mode) { if (Object.values(CullMode).includes(mode)) { cullMode = mode; } else { console.error("Invalid cull mode. Use CullMode.NONE, CullMode.BACK, or CullMode.FRONT."); } } function setDoStipple(boolean) { doStipple = boolean; } function setDoDepthTest(boolean) { doDepthTest = boolean; } function setDoDepthWrite(boolean) { doDepthWrite = boolean; } function createFramebuffer(width, height) { return new FrameBuffer(width, height); } function bindFramebuffer(framebuffer) { currentFramebuffer = framebuffer || defaultFramebuffer; currentFramebuffer.setBlendFunction(currentBlendFunction); } function clearFramebuffer(r, g, b, a) { currentFramebuffer.clear(r, g, b, a); } function blitFramebuffer(srcFramebuffer, dstFramebuffer, srcX, srcY, srcWidth, srcHeight, dstX, dstY, dstWidth, dstHeight, blitColor, blitDepth) { // If no destination framebuffer is specified, use the default dstFramebuffer = dstFramebuffer || defaultFramebuffer; // Simple and fast nearest-neighbor scaling let scaleX = dstWidth / srcWidth; let scaleY = dstHeight / srcHeight; // Use the currently active blend function const tmpBlend = dstFramebuffer.blendFunction; dstFramebuffer.blendFunction = srcFramebuffer.blendFunction; for (let y = 0; y < dstHeight; y++) { for (let x = 0; x < dstWidth; x++) { let srcPixelX = Math.floor(x / scaleX) + srcX; let srcPixelY = Math.floor(y / scaleY) + srcY; if (srcPixelX >= srcX && srcPixelX < srcX + srcWidth && srcPixelY >= srcY && srcPixelY < srcY + srcHeight) { let pixel = srcFramebuffer.getPixel(srcPixelX, srcPixelY); let srcDepth = srcFramebuffer.getDepth(srcPixelX, srcPixelY); let dstX_final = x + dstX; let dstY_final = y + dstY; // Always overwrite the destination pixel and depth if (blitColor) dstFramebuffer.setPixel(dstX_final, dstY_final, pixel.r, pixel.g, pixel.b, pixel.a); if (blitDepth) dstFramebuffer.setDepth(dstX_final, dstY_final, srcDepth); } } } // Revent blend function dstFramebuffer.blendFunction = tmpBlend; } function setBlendFunction(blendFunction) { currentBlendFunction = blendFunction; currentFramebuffer.setBlendFunction(blendFunction); } function drawArrays(positions, normals, indices) { if (!currentShader) { console.error("No shader bound"); return; } for (let i = 0; i < indices.length; i += 3) { processTriangle([indices[i], indices[i + 1], indices[i + 2]], positions, normals); } } function isBackFace(v0, v1, v2) { let signed_area = v0.x * v1.y - v0.y * v1.x + v1.x * v2.y - v1.y * v2.x + v2.x * v0.y - v2.y * v0.x; return cullMode === CullMode.BACK ? signed_area >= 0 : signed_area <= 0; } function processTriangle(indices, positions, normals) { let triangle = { vertices: indices.map(index => { let attributes = { position: new Vec4(positions[index * 3], positions[index * 3 + 1], positions[index * 3 + 2], 1), normal: new Vec3(normals[index * 3], normals[index * 3 + 1], normals[index * 3 + 2]) }; let output = currentShader.vertexShader(attributes, currentShader.uniforms); return { position: output.gl_Position, varyings: output.varyings }; }) }; // Clip against near and far planes let nearPlane = { normal: new Vec3(0, 0, 1), distance: -0.1 }; // Adjust distance as needed let farPlane = { normal: new Vec3(0, 0, -1), distance: 100 }; // Adjust distance as needed let clippedTriangles = clipTriangleAgainstPlane(triangle, nearPlane, true); clippedTriangles = clippedTriangles.flatMap(tri => clipTriangleAgainstPlane(tri, farPlane, false)); // Process clipped triangles clippedTriangles.forEach(tri => { tri.vertices = tri.vertices.map(v => { let w = v.position.w; let screenX = (v.position.x / w + 1) * currentFramebuffer.width / 2; let screenY = (-v.position.y / w + 1) * currentFramebuffer.height / 2; let screenZ = v.position.z / w; return { screenPosition: new Vec3(screenX, screenY, screenZ), varyings: v.varyings }; }); rasterizeTriangle(tri); }); } function clipTriangleAgainstPlane(triangle, plane, isNearPlane) { let insideVertices = []; let outsideVertices = []; let insideIndices = []; // Classify vertices for (let i = 0; i < 3; i++) { let distance = Vec3.dot(plane.normal, triangle.vertices[i].position) + plane.distance; if (distance >= 0) { insideVertices.push(triangle.vertices[i]); insideIndices.push(i); } else { outsideVertices.push(triangle.vertices[i]); } } // Handle different cases if (insideVertices.length === 0) { return []; // Triangle is completely outside } if (insideVertices.length === 3) { return [triangle]; // Triangle is completely inside } // Triangle intersects the plane let newTriangles = []; if (insideVertices.length === 1) { let v0 = insideVertices[0]; let v1 = outsideVertices[0]; let v2 = outsideVertices[1]; let t1 = intersectLinePlane(v0.position, v1.position, plane); let t2 = intersectLinePlane(v0.position, v2.position, plane); let newVertex1 = interpolateVertex(v0, v1, t1); let newVertex2 = interpolateVertex(v0, v2, t2); // Maintain original winding order if (insideIndices[0] === 0) { newTriangles.push({ vertices: [v0, newVertex1, newVertex2] }); } else if (insideIndices[0] === 1) { newTriangles.push({ vertices: [newVertex2, newVertex1, v0] }); } else { newTriangles.push({ vertices: [newVertex1, newVertex2, v0] }); } } else { // insideVertices.length === 2 let v0 = insideVertices[0]; let v1 = insideVertices[1]; let v2 = outsideVertices[0]; let t1 = intersectLinePlane(v0.position, v2.position, plane); let t2 = intersectLinePlane(v1.position, v2.position, plane); let newVertex1 = interpolateVertex(v0, v2, t1); let newVertex2 = interpolateVertex(v1, v2, t2); // Maintain original winding order if (insideIndices[0] === 0 && insideIndices[1] === 1) { newTriangles.push({ vertices: [v0, v1, newVertex2] }); newTriangles.push({ vertices: [v0, newVertex2, newVertex1] }); } else if (insideIndices[0] === 1 && insideIndices[1] === 2) { newTriangles.push({ vertices: [newVertex1, v0, v1] }); newTriangles.push({ vertices: [newVertex1, v1, newVertex2] }); } else { newTriangles.push({ vertices: [v1, v0, newVertex1] }); newTriangles.push({ vertices: [v1, newVertex1, newVertex2] }); } } // For near plane, handle the special case of w < 0 if (isNearPlane) { newTriangles.forEach(tri => { tri.vertices.forEach(v => { if (v.position.w < 0) v.position.w = 0.00001; }); }); } return newTriangles; } function intersectLinePlane(p0, p1, plane) { let d0 = Vec3.dot(plane.normal, p0) + plane.distance; let d1 = Vec3.dot(plane.normal, p1) + plane.distance; return d0 / (d0 - d1); } function interpolateVertex(v0, v1, t) { let newPosition = v0.position.scale(1 - t).addInPlace(v1.position.scale(t)); let newVaryings = {}; for (let key in v0.varyings) { newVaryings[key] = v0.varyings[key].scale(1 - t).addInPlace(v1.varyings[key].scale(t)); } return { position: newPosition, varyings: newVaryings }; } function rasterizeTriangle(triangle) { switch (polygonMode) { case PolygonMode.FILL: rasterizeFilledTriangle(triangle); break; case PolygonMode.LINE: rasterizeLineTriangle(triangle); break; case PolygonMode.POINT: rasterizePointTriangle(triangle); break; } } function rasterizeFilledTriangle(triangle) { // Perform back-face culling if (cullMode !== CullMode.NONE && isBackFace(triangle.vertices[0].screenPosition, triangle.vertices[1].screenPosition, triangle.vertices[2].screenPosition)) { return; // Skip this triangle } // Calculate bounding box in screen space let minX = Math.min(triangle.vertices[0].screenPosition.x, triangle.vertices[1].screenPosition.x, triangle.vertices[2].screenPosition.x); let maxX = Math.max(triangle.vertices[0].screenPosition.x, triangle.vertices[1].screenPosition.x, triangle.vertices[2].screenPosition.x); let minY = Math.min(triangle.vertices[0].screenPosition.y, triangle.vertices[1].screenPosition.y, triangle.vertices[2].screenPosition.y); let maxY = Math.max(triangle.vertices[0].screenPosition.y, triangle.vertices[1].screenPosition.y, triangle.vertices[2].screenPosition.y); // Clamp to framebuffer boundaries minX = Math.max(Math.floor(minX), 0); maxX = Math.min(Math.ceil(maxX), currentFramebuffer.width - 1); minY = Math.max(Math.floor(minY), 0); maxY = Math.min(Math.ceil(maxY), currentFramebuffer.height - 1); for (let y = minY; y <= maxY; y++) { for (let x = minX; x <= maxX; x++) { if (doStipple && (x + y) % 2 === (frameCount % 2)) continue; let barycentric = calculateBarycentricCoordinates( x, y, triangle.vertices[0].screenPosition, triangle.vertices[1].screenPosition, triangle.vertices[2].screenPosition ); if (barycentric.u >= 0 && barycentric.v >= 0 && barycentric.w >= 0) { let depth = interpolate( triangle.vertices[0].screenPosition.z, triangle.vertices[1].screenPosition.z, triangle.vertices[2].screenPosition.z, barycentric ); // Early depth test if (doDepthTest && !currentShader.canWriteDepth) { if (depth >= currentFramebuffer.getDepth(x, y)) { continue; // Skip this pixel if it fails the depth test } } // Interpolate varyings let interpolatedVaryings = {}; for (let key in triangle.vertices[0].varyings) { interpolatedVaryings[key] = interpolateVec3( triangle.vertices[0].varyings[key], triangle.vertices[1].varyings[key], triangle.vertices[2].varyings[key], barycentric ); } let fragmentOutput = currentShader.fragmentShader(interpolatedVaryings, currentShader.uniforms); currentFramebuffer.setPixel( x, y, fragmentOutput.gl_FragColor.r, fragmentOutput.gl_FragColor.g, fragmentOutput.gl_FragColor.b, fragmentOutput.gl_FragColor.a ); currentFramebuffer.setDepth(x, y, fragmentOutput.gl_FragDepth || depth); } } } } function rasterizeLineTriangle(triangle) { drawLine(triangle.vertices[0], triangle.vertices[1]); drawLine(triangle.vertices[1], triangle.vertices[2]); drawLine(triangle.vertices[2], triangle.vertices[0]); } function rasterizePointTriangle(triangle) { drawPoint(triangle.vertices[0]); drawPoint(triangle.vertices[1]); drawPoint(triangle.vertices[2]); } function drawLine(v1, v2) { // Bresenham's line algorithm let x0 = Math.round(v1.screenPosition.x); let y0 = Math.round(v1.screenPosition.y); let x1 = Math.round(v2.screenPosition.x); let y1 = Math.round(v2.screenPosition.y); let dx = Math.abs(x1 - x0); let dy = Math.abs(y1 - y0); let sx = (x0 < x1) ? 1 : -1; let sy = (y0 < y1) ? 1 : -1; let err = dx - dy; // Paper added code to stop while(true) sooo, now its while(1) :P while (1) { if (doStipple) { if (!((x0 + y0) % 2 === (frameCount % 2))) drawPoint({ screenPosition: new Vec3(x0, y0, 0), varyings: v1.varyings }); } else { drawPoint({ screenPosition: new Vec3(x0, y0, 0), varyings: v1.varyings }); } if ((x0 === x1) && (y0 === y1)) break; let e2 = 2 * err; if (e2 > -dy) { err -= dy; x0 += sx; } if (e2 < dx) { err += dx; y0 += sy; } } } function drawPoint(vertex) { let x = Math.round(vertex.screenPosition.x); let y = Math.round(vertex.screenPosition.y); if (x >= 0 && x < currentFramebuffer.width && y >= 0 && y < currentFramebuffer.height) { if (doStipple && ((x + y) % 2 === (frameCount % 2))) return; let fragmentOutput = currentShader.fragmentShader(vertex.varyings, currentShader.uniforms); currentFramebuffer.setPixel( x, y, fragmentOutput.gl_FragColor.r, fragmentOutput.gl_FragColor.g, fragmentOutput.gl_FragColor.b, fragmentOutput.gl_FragColor.a ); currentFramebuffer.setDepth(x, y, vertex.screenPosition.z); } } function interpolateVec3(a, b, c, barycentric) { return new Vec3( interpolate(a.x, b.x, c.x, barycentric), interpolate(a.y, b.y, c.y, barycentric), interpolate(a.z, b.z, c.z, barycentric) ); } function calculateBarycentricCoordinates(x, y, v0, v1, v2) { let denominator = (v1.y - v2.y) * (v0.x - v2.x) + (v2.x - v1.x) * (v0.y - v2.y); let u = ((v1.y - v2.y) * (x - v2.x) + (v2.x - v1.x) * (y - v2.y)) / denominator; let v = ((v2.y - v0.y) * (x - v2.x) + (v0.x - v2.x) * (y - v2.y)) / denominator; let w = 1 - u - v; return { u, v, w }; } function interpolate(a, b, c, barycentric) { return a * barycentric.u + b * barycentric.v + c * barycentric.w; } function interpolateColor(a, b, c, barycentric) { return { r: Math.floor(interpolate(a.r, b.r, c.r, barycentric)), g: Math.floor(interpolate(a.g, b.g, c.g, barycentric)), b: Math.floor(interpolate(a.b, b.b, c.b, barycentric)), a: Math.floor(interpolate(a.a, b.a, c.a, barycentric)) }; } function interpolateVector(a, b, c, barycentric) { return { x: interpolate(a.x, b.x, c.x, barycentric), y: interpolate(a.y, b.y, c.y, barycentric), z: interpolate(a.z, b.z, c.z, barycentric) }; } function updateP5Canvas() { let imgData = new Uint8ClampedArray(defaultFramebuffer.colorTexture.data.buffer); let p5ImgData = new ImageData(imgData, width, height); createImageBitmap(p5ImgData).then(bitmap => { drawingContext.drawImage(bitmap, 0, 0); // Draw FPS let fps = frameRate(); textSize(22); fill('yellow'); text(fps | 0, 5, 25); }); } // ======================================================================= // END OF RENDERER // ======================================================================= // ======================================================================= // UTILITIES // ======================================================================= function generateSphereMesh(radius, latitudeBands, longitudeBands) { let positions = []; let normals = []; let indices = []; // Generate vertices and normals for (let lat = 0; lat <= latitudeBands; lat++) { const theta = lat * Math.PI / latitudeBands; const sinTheta = Math.sin(theta); const cosTheta = Math.cos(theta); for (let lon = 0; lon <= longitudeBands; lon++) { const phi = lon * 2 * Math.PI / longitudeBands; const sinPhi = Math.sin(phi); const cosPhi = Math.cos(phi); const x = cosPhi * sinTheta; const y = cosTheta; const z = sinPhi * sinTheta; positions.push(radius * x * 0.5, radius * y * 0.5, radius * z * 0.5); normals.push(x, y, z); } } // Generate indices for (let lat = 0; lat < latitudeBands; lat++) { for (let lon = 0; lon < longitudeBands; lon++) { const first = lat * (longitudeBands + 1) + lon; const second = first + longitudeBands + 1; indices.push(first, second, first + 1); indices.push(second, second + 1, first + 1); } } return { positions: new Float32Array(positions), normals: new Float32Array(normals), indices: new Uint16Array(indices) }; } function generateCubeMesh(s = 1) { const h = s / 2; const v = [ -h, -h, h, h, -h, h, h, h, h, -h, h, h, // front -h, -h, -h, -h, h, -h, h, h, -h, h, -h, -h, // back -h, h, -h, -h, h, h, h, h, h, h, h, -h, // top -h, -h, -h, h, -h, -h, h, -h, h, -h, -h, h, // bottom h, -h, -h, h, h, -h, h, h, h, h, -h, h, // right -h, -h, -h, -h, -h, h, -h, h, h, -h, h, -h // left ]; const n = [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0 ]; const i = [ 0, 2, 1, 0, 3, 2, 4, 6, 5, 4, 7, 6, 8, 10, 9, 8, 11, 10, 12, 14, 13, 12, 15, 14, 16, 18, 17, 16, 19, 18, 20, 22, 21, 20, 23, 22 ]; return { positions: new Float32Array(v), normals: new Float32Array(n), indices: new Uint16Array(i) }; } // ======================================================================= // END OF UTILITIES // ======================================================================= // ======================================================================= // EXAMPLE // ======================================================================= // Simple diffuse shader const diffuseVertexShader = function(attributes, uniforms) { let gl_Position = Mat4.multiplyVector(uniforms.MVP, new Vec4(attributes.position.x, attributes.position.y, attributes.position.z, 1)); let worldNormal = Mat4.multiplyVector(uniforms.modelMatrix, new Vec4(attributes.normal.x, attributes.normal.y, attributes.normal.z, 0)); return { gl_Position: gl_Position, varyings: { position: attributes.position, normal: new Vec3(worldNormal.x, worldNormal.y, worldNormal.z).normalizeInPlace(), } }; }; // Can store some fragment settings here to not execute them on every pixel let lightDir = new Vec3(0.5, -0.85, 0.4).normalizeInPlace(); const diffuseFragmentShader = function(varyings, uniforms) { // Normalize the position values to range from 0 to 1 let normalizedPosition = new Vec3( (varyings.position.x + 1) / 2, (varyings.position.y + 1) / 2, (varyings.position.z + 1) / 2 ); let diffuse = Math.max(0, Vec3.dot(varyings.normal, lightDir.negate())); return { gl_FragColor: { r: (normalizedPosition.x + diffuse) * 0.5, g: (normalizedPosition.y + diffuse) * 0.5, b: (normalizedPosition.z + diffuse) * 0.5, a: uniforms.alpha } }; }; const diffuseShader = new Shader(diffuseVertexShader, diffuseFragmentShader, false); let camera = { position: new Vec3(0, 1, -3), yaw: 0, pitch: 0, forward: new Vec3(0, 0, 1), right: new Vec3(1, 0, 0), up: new Vec3(0, 1, 0), speed: 0.002 }; let myFramebuffer, sphereModel, cubeModel; let lastMouseX = 0, lastMouseY = 0; const sensitivity = 0.0001; let cubeRotation = 0; const initialize = () => { myFramebuffer = createFramebuffer(100, 100); sphereModel = generateSphereMesh(1, 10, 10); cubeModel = generateCubeMesh(1); } const drawMesh = (mesh, modelMatrix, alpha = 1.0) => { diffuseShader.uniforms.modelMatrix = modelMatrix; diffuseShader.uniforms.MVP = Mat4.multiply(diffuseShader.uniforms.projectionMatrix, Mat4.multiply(diffuseShader.uniforms.viewMatrix, modelMatrix)); diffuseShader.uniforms.alpha = alpha; drawArrays(mesh.positions, mesh.normals, mesh.indices); } const update = () => { // ======================================================================= // EXAMPLE CONTROLS // ======================================================================= ['W', 'S', 'D', 'A', 'E', 'Q'].forEach((key, i) => { if (keyIsDown(key.charCodeAt(0))) { let dir = i < 2 ? camera.forward : i < 4 ? camera.right : camera.up; camera.position.addInPlace(dir.scale(camera.speed * deltaTime * (i % 2 ? -1 : 1))); } }); if (mouseIsPressed || frameCount === 1) { camera.yaw += (mouseX - lastMouseX) * deltaTime * sensitivity; camera.pitch -= (mouseY - lastMouseY) * deltaTime * sensitivity; camera.pitch = Math.max(-Math.PI / 2 + 0.01, Math.min(Math.PI / 2 - 0.01, camera.pitch)); } lastMouseX = mouseX; lastMouseY = mouseY; camera.forward.x = Math.sin(camera.yaw) * Math.cos(camera.pitch); camera.forward.y = Math.sin(camera.pitch); camera.forward.z = Math.cos(camera.yaw) * Math.cos(camera.pitch); camera.forward.normalizeInPlace(); camera.right = Vec3.cross(new Vec3(0, 1, 0), camera.forward).normalize(); camera.up = Vec3.cross(camera.forward, camera.right).normalize(); // ======================================================================= // END OF EXAMPLE CONTROLS // ======================================================================= // ======================================================================= // EXAMPLE RENDERING // ======================================================================= // Enabling stippling, Significantly improves performance setDoStipple(true); // Use Backface Culling - Already on by default setCullMode(CullMode.BACK); // Clear default framebuffer clearFramebuffer(0, 0, 0, 1); // Set PolygonMode to Fill - Already on by default setPolygonMode(PolygonMode.FILL) // Options (FILL, POINT, LINE) // Bind the Diffuse Shader diffuseShader.use(); // Setup the View and Projection matrices for the Diffuse Shader diffuseShader.uniforms.viewMatrix = Mat4.lookTo(camera.position, camera.forward, camera.up); diffuseShader.uniforms.projectionMatrix = Mat4.perspective(radians(90), width / height, 0.1, 100); // Draw the Opaque Diffuse Sphere drawMesh(sphereModel, Mat4.translate(new Vec3(0, 0, 0))); // Draw the Transparent Diffuse Sphere setBlendFunction(BlendFunction.ALPHA_BLEND); drawMesh(sphereModel, Mat4.translate(new Vec3(1, 0, 0)), 0.5); setBlendFunction(BlendFunction.NORMAL); // Draw the Opaque Diffuse Cube cubeRotation += 0.01; // Adjust this value to change rotation speed let cubeModelMatrix = Mat4.multiply( Mat4.translate(new Vec3(-1, 0, 0)), // Adjust position if needed Mat4.rotation(cubeRotation, new Vec3(1, 1, 1)) // Rotate around (1,1,1) axis ); drawMesh(cubeModel, cubeModelMatrix); // Bind the Offscreen Custom Framebuffer bindFramebuffer(myFramebuffer); // Clear Offscreen Custom framebuffer to red clearFramebuffer(1, 0, 0, 1); // Draw a Opaque Diffuse Cube to the Offscreen Custom FrameBuffer drawMesh(cubeModel, Mat4.translate(new Vec3(0, 0, 0))); // Blit the Offscreen Custom Framebuffer to the default Framebuffer blitFramebuffer(myFramebuffer, null, 0, 0, myFramebuffer.width, myFramebuffer.height, 0, 0, 100, 100, true, true); // ======================================================================= // END OF EXAMPLE RENDERING // ======================================================================= } // ======================================================================= // END OF EXAMPLE // =======================================================================

Codecasts

Made by awesome people

Recently Published