Making a Beach Umbrella
2014-04-16
In this tutorial we'll make beach umbrellas and set up the basic environment (sky and sand). We will use methods learned from the tutorial Striped Shader Part 1.
Lets make a striped umbrella. We'll start from the ready-made low-poly model with normal mapping. The model consists of two objects: the canopy and the shaft.
Below you can see the nodes for the shaft material: 1 – the NORMAL_VIEW node makes a transformation into the camera space; 2 – the normal map in the Texture node (for rendering in the engine); 3 – the normal map in the Material (for rendering in the Blender viewport); 4 – the REPLACE node displays input data from the first socket in the Blender viewport and renders input data from the second socket in the engine.
Lets have a look at the nodes for the canopy: 1 – the mask for the green-yellow strips; 2 – the mask for the orange strips; 3 – the TRANSLUCENCY node sets up the light transmission effect.
The normal map is shared by both materials. So why have we put the normal map into the Material node and used the hacky REPLACE node? The reason is that Blender doesn't support tangent space output for a Geometry node. If we used a generic UV data for the normal map in the Texture node we would get wrong shading in the Blender viewport. Settings for the material which was used in the Material node are shown on the screenshot below.
A very simple node material is used for sand.
Lets enable ambient lighting with the Environment Lighting checkbox under the World tab. Also Blend4Web features a procedural skydome. The settings can be found on the Procedural Sky panel:
Now we need to set up Shadows, God Rays and Bloom effects. The settinghs can be found under the Render tab:
We have only one directional light in the scene:
Use the camera settings to limit the camera movement.
You can find the source blend file in the following directory: blend4web/blender/tutorials/basic/beach_umbrella/.
Changelog
[2014-04-16] Initial release.
[2015-09-08] The text and illustrations have been updated because of new interface.
[2017-01-12] Fixed incorrect/broken links.