My goal is to create this specific illustration.
https://i.sstatic.net/5AfdW.png
This project requires the usage of TypeScript.
The Code:
The code is organized across multiple files. Within the scenegraph file, there's a function that visits a group node and executes a Depth-First Search (DFS) method as shown below:
visitGroupNode(node: GroupNode, lvl: number = 0) {
// The DFS logic goes here...
}
The crucial part involves the visitBoxNode and visitSphereNode functions.
For rendering a sphere, the visitSphereNode function calls a render function defined in the Sphere.ts file like so:
render(shader: Shader) {
// Rendering process for spheres...
}
Full code available on pastebin: HERE
Shader file link on pastebin: HERE
The shader file includes both vertex and fragment shaders, with the vertex shader structured as:
// Vertex shader logic...
void main() {
// Transformation calculations...
}
And the fragment shader designed as:
// Fragment shader logic...
void main(void) {
// Color computations...
}
Similar code for boxes can be found on pastebin: HERE.
Issue: The colors are displaying inconsistently.
https://i.sstatic.net/JyMZK.png
Question:
It's evident that the sphere should utilize a Uniform color while the box should have a Varying color. How can I achieve their simultaneous display on the canvas using the provided GLSL shader file(s)?