Alternativa Platform 3D test – Part 2

In the previous post I showed a basic example provided in the Alternativa pack. I’m going to use that as a working basis to explore the alternativa platform features. First, I’m going to change the appearance by adding textures, lights and shadows. Let’s see how this can be put into place.

Before doing any of that though, I’d like to add a floor in my maze, so that the player doesn’t feel like he’s hanging in the air – I’m going to call the user “the player” as this demo in first person view feels like a game. This is quite easy, you just need to add a cube at z=-BOX_SIZE in the the maze creation loop.

Adding textures may be achieved using a simple embed tag – as I’m only going to have very few light-weight images, I don’t to go through a loading process. Note that image size must be a power of 2, in this case I’ll use images that are 128px x 128px :

So now I have 2 variables containing the bitmap textures, I’ll be able to use later when applying to my objects :

Applying a bitmap texture means creating a material and there are several to choose from. The basic FillMaterial won’t do of course, but neither will the ordinary TextureMaterial as it doesn’t support lighting, and that’s exactly what I’m going to add next. So I’ll go for VertexLightTextureMaterial which uses dynamic lighting.

While I’m at it, let’s put a sky in the scene. Alternativa has a special class for this purpose, the skybox ! Basically, it’s just a big enough box to contain the whole scene with its surfaces turned inwards. So we just need to apply a texture of a beautiful sky and you have it ! Alternativa provides a nice example of a skybox, so I won’t bother too much with looking for something else.

And then the skybox is added to the seen :

Et voilà : try out this demo !

Ok, so I cheated, you probably noticed ! You shouldn’t see anything except for the skybox as I haven’t yet added any lighting !

Let’s put 2 different light sources, one ambient and one directional :

The code is pretty much self explicit. If you need detailed explanations, please feel free to post your question.

I also deactivated the [E] and [C] keys in the demo and activated [Q] and [Z] for french keyboards. That was easily done :

Ok then, that’s already quite neat, but wouldn’t it be nice to have casted shadows for a more realistic feel ?

First I need to change the material as VertexLightTextureMaterial doesn’t support shadows. Well, that’s a drawback, but it will be interesting to explore a new type of material : StandardMaterial. Of course, you need to import the appropriate packages, here a some of those I have needed to add :

So, let’s first look at how we create the new material. This material supports maps such as transparency, diffusion, specular… you could have an image file for each if you wanted ! You can also use a plain color, like in my example :

Of course, applying the material to the boxes will change in consequence, as we now have a variable containing the material information. And now, for the shadows :

I’ve had to mess around a lot with the parameters before I got an aspect that suits me. y knowledge in this matter is prettypoor, so I can’t really detail them either. I can only suggest you take a closer look at the Alternativa specs, demos and tutorials if you really want to figure it out.

So we just need to define the shadow casters, in this case the walls. So we change the construction loop, here’s the part for the walls :

Here’s the result

It’s a lot darker, but the shadow effect turns out quite nice, and how about the reflection of the sun light on the top surfaces of the walls ?