• Blog
  • Mozilla Reality
  • Firefox Reality
  • Merchandise

ThreeJS

A collection of 25 posts

voxels

VoxelJS: Chunking Magic

A couple of weeks ago I relaunched VoxelJS [https://blog.mozvr.com/voxeljs-next/] with modern ThreeJS and modules support. Today I'm going to talk a little bit about how VoxelJS works internally, specifically

Josh Marinacci Josh Marinacci
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.

Josh Marinacci Josh Marinacci
JingleSmash

Jingle Smash: Performance Work

This is part 5 [https://blog.mozvr.com/tag/jinglesmash/] of my series on how I built Jingle Smash, a block smashing WebVR game Performance was the final step to making Jingle Smash

Josh Marinacci Josh Marinacci
ThreeJS

Building an In-Game Editor

This is part 4 of my series [https://blog.mozvr.com/tag/jinglesmash/] on how I built Jingle Smash, a block smashing WebVR game Jingle Smash [https://vr.josh.earth/webxr-experiments/physics/player.

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
ThreeJS

ThreeJS Intermediate Skill Tutorials

ThreeJS [https://threejs.org/] 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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
Tutorials

Quaternions are Spooky

I’m going to take a break from particles [https://blog.mozvr.com/threejs-particles/] for a bit. I’ve got a ton more stuff to cover like alpha control, using quads instead of

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
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

Josh Marinacci Josh Marinacci
ThreeJS

How to Draw Lines and Edges

So many articles about ThreeJS [https://threejs.org/] 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

Josh Marinacci Josh Marinacci
ThreeJS

ThreeJS secretly supports True Type Fonts

I just learned that ThreeJS supports TrueType fonts.

Josh Marinacci Josh Marinacci
Additional Links
  • Mozilla Mixed Reality
  • A-Frame
  • A-Frame Blog
  • Twitter
  • GitHub
Mozilla
  • About
  • Contact Us
  • Donate
  • Privacy
  • Cookies
  • Legal