Finally, If I will use the "Use Nodes(Cycles)" option, I want to know How to use that.
OK, I'll explain how to insert a Cycles Environment texture from the Start-Up Scene (Cube, Lamp, Camera). You should then have no problem repeating this for your own scene. Remember that Cycles background textures are NODE materials and have their own "strength" value which you CANNOT "turn off" (strength must be greater than zero or else your background will be black) - so maybe your framerate will still go down. Also, image files for these nodes must be standard/equirectangular images, not cubemap images.
Get your texture loaded:![]()
1. You must be in Blend4Web Mode! [A]
2. Click on the World Tab. [B.]
3. Activate checkbox "Render Sky". [C]
4. Activate checkbox "Use Nodes (Cycles)" right below it. [D]
![]()
5. Switch to Cycles Mode. [A]
6. Open a Node Editor window (Shift+F3) [B.] and click on the Material icon [C] in the Node Editor window and then on the World icon to the right [D].
7. Make sure that the "Use Nodes" checkbox to the right is active [E]. You should now see a default node setup (Background+World Output) [F].
![]()
8. Add a node "Texture->Environment Texture" and plug the "Color" output into the Background node's "Color" input. [A]
9. Click "Open" (File) in the Environment Texture Node and load your image file. [B.]
10. The Environment Texture Node now contains your file. Now look at the
name of the node: Its name should be "Environment Texture", but you can rename it if you want by bringing up the property panel (Key N) on the right.
Remember this name because in step 12, you must use the name of this node to replace textures! [C]
Test if your texture is working:11. Go back to Blend4Web mode and hit "Fast Preview". The browser opens with the Blend4Web Scene Viewer and the scene should show the cube with the background texture. If there is no background, you did something wrong.
OK, this is how you insert the texture. Do all these steps for your scene so that your scene shows the Cycles background texture.
Now for replacing the texture in your scene dynamically (during runtime):12. Use the following code to replace the texture. This code example assumes that the name (mentioned in step 10) of your Environment Texture node is "Environment Texture". If you use a different name, insert that name.
function replace_my_environment_texture() {
var _world = m_scs.get_world_by_name("World");
var _image = new Image();
_image.onload = function() {
m_tex.replace_image(_world, "Environment Texture", _image, null); // the String is the name of the Cycles Env. Texture Node in Blender!
}
_image.src = "assets/my_new_background_texture.png"; // path and name of the image that is to replace the current background
}
: If you use this syntax, the new background image will only load upon calling this function. That means there will be a noticeable load time. If you want to avoid the latter, you have to pre-load the image, i.e. do the loading upon scene init, for example in the load function.
1. You must be in Blend4Web Mode! [A]
5. Switch to Cycles Mode. [A]
8. Add a node "Texture->Environment Texture" and plug the "Color" output into the Background node's "Color" input. [A]
