Here is the result of using the plugin and making a city.
The results are fine however there are some issues with it. The number one issue is that it might be too big and therefore might not be suitable to inject into browser.
After further testing we have decided not to use this model. It is not very efficient to create detail while maintaining a fast render able speed in the browser.
Regardless of this not being used it was still a necessary test to bench mark what models could and could not be rendered in the browser.
We decided that when showing off models in the environment view it would be great if we had a variety of different things to give variation to the presentation of the 3D model. We want to be able to show off structures and models of different varieties and one way we can do this is using a particular plug in for 3DS Max called Greeble.
What is Greeble?
Greeble is a plugin for adding fine detailing to the surface of any object to make it appear more complex. It avoids the time consuming work of manually creating large numbers of precise geometry. It sub divides the surfaces into smaller areas and therefore adds more detail. The maximum and minimum height can be set so that you can generate a look and feel that is right for the purpose you need it for.
Why are we using Greeble?
We will be able to use Greeble to generate a city very quickly. Then we can select faces and asign textures to individual surfaces to be able to rapidly texture the city.
How does it work?
It’s a very simple process to set up the initial visual city. First you create your chosen object (which in our case will be a plane) and then set the number of length and width segments. Being able to set our own width and length segments is a huge benefit to us as we will be able to control the poly count to help the FPS as James as sated in a previous blog post.
We can then select the Greeble modifier and customize the maximum and minimum height to create our chosen look. Texturing can then take place and this is a simple process as well. The tops and sides can also be selected separately and be given a new material ID so a multi sub object can be created for texturing. A MaterialbyElement modifier can then be applied so that multiple textures can be used for the sides of the building and this will also randomize where the textures are. This is usuful for making the city look more realistic and not just all the same.
Considering the code required to simply load a 3D OBJ file into the browser amounts to a whopping 450KB, we are having to be very careful about the rest of the data we are loading into the page. Specifically, the size of the 3D models and how that affects the performance of WebGL.
I start off with this 100 poly “mountain scene”.
The OBJ file for this model is 14KB. A pretty decent size for the web but not a very smooth looking model. The WebGL performance is of course pretty good at 63fps.
I then decided to push the upper limits, turn on the Turbosmooth modifier and crank up the iterations to 6. This produced me a baby smooth 820,000 poly model.
The exported OBJ is 64MB! Not something we imagine having to download on a wifi connection, let alone a limited 3G one. It took ~9 seconds on my sandbox environment!
Considering the massive file size increase, I was pleasantly surprised to see that the WebGL performance only dropped by 3fps to 60.
Dropping the Turbosmooth iterations down 2 produces a relatively smooth model (undistinguishable without a comparison) with 3,200 polys at 218KB. Still quite a large file but not quite as much as 64MB.
The fps also has increased back up to 63fps.
Some things we may need to consider is providing visual feedback in the form of a spinner or preloader while the OBJ is loading and potentially showing a warning message declaring that this page is going to be bandwidth heavy.
I have begun the process of creating the mountain scene for the 3D animation part of the project. Playing around with the 3DS Max lighting, environment settings, exposure control, texturing and vertex painting this is what I have come up with so far.
Renders in ascending date order.
My next step is to increase the realism of the clouds and sky. I will also be adding some foliage such as grass or trees to the scene.