blog games developers portfolio gallery

More in this category:

3D website builder progress

Posted on December 10, 2014, by Richard Knol

Orbcreation's previous 3D Website builder has never become the big succes I secretly hoped for. This was due to a lot of reasons, but one of them was the inability for the user to upload it's own 3D models and textures in a easy way.

Since I think 3D websites deserve a second chance, I am building a completely new system from scratch. And this time it will have a lot of import features. In this blog post I will try to show how this import module works.

For that I will take a relatively complex model with multiple materials, several textures and normal maps and import it and adjust it until it looks good.

But first I will log on

And I get a drawer on the left side with an expandable hierarchy view
Hierarchy drawer.

When I open the button "My 3D models" it unfolds and all the current 3D models are shown in the big screen. Well that sounds better than it looks, but these are all just some test things and the room has to be given a theme as well.
Models overview.

I add an entry for the new model and enter the name and description and I upload the model. You will be able to simply drag your model in here, but that doesn't work yet.
Create new model entry.

The model has a medium impact on performance, which is indicated by the orange/yellow bar. You can use the compression slider if the model gets into the red.
Uploaded 3d model.

As you can see she is quite tall. 210 meters. So I scale her down by clicking "Adjust scale". Two reference object appear next to the model so I can see when she has the right size.
Scale 3d model. Scaling the uploaded 3d model to normal proportions

Now she is looking away from the camera, so I need to adjust the rotation. I do that by clicking 'Set upright". I get controls around the model to turn it. By default they snap to 90 degrees steps, but you can also enter a specific angle.
Rotating the uploaded 3D model.

Next I will upload the textures that came with the model. There are 5 textures and 4 normal maps. I upload them by clicking the "My Images tab" open, adding an entry, setting the name and description and uploading the texture. This too will be possible by dragging an image on it in a later stage of development.
Uploading textures.

I do the same for the other 4 images and they all show in the room with images.
All textures uploaded.

I do the same for my normal maps. Only now I change the image type to "bumpmap" (description will be changed to "Normal map"). When you upload an image that is not a normal map, the system will detect it and will generate a normal map for you based on the dark/bright areas of the image.
Uploading normal map.

They too are shown in a room with all normal maps
All normal maps uploaded.

Now I am going to set the materials of the model by clicking "Colors and more". I select a shader, select a texture, select the normal map and adjust the shininess a little.
Apply textures to model. Setting shader, texture, normal map and shader parameters per material

I repeat this for all 5 materials of my model
All materials set. All materials have been configured

All textures are applied.

I could leave it at this, but I want her to look good from a distance as well. By default the system will generate LOD levels and I already saw that they used a little bit too much compression for my taste. So I click "Distant viewing" and adjust the compression levels for LOD 1 and 2. Now she looks ok in LOD 0, LOD 1 and LOD 2. There is no LOD 3 since the ssystem tells me that the reduction in triangles is not worth the extra download size.
LOD 0. Setting compression and switch points per LOD level


LOD 1. Showing LOD 1


LOD 2. Showing LOD 2


I want the camera to bump against her and not pass right through her and I want to be able to click the model, so I need a collider for my model. You can set this by clicking "Collisions and clicking". I select a capsule shape and reduce the size until it fits.
Configuring collider. The uploaded model needs a collider to prevent the camera from flying through and to enable clicking

I find her skin a bit dark. The color of the material is already set to white so I can't adjust that anymore. But I can adjust the texture. I go back to my imported texture and adjust the contrast, saturation and luminance until her skin is a bit paler.
Adjusting texture. Altering the colors of the skin texture

And there she is. Scary isn't she?

follow us