Skip to main content

Scan doodles and watch them come alive!

In this post I'd like to share about one of my projects involving doodles and bringing them to live with Unity. We prepare doodle papers and some crayons and let children color them. After they're done, we scan the images and they appear on the screen. The screen is projected on walls using projectors.


Doodles come alive on the screen

Project flow

I utilized document scanners readily available such as the following.

A document scanner

The scanner has many helpful features, such as cropping and rotating the scanned images so they are nice and straight even if the paper is slightly rotated or not aligned properly.

The scanned images are stored in a server and a Unity application polls the server for new images every few seconds. For the server I initially used AWS S3 for image storage and later on we switched to a local image server with Node JS.

Attaching 2D Texture to a 3D Model

I no longer have access to the actual doodle papers but they look like any other doodle template.
A sample of what the doodle paper looks like

After coloring the paper and scanned, the Unity application retrieves the images as PNG files and converts them into Texture2D objects. These textures are then applied to a 3D model with predetermined UV mapping. As a result, we get a 3D model of the fish (and other doodle objects such as trains, airplanes, etc) with the coloring as done on paper.

Differentiating Doodle Types

Since we had several types of doodles to choose from, fish, airplanes, UFO, divers, etc we need a way to separate the scanned images by their types. For this, we utilized QR codes printed on the doodle papers. Each QR code correspond to a doodle type and a small scanner application sorts out the types before sending them to the image server.

Challenges and possible extensions

There is limited space to show the doodle objects and it gets crowded really fast. If you have too many objects on screen they start to collide with each other and become very hard to control/animate. I had to make sure only a certain amount of the latest scanned doodles are active on the screen. And we cannot just make the older doodles disappear so I had to move them away from the viewport before turning them inactive.

Another challenge is that the installation does not have any scene changes like in games. So the app has to be very stable, and performance has to be high. We were running the installations for about 12 hours every day so making sure the installation is stable and runs without bugs was very challenging.

Another part that can be improved is the interactivity of the installation. It was mainly displaying 3D models on screen from paper doodles, but we could add more diverse interactions by adding touch support and various events (such as a shark appearing and eating all the doodle fishes every now and then). This could be something to explore in future installations.



Comments

Post a Comment

Popular posts from this blog

Installing a custom ROM on Android (on the GT-N8013)

It's been a while since my last entry and since it is a new start in 2019, I thought I'd write something about "gone with the old and in with the new". I've had my Samsung Galaxy Note 10.1 (pnotewifi) since 2014, and it's one of the early Galaxy Note tablet series. It has served me well all this years but now it just sits there collecting dust. My old Samsung GT-N8013 I've known a long time about custom Android ROMs like CyanogenMod but has never had the motivation to try them out, until now ! Overview of the process For beginners like me, I didn't have an understanding of the installation process and so it looked complicated and it was one of the reasons I was put off in trying the custom ROM. I just want to say, it's not complicated at all!   Basically you will need to Prepare an SD card and install Android SDK (you need adb ). Install a custom boot loader ( TWRP is the de facto tool at the moment). Use adb to copy custom...
15 comments
Read more

Building a native plugin for Intel Realsense D415 for Unity

Based on a previous post , I decided to write a plugin for the Intel Realsense SDK methods so we can use these methods from within Unity. FYI Intel also has their own Unity wrapper in their Github repository , but for our projects, I needed to perform image processing with OpenCV and passing the results to Unity instead of just the raw image/depth data. There is a plugin called OpenCVForUnity to use OpenCV functions from Unity but previous experiments indicate the image processing inside Unity can take a long time. I hope this post can help someone else who wants to use Intel's cameras or any other devices natively in Unity. Test Environment Windows 10 64bit Unity 2017.2.0f3 x64 bit Realsense SDK from Intel CMake 3.0 or higher Steps Checkout the native plugin code here . Don't worry about the other projects in the same repository. The relevant code is in the link above. Checkout the Unity sample project here . However, instead of master you need to go to the br...
5 comments
Read more

OpenCV native plugin for Unity in IOS

In one of my recent projects, I needed to use OpenCV from within Unity, in IOS. The asset called OpenCVForUnity is overkill because I didn't need the whole OpenCV library, just a few functions. In addition, this asset does not implement the whole OpenCV library so unless you know that what you need is included you may find it lacking when you discover it does not support some functions you need. As my project involves some trial and error and mixing algorithms together I decided to go with a native plugin. Overview In IOS, a native library is built as a bundle . We need to put this bundle inside Unity's Plugins/OSX folder to use it. Therefore, we need to create two projects. An XCode project to build the native plugin. A Unity project to use the plugin. Dependencies Of course, since we need to use OpenCV we will have to install it first. Tutorials on installing OpenCV on IOS are abundant and I will not include them here. Assuming you have installed OpenCV go to t...
2 comments
Read more