Pixelhop Web Development

Pixelhop Web Development

Pixelgrams

We wanted to update the traditional way of sending greetings cards to loved ones and we thought using augmented reality would be a fun way of doing this. We didn't want to get rid of the traditional card altogether because it's nice getting post through the door! We all love opening cards on our birthdays, the same way most of us love reading "proper" books rather than using a kindle.

Pixelgrams is a wonderful project that uses cutting edge WebAR. It allows users to create fun and futuristic 3D pop-up cards to send to their loved ones. ๐ŸŽˆ๐Ÿ“ฆ ๐ŸŒด

Here's a step by step explanation on how you can send a pop-up card to their loved ones:

Step one: Create a scene ๐Ÿ–๐Ÿฐ

Create a scene using the Pixelgrams 3D editor. You can search for objects, people, animals, places, almost anything. Let's say for argument's sake that you want to send a bunny rabbit to one of your friends that loves bunnies to wish them a very happy birthday, well, let's see how you do it!

Search for 3D models using powered by Google Poly and find a bunny, and add it to your scene.

Step two: Edit your scene

Now that you've added your bunny you can adjust it to fit your needs - make it bigger, smaller, fatter, thinner, move it around the scene etc.

You can add and remove models to your scene, whether it's text, images.

You can even add your own text to the scene if you want... โ˜บ๏ธ

Step three: Create a traditional greeting card ๐Ÿ’Œ

Now that you have created the scene, it's time to digitally make the "traditional" card to send, this will get sent to your loved one. You can either use a card template that has been premade for you, or create it yourself.

Step four: Send the greeting card ๐Ÿ“ฎ

Once you are happy with the card, you will confirm your loved ones details and it will get sent straight out to them.

##Step five: Card received ๐Ÿฅณ ๐Ÿ“ฌ Your loved one will get the card, hover their phone over the card and see the scene that you created before will pop up on their phone. In this scenario, it will be the bunny rabbit, but you can do anything you want!

Let your creative juices flow and get making! ๐ŸŒด ๐Ÿ”ง ๐Ÿงก

We have created a landing page to help explain the process a bit more, you can find it here.

We would like to create template scenes and scenarios to give people some ideas of what they can do, or just edit these scenes if they don't want to create a completely new one from scratch.

We have built Pixelgrams using Vue.js, Three.js and WebAr.

Thanks for reading, let us know if you like the idea or have any ideas on how we could make it better. We are always open to feedback :)