How to prepare the 3d model and target coloring area for printing?

[kfarr]

I've been trying out the demos from this project and have a few questions about preparing a 3D model for the AR coloring functionality. Specifically, I'm trying to understand how to set up a 3D model with texture mapping and how to prepare its target coloring area for printing on paper.

Background: I am currently using a bus model for my use case. My initial understanding was that I might need to create a version of the bus model with two textures mapped on each side. But based on my conversation with @Akbartus, it seems I only need to map the texture on one side of the bus, as the other side is just a mirror.

Questions:

• Should the texture on the bus model be like the attached bus1.png?
• Should the paired coloring book image be similar to the attached bus-outline.png?
• Is an additional marker necessary for tracking?

@Akbartus's Recommendations from Slack conversation:

• In Blender, map the texture only on one side of the bus, make it black and white or empty, and then add it as texture to the 3D model.
• The image target used for coloring should have enough features. Some applications use colorful scenes to enhance this.

bus1.png

bus-outline.png

[kfarr]

Here is another concept using a QR code, would this work?

@akbartus feedback:

• If using a QR code as the target image, ensure its resolution is a multiple of 8 (e.g., 1024x1024). Place the image in the center and make it smaller. Then in Blender, map the texture so that the bus fits the 3D model, disregarding other areas. This method should work efficiently, as the QR code is feature-rich.

[kfarr]

Also if you're interested to check out the model we are looking to "WebAR color" there are 2 options:

• This is the one we use in the app, although it has an interior with windows so would require mesh modification to make it easier to apply 1 big UV map: https://github.com/3DStreet/3dstreet-assets-dist/blob/main/sets/flyer-bus/gltf-exports/draco/new-flyer-bus.glb
• I would suggest looking at this one -- it is the previous one using texture instead of mesh to show vehicle features. It might be better for this WebAR coloring UV mapping: https://github.com/3DStreet/3dstreet-assets-source/blob/main/models/flyer-bus/resources/XD40.glb

[akbartus]

@kfarr thank you for your kind summary and questions. I prepared an example texture mapping for this particular glb model. It can be found under folder "texture-mapping-example" in this repo. The folder contains the following:

• original glb file,
• b/w bus texture, which is attached to 3D model in blender. The same is then used for image target
• b/w bus image target with some updates to increase features for ease of recognition
• sample photoshop file to edit the image target
• sample blender file (ver. 3.4) which show 3D model and its UV + texture
• sample project, zipped file, which shows its use in web AR coloring.

Now concerning your questions: you can take now image target, remove the inner and leave only the outline. But make sure to add features because simple outline is not trackable in all web AR systems. Maybe add some qr code or other images. Make sure what you add is not inside of the bus outline, because that area is for coloring. You can also make the way you did with qr marker. But make sure that QR marker does not intersect the bus outline.

Basically, as I mentioned in the repo, everything is dependent on how you make texture mapping.

[kfarr]

Excellent! I was able to get this working on mobile here is a quick video: https://github.com/akbartus/WebAR-Coloring/assets/470477/432a8a84-8230-492a-99dc-a6bba51b92a6

I migrated the sample project directory to a glitch repo: https://glitch.com/edit/#!/sedate-marbled-glitter?path=index.html%3A7%3A0

I had to name the .mind file as -mind.glb to allow uploading to glitch's asset system

[akbartus]

Glad that it worked. Feel free to make 3d model bigger or smaller. Also you can add whatever you want to image target

[akbartus]

Just in case, if you want to upload files with other formats you can follow instructions here for Glitch: https://support.glitch.com/t/uploading-a-whole-folder/3128/3. I usually use this method of uploading.

[akbartus]

@kfarr if everything is ok, I am closing the issue.

[kfarr]

Yes this is great, thank you for your help!