Chess Puzzles in ThreeJS

I wanted to get back into some side projects, so I decided to take another look at my older project “Chess Puzzles 3D.”

I was both proud and disappointed in this project. I wrote the GL code from scratch, including the shading code, and that was great, but it was a lot of work just to get something that looks like it was from 1996.

I wasn’t sure what to do and felt stalled, as I didn’t know if I could make the site much better.

One day, though, I was reading about how someone described WebGL as a rasterization library. Not a graphics library, but a rasterization library.

WebGL does Bresenham’s line algorithm, a triangle fill algorithm, and has all sorts of utilities for efficiently loading arrays of data and applying transforms to them in parallel. It doesn’t even do Phong or Gourad shading out of the box – you need to supply that. Want matrix utilities to actually create those transforms? Gotta go find them or implement them. I’m oversimplifying things a bit – OpenGL and WebGL are amazing innovations, but it’s good to realize what small stepping stones they are relative to the bigger picture.

When you think about it like that, WebGL is a lot like using C rather than assembly, and C is pretty low-level by today’s standards. No one expects you to write a game to compete with “The Last of Us, Part 1” in C with no libraries in your spare time.

So, I decided it was time to try out a game engine and work with some power tools – ThreeJS in this case.

Here’s a site I’m a lot happier with. Shading, animation, mobile support for pinch-zoom/tilt – it’s a much better experience.

New ThreeJS based Chess Puzzles

I used the same “chess3d” url path, so older links now go to the new site, but some older blog posts might seem a little confusing. You can still see the old site at https://stevenvictor.net/chessGL

My next task is to try out mouse and touch support for actually dragging and dropping pieces in 3D.