Articles by Josh Marinacci
-
How to make VR with the web, a new video series
Introducing a new 7-part video series with Josh Marinacci: How to make a virtual reality project in your browser with three.js & WebVR. These short tutorials show how to create an interactive 3d birthday card in WebVR that you can share and view in your desktop web browser, in a VR headset, or on a smartphone device. All you need is a little time and a little JavaScript know-how.
-
Performance-Tuning a WebVR Game
The smaller the app, the faster it loads. Here's how I reduced the size of a favorite WebVR game, optimizing font, audio, and image files to hit my target: 10-second load times in VR headsets.
-
Make your web layouts bust out of the rectangle with the Firefox Shape Path Editor
CSS Shapes lets your web designs break out of the rectangular grid. Using a new CSS standard, text can flow, images can be rounded, even just a few non parallel lines can make your site stand out and make your brand distinctive. With the Shape Path Editor in Firefox 62 you can visually edit the shape directly from the CSS inspector, using Firefox Developer Tools to select the element whose shape you want to modify.
-
Share your favorite images and videos in VR with Mozilla Hubs
Mozilla Hubs is a VR chat system that lets you walk and talk in VR with your friends, no matter where in the world they are. Now you can share virtually any kind of media with everyone in your Hubs room by just pasting in a URL. Anything you share becomes a virtual object that everyone can interact with. From images to videos to 3D models, Hubs enables sharing and collaboration across devices (laptops, phones, headsets) and OSes.
-
360° Images on the Web, the Easy Way
One of the most popular uses for VR today is 360° images and video. These are easy to discover and share online, and you don’t need to learn any new interactions to explore the 360° experience. But building 360° views is not as easy as exploring them. In this post, Josh shows you how to easily build a 3D tour using A-Frame and Glitch.
-
Building an Immersive Game with A-Frame and Low Poly Models
In the first part of this two-part tutorial, Josh Marinacci builds an immersive WebVR game using A-Frame, and walks through the key concepts and code for adding a physics engine, managing collisions, and adding 3d models and effects.
-
Building an Immersive Game with A-Frame and Low Poly Models (Part 2)
In Part 2 of this two-part tutorial on using A-Frame to build an immersive game, Josh Marinacci shows how to add lighting, audio, responsiveness and polish to the simple game he developed in Part 1.
-
CSS Grid for UI Layouts
In this article I’ll show you how to use CSS Grid to improve application layouts that need to respond and adapt to user interactions and changing conditions, and always have your panels scroll properly.
-
Meta 2 AR Headset with Firefox
One of the biggest challenges in developing immersive WebVR experiences today is that immersion takes you away from your developer tools. With Meta's new augmented reality headset, you can work on and experience WebVR content today without ever taking a headset on or off, or connecting developer tools to a remote device.
