3D Interactive Landscape Tips
Introduction
This tutorial provides some tips regarding how to prepare an interactive 3D landscape with 3ds Max and WebGL. Swipe to view the 3D Landscape with a river, trees, and hills. Rotate around the landscape with the mouse or mobile touch point.
The scene renders with WebGL software prepared by Seven Thunder Software. The environment was modeled and mapped with 3ds Max.
Features
3ds Max's mental ray renderer, bump map, displacement map, and environment fog features provide depth and texture to the scene.
Fog provides atmospheric perspective. Hills and trees in the distance appear blurrier and more blue.
Bump maps combined with the mental ray renderer turn relatively flat grass into uneven shapes with highlight and shadow. The displacement map, applied to the ground, transforms vertex positions providing more variety to the landscape. However too much displacement moved vertices above the river in some areas. Only 1% displacement provided just enough variation in the shape of the terrain.
The fewer the vertices the quicker a WebGL example loads online. Cubes use eight vertices to display an entire scene. The sphere which displays the 3D Landscape includes more than 2,000 vertices. However even simple trees easily require 2,000 vertices. It takes fewer vertices to map a scene to the inside of a sphere than it would to rendered the vertices for an entire landscape or other environment.
3ds Max doesn't render cube views with the mental ray renderer. If it did, then cubic environments usually work fine. However sometimes it's difficult to hide corners with scenes which are mapped to the inside of a cube.
This scene was rendered with 3ds Max's panoramic exporter, then saved as a spherical view map. Modify the view map where needed with Photoshop. Last apply the map to a WebGL sphere.
Landscape
The landscape began as a flat plane with many vertices. Create hills with soft selection. Pull vertices up for a hill or down for a valley.
The 3D Storm Scene was prepared with the same 3D model, however the texture map includes alpha transparency. Additionally GLSL shaders render flashing light and mist, in response to swipe motion over the canvas. Shader generated colors show through alpha transparent areas in the texture map.
Trees
The trees were prepared with 3ds Max's foliage mesh elements. Some variety was applied to the number of branches and density.
Summary
This tutorial provided some tips regarding how to prepare an interactive landscape with 3ds Max and WebGL. Swipe to view the 3D Landscape with a river, trees, and hills. Rotate around the landscape with the mouse or mobile touch point.
