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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay