3D Interactive Landscape Tips

Introduction Features Summary

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.

A number of initialization details were left out, to focus on the main topic. Most WebGL projects initialize as described in the WebGL e-book series. However information in this tutorial should apply to other WebGL projects, such as those that use Unity or three.js, as well.

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.

Tags

learn to code, Web GL, 3D Programming, 3D Development, 3D Media, 3D Web, 3 D Websites, 3D Development, 3D Web Design, 3D Web Development, Web Development, free tutorials, online learning, learn coding, create 3D website, 3D Media, JavaScript, html5, html 5, Web GL, 3D rendering software, GLSL, 3D Graphics Engine, 3D rendering software, html tutorial, how to code, programming websites, learn computer programming, learn to code for free, learning coding, stem, 3D images, webgl simple example, webgl basics,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.