Right at the beginning of 2022, we launched an all-new editor for Glitch, with the promise of lots of improvements to come. So we’re excited to talk about how Fastly is powering some of the coolest new features.

If you don’t know Fastly, they’re a super popular, super powerful platform for delivering sites and apps more quickly, reliably and securely. So we started with what Fastly is best known for — their content delivery network, or CDN. Now, when you upload assets in the all-new Glitch editor, they’re automatically delivered by Fastly’s super-fast CDN, and you don’t have to do any configuration or additional deploy process. (It even works great with assets like 3D objects, which are newly supported in the Glitch editor!)

But what’s even more exciting is the possibilities this opens up for the future. Fastly has a really clever new edge platform called Compute@Edge that is lightning fast and will let you build smarter, more dynamic sites more easily than ever. We’re gearing up for being able to publish your Glitch projects to Fastly — including the long-awaited desire to have separate dev and production versions of your app, with deploy as simple as a click. When it all comes together you'll be able to publish lightning-fast static sites and Compute@Edge will let you build more sophisticated Glitch apps that scale infinitely — with 100x faster code execution startup times than other serverless solutions!

You can try out the fast new assets in the Glitch editor today, and then sign up to join the waiting list for the exciting beta preview to come!

We’re building an all new integration with Fastly's Compute@Edge that lets you build dynamic sites without the overhead of managing a server and lets you build more sophisticated Glitch sites that scale infinitely – we're talking 100x faster code execution startup times than other serverless solutions!

Taking your apps to the Edge: Fastly x Glitch

The web has been evolving since its earliest days—creativity and innovation drive that constant change. Through vision, code, and collaboration people reshape the web and create new experiences and sometimes even new genres. That idea of people building together is why we make Glitch, and why we’re excited to give you an early look at some work we’ve been doing which allows you to deploy to DigitalOcean straight from the Glitch editor, with one-click!

Glitch is the easiest way to build the web, but sometimes you need a little more after the build. Maybe your full stack app needs more compute power as it grows. Maybe that SQLite database is bursting at the seams and you need an upgrade to Postgres or MySQL. DigitalOcean has you covered. Just bring an API token, add it to your project’s .env file, and with a couple clicks you’ll deploy your app to DigitalOcean’s App Platform. The best part? Redeploying only takes a click, so you can keep building on Glitch and make your changes live on DigitalOcean any time you want. 

Getting started is easy! You’ll need a DigitalOcean account. If you don’t have one and want to try it out you can sign up here and get $100 in free credits for new accounts. On the DigitalOcean side all you’ll need to do is to create an access token. Then, in your project,  you just need to add your access token to your .env file as a variable called DIGITALOCEAN_ACCESS_TOKEN. Glitch will walk you through a couple quick prompts to get your project prepared and create a new app on App Platform. In just a minute, you’ll have your app set up for one-click deploy to DigitalOcean! 

Deploy a Glitch App on DigitalOcean

Want to learn more about the details of deploying to DigitalOcean? We’ve got a Help Center article all about it.

Our love of building together applies to Glitch, too. We share new features early because we want to evolve them along with the community. So we’ve created a playlist of apps to help you get started deploying to DigitalOcean and a form to collect community feedback. If you have a feature suggestion or you make an app that deploys to DigitalOcean we want to hear about it—we would love to feature it on the blog or in our newsletter. We can’t wait to see what you build with Glitch and DigitalOcean.

Glitch and DigitalOcean make deploying your apps even easier

Hello there! We are now in month two of 2022, can you even believe it? It might feel like January went by too fast (or not—What is time but a social construct??) but we’re convinced that’s only the case because so many things happened during the last month. Let’s recap! 

We started the new year off with the delivery of our biggest update ever to the new editor! Glitch’s editor does all the stuff you’d expect: writing HTML, CSS, JavaScript, etc., but it also has features you might not be used to! How does previewing 3D objects in the editor, or better inline error reporting sound? Check out all of the updates to the Glitch editor in the announcement post from earlier this month.

We also announced our partnership with Fastly, to bring Compute@Edge, their serverless compute platform to Glitch! Now it’s even easier to create high-quality, customized digital experiences on Fastly’s edge cloud platform through an integration that lets you deploy Glitch apps right to Compute@Edge. Sign up to join the waiting list for our upcoming beta.

However, the best part of our month was getting to see all of the creative ways the Glitch community expresses themselves on the web. ✨ Here are some of our favorite projects. 

~keyframe-string-generator creates Bezier animation curves for AI art, by @chigozienri

~synonymous-hip-tote is a graduate datavis course project that visualizes the changes in hate crime stats over administrations.

~athousandeyes is an interactive visual poem by @aceslowman

~gesture-as-meme by@liuleslie is an essay analyzing types of movement as a meme on Tiktok

~bird-oclock by @blprnt is a live clock using photos of birds from around the globe!

~korean-typing by @rebeccasaw lets you type in Hangul (Korean alphabet) on an American keyboard.

~qr-clock is a QR code clock by @pi43r. Wild how QR codes are so...normal. Wasn’t the case 15 years ago!!

~comparing-pixelated-scaling by @bhaviksingh compares the different drawing approaches of three different 2d-drawing web tools.

~dice-clock is a clock that tells time using dice by@dylanwh. Love clock themed projects for January.

@cogdog, the creator of ~twitter-time-tunnel wrote about building a “Twitter time tunnel” on Glitch, inspired by a tweet of Anil’s!

~statues-game is a game by @ma.ring.forest, inspired by Squid Games, that detects body movement to move you forward, but you better stop when the doll starts looking!

~what-kind-of-girl-scout-cookie-are-you by @slynch-github and @virginia.m.lynch, finally answers the question that has vexed generations!

Clive Thomspons wrote about his newest creation on Glitch, ~weird-old-book-finder, which is a search engine for...weird old books!

And ~random-old-book by @jessamyn of ~weird-old-book-finder that randomizes the experience!

January was truly the month of ~~ Wordle ~~ and the Glitch community took Wordle and remixed it to create delightful versions including the following:

~brdl by @hootalex, followed by the UK version. here are the ~birdcodes

Several of these have been added to this list of Wordle clones from around the world, and check out ~wordle-invaders which is a game that uses Wordle tweets to populate the field.

Wow, you all really kicked January off to a great start! We can’t believe it’s already February. 😅  As always, if you have Glitch projects or playlists you built or love and want us to feature, either share them on the forum, tweet them to us @glitch or email community@glitch.com—we’d love to see your work in our next roundup! ✨

The project featured in this post’s header image is ~procedural-snowflake, another banger built by @potch which generates really cool snowflakes.

Hello there! We are now in month two of 2022, can you even believe it? It might feel like January went by too fast (or not—What is time but a social construct??) but we’re convinced that’s only the case because so many things happened during the last month. Let’s recap!

Last month on Glitch, the January 2022 edition

There’s a lot of noise and excitement around rise of virtual reality, shared environments, and something called the metaverse. Some of the biggest players in tech are eager to stake their claims, telling us that the metaverse is the Next Big Thing.

But the truth is, it’s already here. The open metaverse is 100 times as large as any of the commercial platforms, in terms of what regular people have created. The metaverse is not going to be controlled by big tech. It’s being built on open tech by a wide—and wild!—variety of creators across the internet, right now.

First, the basics: Legions of creators and millions of users have been chipping away at the metaverse for years. At Glitch, we want to give voice to all of these people and communities, so we don’t see just a single metaverse. We think the future is an open metaverse, built by a diverse set of stakeholders, from corporate behemoths to individual trailblazers. Sure, it’s high-tech experiences that happen in fancy VR headsets. But it’s also fun and silly stuff you build in your browser with friends. 

The most exciting part is, this isn’t just the future: It’s an exciting, weird, fun, inspiring present that millions of people are already participating in, ready to welcome millions more.

In short, the open metaverse is centering creators, communities and a diverse set of implementations, rather than a top-down vision dictated by any one company. If it helps, think of the open metaverse as more of a multiverse—there are lots of different realities, and they overlap and intersect in interesting ways

The loudest players in current discussions of the metaverse are Facebook and Microsoft, each eager to extend their legacy strengths into the next generation of social technologies. Horizon Worlds is Facebook’s attempt to create a shared, virtual environment to the masses, putting their Oculus line of VR devices at the center of social technology. Microsoft wants to be a player, too; they’ve been working for years  to bring their own social VR technologies to market in both software and hardware, like the business-focused Hololens.

While these tech titans have deep pockets, the truth is they’re catching up to an already-thriving market—and today’s creators aren’t sitting around and waiting for them to perfect their technologies. 

That brings us to the open metaverse, and its constellation of different virtual technologies that go far beyond the limited visions of any one company. Together, the communities of the open metaverse are defining the future of virtual spaces for play, collaboration, exploration and expression.

It is genuinely open, run by communities, not just companies. That means it's not owned, controlled or dominated by any one tech giant. At its best, the metaverse resembles today’s web in that it can be built entirely on open, interoperable technologies. It also resembles the best of today’s internet in another key way: Its biggest innovations will come from the unexpected, out-of-nowhere creators and coders, not from giant corporations. Importantly, it’s also evolving out of existing communities, platforms and technologies — it is not being built from scratch or trying to reinvent the wheel for problems the web has already solved.

The second key trait of the open metaverse is that it is huge. For example, in VR, content that makes up the open metaverse is already 100x the size  of the corporate metaverse platforms. (This comes from comparing the number of apps on centralized VR/AR/XR platforms to the number of analogous creations on open platforms like WebVR.) That size and scale aren’t yet obvious because it’s not centralized and is being created across a variety of distinct universes of content. But it is huge, and growing rapidly.

The third key trait is that the open metaverse is made of, by and for the web. You can put the web into it, and put it into the web. This is where the biggest tech companies tend to fall down the most — they’re too often building their platforms in opposition to the web, or at the very least treating the web as an afterthought. But View Source powers the open metaverse every bit as much as it did the start of the web itself.

Just as important in understanding this vision is knowing what the open metaverse is not:

The open metaverse is not dependent on hardware or software provided by any giant company, or creation or distribution platforms controlled by those companies

The open metaverse does not require connections to blockchain-based technologies (though it certainly can use them where they help solve problems!)

The open metaverse is not boring and awkward and primarily focused on how people have meetings, it’s about doing things that are valuable or meaningful or fun, and creating things that are as likely to be social and expressive as they are monetizable.

The open metaverse is not some vague vision of the future that a company is trying to pitch, it’s just a way of looking at the many thriving, healthy, fascinating, rapidly-evolving community creations that already exist today, but are too often overlooked.

Many of the most challenging technical problems already have example code provided to support advanced uses. You can incorporate 3D positional audio, stream users’ video into your 3D environment, even build a first-person shooter. All using free, open web technologies that will run on everything: desktop browsers, mobile phones, and the latest VR hardware.

There are many different subsets of the open metaverse, and some will be familiar to those who’ve been following the metaverse conversation, while others will not. Let’s consider some that get overlooked in many discussions. 

VTubers and virtual characters: The last decade has seen the rise of the VTuber, a fascinating cultural phenomenon where digital avatars are built and operated like puppets. Using motion capture and other cutting edge technologies, a wholly CG character can interact in real time with a streaming audience. And VTuber communities are often home for cultures and groups that get overlooked or marginalized in conventional gaming or media.

WebXR: Sometimes called WebVR, WebXR is a blossoming creative field that uses the familiar building blocks of the open web to construct fully immersive 3D environments. A growing ecosystem of open source code is evolving daily to address the creative hunger of thousands. A-Frame, for example, provides the building blocks for 3D scenes that run on everything from mobile phones to the latest cutting edge VR devices. Three.js provides a framework for displaying 3D assets using web technologies. Perhaps most magically, Handsfree.js is a machine vision framework that can interpret gestures and map them into a virtual scene—no controllers required.

Game-likes: This category of virtual spaces takes their navigation and visual cues from MMOs and other video games while not explicitly being about gaming. They provide a fun, lo-fi experience for community, exploration and expression without VR at all. Skittish, by XOXO’s Andy Baio, is a playful attempt at a shared digital space for digital events. While events presented on video call software cram everyone into a single, shared, flat context, Skittish provides a sense of place and movement. Like a party in meatspace, attendees can roam, clump up, mingle, and drift.  Similarly, Gather.town provides a top-down, pixel art styled environment you can fully customize and use to host events, gather coworkers in a virtual office, or hang out with friends. For curators and museum goers, LikeLike offers a point-and-click adventure through exhibits right on your web browser. While none of these resemble plugging into The Matrix, they’re accessible, fun and ready to use right now.

AR on current devices: Whether it’s playing Pokémon Go on your phone, or using your laptop to picture how a new piece of furniture would look in your living room, this is one of the most mature, and most overlooked, forms of virtual content that makes up the open metaverse. It’s especially powerful in that it can be combined with other existing capabilities on our smart devices, like location data or sensors.

This is, of course, far from a complete list. Newer technologies like spatially-aware audio are rapidly joining this list, and we’ll of course see lots of development on the glossy, headset-focused VR that the biggest tech companies are pushing, too.

How Creating the Open Metaverse is Different

When the web was just starting out, “serious” content creators were using complex and costly tools like Macromedia Director to make elaborate multimedia content. Even the early online services like AOL and MSN had proprietary creation tools that allowed for creating rich content. And the conventional wisdom was that the simple, open, text-based standards of the web couldn’t compete.

Of course, we know how that turned out. The nonstop innovation of the open web community not only caught up to what the proprietary platforms could do, it far surpassed them in reach and in creativity. We think that pattern is going to play out again, and the evidence we base that on is the fact that it’s already happening.

Building for the Open Metaverse on Glitch

There are three things that make Glitch special, each building upon the next:

It’s easy and instant to start a new project

No other product makes it this simple to share and collaborate on code

Our community loves to build experiments and samples, then give them away for the benefit of others

These factors have woven together to produce a thriving ecosystem of metaverse-style projects. We have hundreds of thousands of projects spanning VR and 3D.

In fact, right now, today, you can instantly remix dozens of potent example projects on Glitch for your experiments in VR. We didn’t build any of these. They’re labors of love from people passionate about the next frontiers of the web and social software, and proof that the metaverse is real—and bigger than any one company.

Some stuff is simple, and perfect for getting your feet wet if you’re new to the scene. You could remix a seasonal snowglobe, or riff on the latest absurdist orb memes.

But the technology goes much deeper. You can build sophisticated scenes with navigation and interaction. While this would be impressive enough, the community has gone deeper.

Realtime, multi-user environments, with avatars, are waiting for you to remix them right now. They’re a powerful foundation for 3D social projects.

The next chapters of the web promise more possibility than ever. We’re excited to support creators pushing the boundaries of immersive, social and open technologies here on Glitch. We hope you’ll dive in, join them, and build something fun.

Let's build the open metaverse

Over the last few weeks, people all across the internet have found joy in playing Wordle, the simple-but-addicting word game made by Josh Wardle. Wordle's gameplay is basically guessing letters until you've deduced the word of the day, similar to the classic game Mastermind. And no small part of the appeal is that you can only play the game once a day, and after you win, you're immediately prompted to share your win, either on social media or as a message to friends. The signature block of green emojis was mysterious enough to pique the interest of many, and helped Wordle spread like wildfire.

But, as the New York Times documented, Wordle is just as interesting for the context in which it was made. Josh made it as a gift for his puzzle-loving partner, Palak Shah, and the Times rightly described it as "an act of love". Being a community of people who make the web, our perspective at Glitch also found a lot of romance in the idea that this is a fast, simple, well-implemented web app. Wordle is a PWA that can install instantly on any device, doesn't have a ton of extraneous junk loading on the page, and it's really speedy (a Lighthouse performance score of 95!).

No surprise, then, that Wordle has inspired a host of other creators in the Glitch community and elsewhere to make their own riffs on the idea, all of which bring fun and interesting innovations to the game:

Lynn made "hello wordl" (love that name!), which describes itself as a simple Wordle clone, but it lets you play as often as you want and you can also try to guess longer words. You can check out the source on GitHub.

Potch made Worble here on Glitch, which straightforwardly mimics the original game, but set the stage for some fun and interesting remixes.

Stuart Houghton remixed Potch's Worble into Sweardle — the four-letter-word version of the game. Obviously, that one might be a little bit NSFW, but it shows the power of making it easy to remix, because a half-joking version like this probably wouldn't be worth making from scratch, but if it's just a matter of modifying an existing game to have it focus on curse words, then it's all fun, no drudgery!

And then Jordan Bouvier took the idea to its logical conclusion, creating Queerdle. Jordan warns that some of the words in this one are definitely NSFW, but there's undoubtedly a delight in creating a fully-yassified version of the game. It's an act of love in its way, too!

We expect there will be many more riffs on the theme in the days to come, as Wordle-mania reaches its peak. But in the meantime, we've gathered some of the examples above into a playlist you can check out for yourself. (Be sure to suggest any variations we've missed!)

There are big lessons from the attention and enthusiasm around Wordle that feel important to emphasize as we start a new year:

It's absolutely possible to make something that's wildly popular and beloved solely by making a regular web app.

A lot of the best things on the web are made as acts of love or kindness for someone in one's life, or for a community that means something.

People are especially enthusiastic about things they can share without having to go through an App Store, or without being bogged down by having lots of their data captured during the experience.

Users appreciate when you respect their time and attention and don't just try to capture all of it. Earning a few minutes a day in someone's routine is a wonderful thing.

When you make something great using the web, others will be inspired to make their own versions of it, for fun or for learning, and it gives even more people a chance to connect and have fun.

You don't necessarily need creepy "growth hacks" or weird incentives to reach your audience if they're genuinely enthusiastic about what you've made.

It's fun and funny to make immature jokes about curse words, sometimes!

In all, we're thrilled to start a new year by celebrating an undeniable example of how vibrant and rewarding the independent creative web can be. Thanks to Josh, and to all those who've remixed the Wordle idea to make it their own.

Wordle Mania and the Remixable Web

New for 2022, it's the biggest update ever to Glitch's editor. It's faster, it's easier to use, and it will take you to all new dimensions with 3D asset handling. Our editor is the heart of the Glitch experience: it’s where coders spend the most time, and it’s essential to your creative success. We’ve been working hard to make your everyday experience of creating on Glitch more fun and expressive. The creation experience on Glitch is smarter and swifter than ever, in large part thanks to your suggestions. Check out what we’ve got for you:

The first thing you’ll notice: Everything is just faster. A lot faster. Editing files, navigating through your project, changing your settings, and accessing advanced features are all lightning-quick.

The new editor sports a complete visual overhaul. You spend so much time looking at it, we wanted it to shine for you. Typography is clearer, iconography is cleaner, and a new footer bar gives you instant access to your favorite features, while giving you instant access to your project status.  It’ll turn your 🤔 into a 😃 in no time!

And Glitch is for sharing, so things are getting faster for your project’s visitors, too. All your assets are now cached by Fastly — automatically. It’s a huge FREE upgrade for every app you make on Glitch. Fastly’s got a massively powerful content delivery network, which means all of your assets and images will  load faster than ever for your users thanks to automatic optimization and smart delivery. 

Our number one job at Glitch is to keep you in your creative flow, so we simplify the maintenance of the key files that keep your project’s working happily. (You’ve seen the first version of this before if you’ve ever tweaked your package.json or .env files.) Now we’re extending this capability further with what we’re calling “magic files”, a task-specific UI to help speed you through your edits. Of course, you’re still in control: the files themselves are just standard plain text under the hood, ready for you to edit the old-fashioned way if you want.

There are lots of small conveniences in the new editor that add up to a more pleasant experience overall. Here are some highlights:

✅ Inline error reporting: Glitch has your back when things go awry—we’ll show you errors right on the line that causes them, so you can get things back on track without bouncing between your code and the console.

🥽 3D Asset support: Working with 3D assets? We’ve got you covered there, too, with full 3D previews right in our asset manager. We’re thrilled that Glitch is one of the most popular ways for creating the metaverse, and we want to make that easier than ever.

✨ Improved Prettier formatting: We’ve made our support for Prettier cleaner and more automatic than ever. And as always, you can fully customize your Prettier config to match your particular preferences.

↔️ Easier import, export and domains: We’ve made it simpler to import and export your code to GitHub (there’s never any code lock-in on Glitch!) and made it so adding a domain to your project is just a click away.

Sharing code is foundational to the last two decades of the web. But it’s often a clunky and cumbersome process, involving arcane invocations of command line utilities and version control tools. Glitch makes sharing easy: just type in the email address or Glitch username of your collaborator and we’ll get them into the mix. Riffing together on Glitch is special: it’s fast and easy for your counterpart to dive in, make a tweak, see immediate changes, and get your feedback.

We’ve been amazed over the years by the scale of your creative ambition, and we’re working behind the scenes with third party services to ensure Glitch can continue to serve your project even as it grows. This new editor lays the foundation for future integrations with some exciting new partners.

Better for everyone, and terrific for the Metaverse

So many exciting creations are happening on Glitch around the Metaverse and WebXR. We hope these improvements, like interactive 3D object previews, make it even more fun to build these experiences on Glitch. We can't wait to see what you build.

We built these changes for you. If something is missing, broken, or just makes one of your regular workflows more difficult, we want to know! Hit us up @glitch on Twitter or reach out via email: support@glitch.com.

UI Refinements

	Overall rework of pixel-level detail
	New bottom menu bar:
		Status
		Logs
		Terminal
	Tools menu
	Settings now accessible via explicit Settings button
	More obvious help menu in right corner
	Piano menu to access keyboard shortcuts listing

Asset manager

	Support for 3D assets, including 3D preview
	Automatic Fastly CDN support for all new projects

Code Editor

	Inline error reporting
	Improved code formatting, with Prettier handling more kinds of files

Enhanced magic files

	New state-aware buttons and UI interactions

More help taking first steps

	Remixing a starter gets you a header with extra instructions

Under the hood

	Completely rewritten using Vite for speed of delivery


Behold: An all new Glitch editor!

The WebXR community has been building all sorts of amazing immersive experiences on Glitch, as well as fun, low-barrier learning projects you can use to start trying these techniques out yourself. In this tutorial, we’re going to walk you through creating a virtual festive greetings card you can share with your friends! It’s totally free, and all you need is the regular web browser you already have. You’ll be using A-Frame, a framework for building VR apps for the web–the team and community have built a ton of handy apps you can remix and edit surprisingly easily. 

Remixing will create your own copy of the project–it’ll open in the editor and you’ll see the preview of the app on the right.

Take a quick look at what’s in the project–there’s not much there! We’re mainly going to be working in index.html, so open the file for editing.

Hit the Format This File button at the top of the editor to format your code–this is going to make it easier to read and work with!

Near the top of the HTML you’ll see the A-Frame script being imported–this is all you need to start working with the framework. Now look at the page body, where you’ll find the markup representing the A-Frame entities and components. Take a minute to compare the elements in the markup with what you see displayed in the preview.

The initial scene includes a box, sphere, cylinder, plane, and sky. We’re going to edit these to make them festive and add a little animated interactivity. You don’t need a VR headset for any of what we do in this tutorial, but it is fun to view in one if you have it (even a cardboard viewer on your phone)!

We’ll include images you can use in your project below but feel free to use your own–if you make a nice version you want to show off please let us know! You'll also find all of the pics in the final ~festive-aframe demo project embedded near the end of the tutorial.

Let’s start by adding a night sky background for our festive scene. Save this image:

In your Glitch project, upload it into assets. Once uploaded, select it and copy its URL.

In your HTML, find the sky element, remove the color="#ECECEC" attribute and replace it with a src attribute using your uploaded image URL as the value, so it’ll look something like this:

<a-sky src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/nightsky.png?v=1639737437152"></a-sky>

Let’s also make the plane under the shapes look wintery. Save this snowy pic and upload it into assets:

Replace the plane element color attribute with a src attribute using the URL for your uploaded snow pic (make sure you remove the color attribute or it will tint the image):

src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/snow.jpg?v=1639740045726"

Let’s turn the box into a parcel. Take a look at the a-box element, which is a primitive shape. The attributes specify the box position, rotation, and color (this is just a hex value like you’ll see in HTML and CSS): 

The position is represented by x, y, and z values–the z can be tricky to get accustomed to when you start learning to work in 3D so you might like to play around with the values later to get a sense of how they work.

The rotation is represented as around the x, y, and z axes (known as pitch, yaw, and roll)–again, messing around with these in your own project is the best way to get to grips with them.

You’ll notice that the shapes have light and shade added automatically–this is due to the default lighting, but you can change it.

Instead of a block color, let’s give the box a pattern asset to make it look like a parcel. Save this image:

Upload it into your assets also and copy the URL.

Back in index.html, remove the color attribute and instead add one for the image source, with the asset URL as it’s value–it should something look like this:

src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/wrapping.png?v=1639738100571"

Keep hitting the Format This File button as you edit the file to make it easy to see your changes.

Your preview should update with the new pattern!

Let’s turn the cylinder into a tree. Make it a cone shape by changing the opening and closing tags from a-cylinder to a-cone. Tweak the size–the cone accepts an attribute to set the bottom radius, so change radius to radius-bottom, leaving the value at 0.5.

<a-cone
    position="1 0.75 -3"
    radius-bottom="0.5"
    height="1.5"
    color="#FFC65D"
    ></a-cone>

OK so far so good, but it doesn’t really look like a tree yet–we’ll use another image asset for that, so save it:

Upload it in your assets like before, copying the URL. Back in the HTML remove the color attribute and replace it with a src attribute that looks like this:

src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/tree-pattern.png?v=1639737942800"

Let’s turn the sphere into a snowglobe–first we’ll need to make it look like glass. Save this opaque PNG (it's there, honest, right-click or control+click below):

Upload it into your project assets as before. This time we’re going to use it as a texture, so we’ll add a new section to the A-Frame scene to store assets–near the top of the code inside the a-scene:

<a-assets>
    <img
      id="glass"
      src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe.png?v=1639738756848"
    />
</a-assets>

Now we can use the id to specify this image as a texture. In the opening tag of your sphere element, remove the color attribute and instead add a material attribute:

material="transparent: true; src: #glass"

Let’s rotate the image a little so that the gradient hits a nice spot within the view–add a rotation property to the sphere element:

Let’s put a photo inside it–we’ll use a cylinder, so add a new shape after the sphere:

<a-cylinder
    radius="1.23"
    position="0 1.25 -5"
    rotation="0 90 90"
    width="4"
    height="0.1"
    geometry="segmentsRadial:64"
    ></a-cylinder>

We set the positioning to make the cylinder appear inside the sphere, and the radius is slightly smaller than the globe so that the glass is visible around it.

You can use your own photo if you’d like to personalize the snowglobe, but feel free to use any of these cute twemoji pics:

Upload your picture into assets and copy the URL again. You can include the twemoji pics using these URLs if you like instead:

Santa https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-santa.png?v=1639740868189

Sloth https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-sloth.png?v=1639740872078

Heart https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-heart.png?v=1639740879770

Smiley https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-smile.png?v=1639740883742

Chick https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-chick.png?v=1639740887359

Fish https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-fish.png?v=1639740891328

Add your pic URL to the cylinder as src attribute:

Let’s give the snowglobe a base too–add another cylinder shape after the one you added for the photo:

<a-cylinder
    radius="1"
    position="0 0.15 -5"
    width="4"
    height="0.2"
    color="#cdcdcd"
    geometry="segmentsRadial:64"
    ></a-cylinder>

Now let’s add a message you can customize. 3D text is tricky in VR, so we’ll keep it simple and just use 2D–this time we’ll use an entity, which is a core A-Frame technique you’ll see much more of if you continue learning. The attributes represent A-Frame components, specifying the entity detail.

<a-entity
    text="color:white; value: HAPPY HOLIDAYS!"
    position="3.2 4 -4"
    scale="10 10 1"
    ></a-entity>

Change the text to read whatever you like! You may need to tweak the position to make it stay in the center of the display–experiment with the values!

OK so we have a nice looking scene, but it isn’t interactive yet. Let’s add some animated effects on the shapes when the user looks at them.

First we need a camera, add it near the top inside the scene markup:

<a-entity camera look-controls position="0 1.7 0">
    <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1">
    </a-entity>
</a-entity>


The camera defines the user perspective on the scene, with look controls and a fuse cursor that will allow us to detect when the user is looking directly at a shape. 

Let’s make the tree rotate when the user looks at it, by adding an animation attribute to the cone element:

animation="property: rotation; from: 0 0 0; to: 0 360 0; dur: 5000; easing: easeOutCubic; loop: false; startEvents: fusing;"

We specify the property to animate, which is the rotation. Then we state the positions to rotate from and to, which is a change of 360 around the y axis. We set duration and easing properties, and set the animation not to repeat. We use the startEvents property to trigger the animation when the user looks at the shape.

You can simulate moving around the scene in the preview by clicking and dragging it, so drag the view so that the tree is in the center of the page (or look if you’re using a headset!)

Let’s do something similar with the parcel but we’ll make it expand a little. Add a slightly different animation to the box element:

animation="property: scale; from: 1 1 1; to: 1.1 1 1.1; dur: 1000; dir: alternate; easing: easeInElastic; loop: 2; dir:alternate; startEvents: fusing;"

We use the scale property and loop the animation twice, with alternate direction so that it returns to its original size each time. We also use elastic easing for a bouncy effect.

Let’s also give the snowglobe pic a little animation. Add it to the cylinder that has your uploaded photo displayed in it:

animation="property: rotation; dir: alternate; from: 0 50 90; to: 0 130 90; dur: 5000; loop: true; easing: linear;"

This is similar to the tree but it doesn’t rotate all the way around, just back and forth slightly to give a sense of the globe being a 3D shape.

As a final effect let’s animate the sky, making it continually rotate slowly:

animation="property: rotation; to: -360 0 0; dur: 100000; easing: linear; loop: true;"

Your scene should be looking pretty festive by now–share it with your friends!

Make sure you try it on a VR headset if you have one–just enter the URL for your Glitch app in the browser, e.g. https://festive-aframe.glitch.me

If you want to keep learning, try tweaking the different entities and property values in your project!

OK so we had some fun making a few light edits to the A-Frame base project to make a daft greetings card, but the WebXR community makes some seriously amazing immersive experiences on Glitch. Check out ~xrxmas for a cool snowing effect.

For inspiration check out the playlist of WebXR projects on Glitch. If you have a VR device remember to visit your apps on it–including a cardboard viewer on your phone! We’ve been delighted to see the WebXR development on Glitch and are excited to reveal some editor enhancements in the new year to help support the projects this community of creators is producing!

The WebXR community has been building all sorts of amazing immersive experiences on Glitch, as well as fun, low-barrier learning projects you can use to start trying these techniques out yourself. In this tutorial, we’re going to walk you through creating a virtual festive greetings card you can share with your friends! It’s totally free, and all you need is the regular web browser you already have. You’ll be using A-Frame, a framework for building VR apps for the web, and the team and community have built a ton of handy apps you can remix and edit surprisingly easily.

Make a VR greetings card in just a few steps

Illustration: ~koi-garden by @adarosecannon

The real metaverse was the friends we made along the way: here’s a look at how Glitch creators have created hundreds of thousands of VR and AR experiences.

Whether you’re into Virtual Reality, Augmented Reality, Mixed Reality or some other new form of reality we haven’t discovered yet, Glitch is home to a thriving community of creators exploring the boundaries of 3D content. In fact, Glitch is home to one of the largest communities of XR creators in the world, with hundreds of thousands of projects created by artists, coders and designers.

You’ve probably heard a lot of talk about VR recently (especially as hype and attention around the metaverse has jumped in recent months)! The good news is, for the Glitch community, the metaverse has already been with us for years. So let’s take a look at the frameworks developers are using to build WebXR–and discover some incredible Glitch community apps along the way. Stay tuned for tomorrow, when we’ll share a really fun starting point for creating your first WebXR experience, and even offer a sneak peek at how we’ll be improving the XR creation experience on Glitch in the new year.

Like everything on Glitch, creating XR happens thanks to open standards and open code. And you can view them all on standard devices, ranging from your regular web browser to the fanciest 3D headset. Let’s take a look at some of the best tools, all of which you can use for free.

The term WebXR refers to “eXtended” or “cross” reality experiences you can access on the web. The X is there to represent a broader range of applications than Virtual Reality (VR) alone. Where VR creates virtual worlds, Augmented Reality (AR) overlays the physical world, and Mixed Reality (MR) is a hybrid of both. So WebXR creates these on the web–which means you can access them through your browser. Still confused? You’re not alone, but here’s the thing–it doesn’t matter, you can still try VR! (lol, there won’t be a test.)

As a user, you can try these experiences out on a computer, phone, or VR device. The apps can utilize client info from the device, allowing developers to create responsive, immersive experiences, for example, tailoring behavior to user position and movement. The standards for building WebXR support headsets like Oculus, Google Cardboard, Samsung Gear, and HTC Vive among others. 

Creating WebXR applications can involve a seemingly overwhelming variety of techniques and technologies. However, it’s surprisingly easy to get started, and luckily you can see a ton of amazing demos on Glitch, where the creators have made their source code available openly for you to learn and remix. Let’s dive in.

~aframe-gallery in the browser on mobile before entering AR or VR mode

The gist of WebXR is that you can access it on the web, by navigating to addresses in your browser, just like you would to visit websites. This is possible because the supporting technology is now built into browsers like Chrome and Firefox. Mozilla initially led development with the WebVR, WebXR, and WebGL APIs:

The original WebVR API was deprecated and replaced with the WebXR API to also support AR.

WebGL provides support for rendering 3D graphics on the web, natively inside the browser. Typically developers don’t write WebGL directly, but work in frameworks built on top of it, which we’ll get to below.

The WebXR Device API provides an interface for managing device access and using WebGL to render 3D scenes–again, you’re most likely to use a framework to actually write your code, with this supporting the underlying implementation. The API lets your apps detect and respond to user data from device sensors, rendering the scene at an appropriate framerate, and delivering it to the user viewpoint.

When you visit a WebXR app in the browser, you might see AR and VR buttons on the screen–this is courtesy of the API providing the apps with access to the browser session, and will determine the mode for the experience (as you’ll see if you try toggling between them e.g., on a phone–in AR mode the app will display on top of the camera view of your surrounding area, and in VR mode it’ll display in stereo, or “binocular” view, with a different image for each eye).

Supporting browsers like Firefox and Chrome benefit from the emulator extension that developers can use to build WebXR experiences on desktop, testing for different device types.

Whether you’re into Virtual Reality, Augmented Reality, Mixed Reality or some other new form of reality we haven’t discovered yet, Glitch is home to a thriving community of creators exploring the boundaries of 3D content. In fact, Glitch is home to one of the largest communities of XR creators in the world, with hundreds of thousands of projects created by artists, coders and designers around the world.

Recent Posts