3D-Rendering-Website
My 3D-Rendering Website
Ver2.0
Hi there, this version was a reinstated and self made practice version of Version 1, where I introduced and implemented more advanced features like Camera movement, go here for Ver2.0.
What should i know?
The engine used to render the 3D graphics are self-made and do not rely on previously written code, instead it uses the canvas element in order to draw the graphics manually via canvas.getContext(“2d”) which means it is CPU-rendered, not GPU (which is why performance after a dozen of pengers are spawned)
The project can also handle any resolution, so it does not matter if youre playing 1920x1080 or 2560x1440 or idk, just know graphics cannot be messed up by size.
When entering the game, you will be greeted with a penger in a cube.
WARNING
The camera movement is funky, WASD QE and the Arrow keys are strictly related to the direction they face, W only north, S south, A left, D right… so ORIENTATION DOES NOT MATTER AT ALL!! controls labelled with (WARNING) means they are the controls im talking about.
How do i use this? (CONTROLS)
There are a couple of controls that are at your disposal:
- WASD - movement (WARNING)
- QE - move up and down (WARNING)
- Arrow keys - move the camera rotation (WARNING)
- T - teleport back to spawnpoint
- Y - set new spawnpoint at where you currently are
- Z - completely stop the Cameras velocity
- V - toggle vertice view
- B - toggle wireframe view
- M - delete all existing objects
- 1 - select cube to spawn when hitting enter
- 2 - select penger to spawn when hitting enter
- Enter - spawn an item of the currently selected at the cameras position but NOT orientation
If you are curious: Go back up, click the link, and mess around with my engine. And thanks for reading this far!
Ver1.0 (OLD)
Hi there, this project was made in order to understand the basics of how things are rendered.
In order to use this website, go here for Ver1.0.
How do i use this?
You create two things…
- 🐧 Tux penguin
- 🧊 Cube
Which will randomly appear on a position in the box.
Thats literally it.
You can wipe things with the clear button.
AND you can change the FPS rendering from
1-144 FPS with the sliderand change the wireframe color.