TextureArray object - Replace textures

Introduction
In this tutorial we will show how to dynamically replace the texture on one of the objects in your 3D model, choosing from a set of texture images. This is a very common feature when working with web3D and when creating Configurators, i.e. when you want the user (that interacts with your 3D model) to decide which color or material the objects should have. To implement this feature to your presentation is very easily done with WireFusion, using the TextureArray object.

We will continue to work with the bicycle computer from Lesson 4.

Software used: WireFusion 3.2.26 and WF-3D 2.0.16

Download this WireFusion project (zip: 231 kb)

Test this project >>>

Step 1 - Load the Lesson 4 project

Load (File > Open Project) the project file wf3d-lesson4-cameras.wfp, used in Lesson 4.

When loaded, double-click the 3DScene object to open its dialog.

Step 2 - Showing the Shell in-ports

We want to dynamically replace the texture of the bicycle computer shell. By default the shell is orange, but now we want the user to be able to replace it dynamically with other textures (colors).

Many of the properties for a 3D object (in the Appearance tab), like for example the Diffuse Color, Glossiness, Opacity, Texture etc, can be changed (or animated) dynamically in WireFusion. But in order to work dynamically with the properties, you have to make their in-ports visible in the 3DScene object.

To make them visible for the shell object, select the Shell object (Object "Shell"), by marking it in the object list.

Then mark the Show the property in-ports checkbox.

Click the OK button to close the 3DScene dialog.

You will now have a new set of in-ports in the 3DScene object, dedicated to the Shell object.

Step 3 - Storing the textures: Insert a TextureArray object

The TextureArray object is the object to use when you want to replace a default texture with a number of texture images.

Insert a TextureArray object (found in Objects > 3D)

When its dialog opens, click the Add Image... button and multi-select the images named blue.jpg, green.jpg, orange.jpg, purple.jpg and red.jpg

The loaded images are now stored in an array and note that each image has a unique Index number, found to the left. The first image has index 0, the second has index 1, and so on.

Click the OK button to close the dialog.

Step 4 - Replacing the default texture: Connect TextureArray and 3DScene

We want to replace the default texture (for the shell object) with the texture images we've stored in the TextureArray object.

Connect:
'TextureArray 1' > Out-ports > Texture Pushed [Texture]
to
'3DScene 1' > In-ports > Objects > "Shell" > Texture [Texture]

We are not quite finished yet. So far we have only made the connection that will "transfer" the texture from the TextureArray object to the 3DScene object. We first need to create a color palette...

Step 5 - Create a color palette: Insert five Image objects

We now want to create a color palette, to use for selecting/changing the texture. This palette can be created in many different ways, but here is one way.

Insert an Image object.
Load the image blue.gif
Position the image in X:5 and Y:5
Rename the object from Image 1 to Blue

Now, insert four more images...

Insert a second Image object.
Load the image green.gif
Position the image in X:5 and Y:30
Rename the object from Image 1 to Green

Insert a third Image object.
Load the image orange.gif
Position the image in X:5 and Y:55
Rename the object from Image 1 to Orange

Insert a fourth Image object.
Load the image purple.gif
Position the image in X:5 and Y:80
Rename the object from Image 1 to Purple

Finally, insert a fifth Image object.
Load the image ref.gif
Position the image in X:5 and Y:105
Rename the object from Image 1 to Red

Step 5 - Index numbers: Insert five Number objects

As you remember from Step 3, each image in the array has an unique index number. In order to send out an image from the TextureArray object, you first have to send in a number to it (the index number for the image you want to send). To do this, we need to insert a Number object for each image.

Insert a Number object (found in Objects > Data) and place it below the Image object named Blue.

When its dialog opens, make sure its Value is 0.
Click the OK button to close the dialog.
Rename the object from Number 1 to Index 0.

Now, insert four more Number objects...

Insert a second Number object.
Set its Value to 1.
Rename the object to Index 1.

Insert a third Number object.
Set its Value to 2.
Rename the object to Index 2.

Insert a fourth Number object.
Set its Value to 3.
Rename the object to Index 3.

Finally, insert a fifth Number object.
Set its Value to 4.
Rename the object to Index 4.

Step 5 - Connect Image with Number

In order to send out the stored values in the Number objects, we first have to push them. This is done with the built-in mouse event system in the Image objects.

Connect:
'Blue' > Out-ports > Mouse Events > Mouse Press [2D Number]
to
'Index 0' > In-ports > Push Value

Connect:
'Green' > Out-ports > Mouse Events > Mouse Press [2D Number]
to
'Index 1' > In-ports > Push Value

Connect:
'Orange' > Out-ports > Mouse Events > Mouse Press [2D Number]
to
'Index 2' > In-ports > Push Value

Connect:
'Purple' > Out-ports > Mouse Events > Mouse Press [2D Number]
to
'Index 3' > In-ports > Push Value

Connect:
'Red' > Out-ports > Mouse Events > Mouse Press [2D Number]
to
'Index 4' > In-ports > Push Value

Step 7 - Connect Number with TextureArray

We now wants to send the index numbers, sent out from the Number objects (in Step 6), into the TextureArray object.

Connect:
'Index 0' > Out-ports > Value Pushed [Number]
to
'TextureArray 1' > In-ports > Push Texture [Number]

Connect:
'Index 1' > Out-ports > Value Pushed [Number]
to
'TextureArray 1' > In-ports > Push Texture [Number]

Connect:
'Index 2' > Out-ports > Value Pushed [Number]
to
'TextureArray 1' > In-ports > Push Texture [Number]

Connect:
'Index 3' > Out-ports > Value Pushed [Number]
to
'TextureArray 1' > In-ports > Push Texture [Number]

Connect:
'Index 4' > Out-ports > Value Pushed [Number]
to
'TextureArray 1' > In-ports > Push Texture [Number]

Step 8 - Fine tuning

We are more or less ready now. If you Preview the presentation now, you will see that it works. Clicking the color palette will change the shell texture.

However, we will make some small adjustments before we are ready.

To start with, it would be nice if the transition when changing texture was smooth.

Double click the TextureArray object and set the value for Fade time (Seconds) to 1.

Then, it would also be nice if we could get a Hand pointer when the mouse cursor is over the color palette.

Double click the Blue (Image) object, click the Target Area tab, and set the Cursor to Hand.

Now, do the same for the other four Image objects (Green, Orange, Purple and Red).

Finally, a very important thing, optimization! In this example we've only used five textures, but in other projects you might want to use more than that. And then, in order to shorten the startup time, it's important to stream the resources you won't use at the presentation startup. In this example we want to preload only the first texture (blue.jpg) and stream the other four.

Open the Loading Manager (found in Project > Loading Manager...)

Select the four images green.jpg, orange.jpg, purple.jpg and red.jpg and move them to the left side, to the Streamed files.

The order you see the resources in the Streamed files section is the order they will be streamed, i.e. first the green.jpg file, then the orange.jpg and so on.

Note: If you place resources in the Streamed files section, but they are actually needed at the presentation startup, then they won't be streamed, but preloaded. This is done automatically.

Step 9 - Test

Done!

Preview the presentation in the browser (Ctrl-F9) the presentation.

Step 10 - An alternative

In the tutorials above we created a color palette that was inside the presentation. However, you can create buttons or color palettes that are outside the presentation as well. These can for example be HTML buttons, image buttons or why not Flash buttons. The common thing for these external buttons is to use the ExternalLink object, which communicates with the presentation using JavaScript.

We won't show in detail how this is done, but here is an example using HTML buttons.
Test here >>>

Download the TextureArray with ExternaLink project (zip: 227 kb)

Step 11 - Yet an alternative

As we mentioned in Step 5, there are many ways to create a color palette. An alternative to the above is to place your color palette in a Scene object. You can then easily create a sliding color palette, like in the below example.

Test here >>>

Download the TextureArray project with a sliding color palette (zip: 233 kb)

End of lesson!