voxels VoxelJS: Chunking Magic A couple of weeks ago I relaunched VoxelJS with modern ThreeJS and modules support. Today I'm going to talk a little bit about how VoxelJS works internally, specifically how voxels are represented and
voxels VoxelJS Reboot If you’ve ever played Minecraft then you have used a voxel engine. My 7 year old son is a huge fan of Minecraft and asked me to make a Minecraft for VR.
JingleSmash Jingle Smash: Performance Work This is part 5 of my series on how I built Jingle Smash, a block smashing WebVR game Performance was the final step to making Jingle Smash, my block tumbling VR game, ready
ThreeJS Building an In-Game Editor This is part 4 of my series on how I built Jingle Smash, a block smashing WebVR game Jingle Smash is a WebVR game where you shoot ornaments at blocks to knock them
Tools Immersive Media Content Creation Guide Firefox Reality is ready for your panoramic images and videos, in both 2D and 3D. In this guide you will find advice for creating and formatting your content to best display on the
JingleSmash Jingle Smash, a WebVR Puzzler For the past few years I've made some sort of a game or digital creation to share with the world at Christmas. So of course this year I had to make a VR
ThreeJS Jingle Smash, a WebVR Puzzler For the past few years I’ve made some sort of a game or digital creation to share with the world at Christmas. So of course this year I had to make a
ThreeJS Low Poly style Terrain Generation One of the magical things about using 3D on the web is that we have the rest of the browser APIs available to us. This includes 2D canvas. There are a bunch of
ThreeJS Procedural Geometry: Low Poly Clouds Clouds are similar to the procedural trees that we created last time. The difference is that we can’t just add some cloud shaped objects together. Instead we will merge several spheres and
ThreeJS Procedural Geometry: Trees I’m not a 3d artist. I don’t know how to use Blender or Maya. Instead I create 3D shapes with code. Making geometry from scratch is fairly hard though. You have
ThreeJS Water Ripples with Vertex Shaders WebGL, and therefore ThreeJS supports vertex shaders. And they are awesome. Why? Because they can do things on the GPU that would be costly or impossible on the CPU. Today we will make
Tutorials Customizing Vertex shaders As a graphics programmer when you first hear about shaders they seem magical. Write tiny bits of code in this weird language and they make crazy effects possible at lightning speed. Then you
ThreeJS Cartoon Outline Effect In my 3D games and designs I often go for a cute low-poly cartoonish style. I have long wanted to give my models an actual cartoon-like outline, so that’s what we’re
ThreeJS ThreeJS Intermediate Skill Tutorials ThreeJS is probably the most used 3D JavaScript library on the web and it’s pretty easy to get started with. However, I found there is little beyond the introductory tutorials. You quickly
ThreeJS Particles Go Wild with Textures Just a few more posts on particles, I promise. This article is part of my ongoing series of medium difficulty ThreeJS tutorials. I’ve long wanted something in between the intro “How to
Tutorials Snowflake Particles: When Points just aren’t enough So far everything we’ve built with particles have been classic GPU particles, meaning we used points and the entire lifetime of a particle is calculated from time and constants available when the
Tutorials Reverse Particles and Fading Away I need to build a sort of vacuum cleaner effect for a little game I’m working on. This means the particles should be distributed randomly in an area then come back to
Tutorials Quaternions are Spooky I’m going to take a break from particles for a bit. I’ve got a ton more stuff to cover like alpha control, using quads instead of points, and other fun effects,
ThreeJS ThreeJS Particles: Color Interpolation Our particle system is working pretty well. We can spawn particles whenever we want, in any direction with any position, velocity, or acceleration. We can even set the color. What we can’t
ThreeJS ThreeJS Particles: Recycling Last time we figured out how to do all of the math on the GPU using only time as a per/frame input. This is great but introduces some challenges. Today we will
ThreeJS ThreeJS Particles, faster Last time we made particles which do all of the work on the CPU side. While the CPU is probably fast enough to make this work, the time it takes to transfer the
ThreeJS ThreeJS Particles This article is part of my ongoing series of medium difficulty ThreeJS tutorials. I’ve long wanted something in between the intro “How to draw a cube” and “Let’s fill the screen
ThreeJS ThreeJS Lines and Faces Remember how last time I said lines were hard and you can’t really do thick ones? I just found another (undocumented) example in the ThreeJS repo that does fat lines. I think
ThreeJS How to Draw Lines and Edges So many articles about ThreeJS are introductory. This is great when you’re just getting started, but I already understand what geometry and materials are and how they combine to meshes which are
ThreeJS ThreeJS secretly supports True Type Fonts I just learned that ThreeJS supports TrueType fonts.