3D Interactive Landscape Tips

Introduction Features Summary

Introduction

This tutorial provides some tips regarding how to prepare an interactive landscape with 3ds Max and WebGL. Swipe to view the 3D Interactive 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 Interactive 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.

Seven Thunder Software's version of 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. The e-book WebGL Scenes:Responsive Web Design explains how to create great looking lightweight cubic environments with WebGL.

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 river was detached from the landscape and received an animated texture for the 3D Landscape Animation.

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 Interactive Landscape with a river, trees, and hills. Rotate around the landscape with the mouse or mobile touch point.

The e-book WebGL Scenes: Responsive Web Design provides details regarding how to prepare 3D scenes with WebGL and responsive Web design. See the 3D Landscape Animation prepared from the same 3D model. See the Creative 3D Web Collection for a range of interactive and animated online 3D Web examples.

More 3D Media!

WebGL Scenes: Responsive Web Design Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.