Adventures in Three.js - Part 1

Introduction

Ever since I completed my undergraduate degree, I've done very little development at home. I've never had a lot of motivation to do personal projects, even though I understand some of the benefits associated with that. While personal growth is possible in a work environment, it is often stunted by deadlines, conventions, and accepted technologies. Nowhere is this more limiting than a government environment.

As a result, much of my personal growth has stemmed from the creation and refinement of pattern libraries. At each job, I would introduce patterns that would automate or simplify various tasks. Developing such patterns encourages growth because you aren't writing code to meet a specific need once, you're writing code to meet a specific need in several places. It requires forethought, asking questions like: "When will this be used?" "How might someone need to change the visual appearance?" "Is there a faster way to do this without sacrificing flexibility?" "Does the flexibility unduly increase the complexity?"

Some of the patterns I've revisited have included:

Automated tabular data display

ColdFusion provides the <cfgrid> tag to quickly dump the contents of a dataset. Unfortunately, it's a very old tag that has received few updates; it doesn't meet accessibility guidelines and doesn't allow much customization. I've often felt the need to automate this, so it is a pattern I've visited several times. The latest iteration made it easy to start with a basic dump and tweak the code until you got what you wanted. It automated pagination, creation of sort links, grouping of data, and calculating and displaying subtotals.

Form validation

This is a pattern I visited in Delphi and in ColdFusion, addressing many of the same requirements. The latest iteration of this made it easy to: ensure that required fields were not empty; ensure that values matched an accepted pattern; ensure that numeric values fell within a certain range; and ensure that values that should be unique were unique.

Database interaction

This was a pattern I attempted before exposure to CFWheels. The Model implementation by CFWheels is certainly a lot more robust, but I've had a certain amount of luck creating this pattern for myself. My own experience attempting this sort of automation has certainly taught me a lot. My latest iteration of this automatically retrieved the metadata for each field in a specified table and used that metadata to validate any data provided to those fields. It prevented the user from assigning values to calculated fields and automatically retrieved the values for calculated fields and auto-increment fields when a record was inserted or updated. It greatly simplified some of the work I was doing maintaining existing code to manipulate tables with more than 200 fields. Did it add overhead? Yes. Did it reduce development time? Significantly! Did it increase readability? Most assuredly it did.

I subscribe to a couple of newsletters that help me keep up with the web development community. You might understand how exciting it is to see how things are progressing. You might also understand how frustrating it can be if you can't use the technology or play with it much. I often couldn't utilize these technologies because they had usability issues, compatibility problems, or accessibility deficiencies. Nonetheless, I won't be able to keep up if I take the chance to play with the new technology.

What to do?

Developers tend to face some of the same problems that other creators face—writer's block—especially when starting something completely new. The more effort it takes to create a simple application that says, "Hello, world!" the harder it can be to get started. I need a project that motivates me and I need a goal. What challenge will keep me moving forward? Is there a community I can serve?

Of course, for me to get started, I need a simple goal to start with and, for me to keep going, I need to have long-term goals to strive for. My initial goal must be significant enough to overcome the initial writer's block and the long-term goals motivating enough to bring me back to the drawing board.

Dungeon Generator

I was talking with a friend about a project he was working on. He has played Dungeons & Dragons for decades and was working on a dungeon generator to learn PHP and become more familiar with AJAX. His generator works a lot like a text adventure: each room is described, but there is no overall map of the dungeon. I had toyed with this idea for a long time, having played text adventures as a kid and drawing out dungeons for my siblings to crawl, so I wanted to try a different take. Many of the dungeon generators I saw online were two-dimensional, either creating a pure two-dimensional maze and building out rooms with it or generating rooms and opening up passages between them. The deficiency, obviously, was the third dimension.

"This is the perfect opportunity for me to play with a JavaScript 3D library." I'd played with Phaser some in the past, but it doesn't do much in three dimensions. I decided to try out Three.js to see if I could get it to work. Within a week, I had a simple page that would ask for the dimensions of the dungeon, generate a pure three-dimensional maze, display that maze with Three.js, and allow you to fly around the outside of it. You can find the code on Github.

As I'm writing this, the current iteration of this code is creating 5x5x5 cubes and connecting them with corridors. The next thing I want to do is clean up the code. I want to create a Space class that encapsulates some of the code specific to a 5x5x5 space, such as displaying the space, checking for existing connections to the space, and checking to see if any nearby spaces are not connected. After I do that, I want to start building rooms out of these spaces. The easy path would dictate creating rectangular prisms, but an underground dungeon built out of a natural cavern wouldn't reflect this building technique, so I've come up with another algorithm that might simulate that better.

My aim is not only to come up with a working dungeon generator (there's a lot more to it than generating rooms and passages), but also to talk about the process. What challenges have I met? How did I overcome them or work around them? (In Dungeons & Dragons, finding a way around the challenge can also count as defeating it.)