Tutorials Wrapping up a week of WebVR experiments Earlier this week, we kicked off a week of WebVR experiments [https://hacks.mozilla.org/2019/04/sharpen-your-webvr-skills-with-experiments/] with our friends at Glitch.com [http://]. Glitch creator and WebVR expert Andrés Cuervo [https:
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 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 [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
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 [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
cartography Introducing A-Terrain - a cartography component for A-Frame Add maps to your A-Frame projects!
WebVR Using glTF Models with A-Frame You may have found your way to this blog because Mozilla just announced a new challenge [https://challenges.mozilla.community/webvr-challenge/] with Sketchfab models, or maybe you just want a way to use
Tutorials Creating a new A-Painter brush using the Brush API In this tutorial we will take the minimum steps required to create a very simple brush for A-Painter, a VR painting experience made by Mozilla VR [http://mozvr.com] built with A-Frame [http:
Tutorials Mastering A-Painter It has been almost four months since we released A-Painter [https://blog.mozvr.com/a-painter/]. We've received lots of compliments, help and feedback from users and developers. Thanks for your support! Now that
Tutorials Quick VR Prototypes Designing for the VR web is nothing like designing for the desktop and mobile web. Every process and principle must be rethought, including how we prototype our ideas. With a simple cylinder and