DEV Community

RedstoneWizard08
RedstoneWizard08

Posted on • Edited on

Terrible 3D: A new (and horrible) 3D game engine.

Terrible 3D (also known as t3d)

So, for my coding club (which I run after school days), I've had to try to develop a 3D game engine from scratch, because I love pain and I want to overcomplicate things.

Jokes aside, the real reason is that I find Babylon.js and THREE.js a bit hard to work with, even for someone like me with six years of JavaScript under my belt, so I wanted to create a more simple engine for my club members to use, since I'm teaching them the first things they know about coding in JavaScript, and I don't think using THREE.js or Babylon.js would be very good with absolute beginners, even with a math teacher supervising the club.

Choosing a tech stack

For my project, I decided to go with TypeScript for the main language, since it has to be made in JavaScript (for the most part) to support usage in JavaScript, and I don't want to torture myself because of type errors.

I chose to use Vite to package and test my project, since it has the library mode feature to act as a blazingly fast compiler.

For styling elements (like the size of the canvas, and, in the future, HUD/GUI elements that are a second canvas), I chose to use SASS (via .scss files), since it allows me to not suffer whilst coding css styles.

To debug, I'm using Puppeteer with a little script I made to redirect console error output to a linux shell. (My school blocked the inspector on our Chromebooks, where I do most of my coding.)

Also, I'm working on rewriting the core engine module in Rust and compiling that to WASM so I can achieve better performance. Even with minified and optimized JavaScript code it was still slow in WebGL and WebGL2.

How do I install it?

If someone hasn't already taken it (it's not published yet), here are some example commands:

# With NPM:
npm install @t3d/core

# With Yarn:
yarn add @t3d/core

# With pnpm:
pnpm add @t3d/core
# -- or --
pnpm install @t3d/core
Enter fullscreen mode Exit fullscreen mode

Where's the code?

Here's the code: https://github.com/ISB-Coding-Club/t3d
Contributions are welcome, and so are feature requests, but I can't guarantee I'll have the time to look at them too quickly because of the mountain of homework I'll always have.

Top comments (0)