Port scene break down

I want to share how I complete an art test for Gameloft, this scene was built within 3.500 triangle budget and with 512×512 maximum texture resolution. I use 8 512×512 textures including skydome and lightmap.

Unity Technical Side:

1. The scene is about rainy night with a full moon, so there should be water puddle’s scattered all over the scene, this is how I made that happened.

  • Examine the mesh for the puddle, examine how the texture was tiled along the mesh.
  • What can I do with the texture that I already have, and not making new one’s only for a puddle.
  • We have a diffuse and lightmap texture, and we can use both alpha channel. We won”t use the diffuse alpha channel because the diffuse was tiled across the mesh and it will make ugly repeated water puddle, so we use the Lightmap alpha channel that was not tiled and perfect for the job.
  • I modified a lightmap shader and combine lightmap alpha channel to blend with diffuse, so that the alpha channel on the Lightmap will make a hole straight trough the diffuse. [here is the shader – Custom Lightmap Alpha.shader]

Shader “Custom/Lightmapped/Lightmap_Alpha”
{
Properties {
_MainTex (“Base (RGB)”, 2D) = “white” {}
_LightMap (“Lightmap (RGB)”, 2D) = “lightmap” { LightmapMode }
}
Category
{
SubShader
{
Tags {“Queue”=”Transparent” “IgnoreProjector”=”True”}
Pass
{
Blend SrcAlpha OneMinusSrcAlpha
BindChannels
{
Bind “Vertex”, vertex
Bind “texcoord”, texcoord0 // lightmap uses 2nd uv
Bind “texcoord1”, texcoord1 // main uses 1st uv
}
SetTexture [_MainTex] {constantColor [_]}
SetTexture [_LightMap]{Combine previous * texture, texture DOUBLE}
}
}
}
}

2. I have a lot of mesh with alpha on the scene, for the railing, the fence, etc. And I want them to be crisp, so again I modified a lightmap shader to meet with my needs. It’s different with first lightmap shader above, because now we only use the diffuse channel alpha slot, not the lightmap alpha slot. This shader also help me to sort z-depth problem between other transparent shader. [Custom Lightmap Alpha Cutoff.shader]

Shader “Custom/Lightmapped/Alpha Cutoff”
{
Properties {
_Color (“Main Color”, Color) = (1,1,1,1)
_MainTex (“Base (RGB)”, 2D) = “white” {}
_LightMap (“Lightmap (RGB)”, 2D) = “white” {}
_Cutoff (“Alpha cutoff”, Range(0,1)) = 0.5
}
SubShader {
Pass {
Blend SrcAlpha OneMinusSrcAlpha
Alphatest Greater [_Cutoff]
BindChannels {
Bind “Vertex”, vertex
Bind “texcoord1”, texcoord0 // lightmap uses 2nd uv
Bind “texcoord”, texcoord1 // alphamap uses 1nd uv
}
SetTexture [_LightMap] { constantColor [_Color] combine texture * constant DOUBLE }
SetTexture [_MainTex] { combine previous * texture, texture }
}
}
}

3. For the skybox I use an edited hemisphere and for the shader I borrow this;

Tags { “Queue”=”Background” “RenderType”=”Background” }
Cull Off ZWrite Off Fog { Mode Off }

from original skybox shader, because the original have 6 texture and it’s a skybox, and mine is a skydome with 1 spherical UV texture. This 2 lines make the shader not affected by fog and render them behind everything. [Custom Skydome.shader]

Shader “Custom/Skydome” {

Properties
{
_MainTex (“Diffuse”, 2D) = “”
}
SubShader{
Tags { “Queue”=”Background” “RenderType”=”Background” }
Cull Off ZWrite Off Fog { Mode Off }
BindChannels
{
Bind “Vertex”, vertex
Bind “Texcoord”, texcoord
Bind “Color”, color
}
Pass
{
SetTexture[_MainTex] {Combine primary * texture Double}
}
}
}

4. For the lights ray I use a cone model with 3 side with original Unity “Unlit-Alpha.shader”

5. For the rain FX I use package from “bluindigo” you can find it here “http://forum.unity3d.com/threads/9965-Clouds-and-rain

So there you go, 3 customized and 1 original shader. Shame that I just figure it out how to make the puddle shader after I sent the art test T___T.

Nice Web 3d Model Presentation

http://p3d.in

I just found this neat website that can store our 3d model, and preview them without any plugins whatsoever, but I haven’t check with other than Firefox and Chrome though.

Pro:

– Menus for changing model material and showing the wireframe over the model.

– We can embed the model straight to our website, no love for wordpress.com though. It will convert to a link.

Cons:

– No reset button after we rotate and drag the model, so if the model somehow dragged out of frame we have to zoom out and drag the model to center again.

– Right now the only texture format they supported was JPG [no transparency]

– And only OBJ for now

Here’s my mailbox model loaded into p3d

But for what it’s worth. If you’re looking for simple model loader for web look no other.

Do you have another website that I might not aware that can do the same with this one? please share with us ^__^

notes:

p3d eula

p3d faq

Unity vertex color test

Here’s is the vertex color test on Unity Engine. I export the FBX model from 3dsmax 2010. I use this two shader I found at Unity forum.

Vertex color shader

Vertex color shader2 [Different shader but have the same purpose, I think it’s serve better than previous shader, because the original shader doubled the draw calls and the triangle count]

I found this shader on Unity Wiki. This shader combine vertex color from 3dsmax and still affected bylighting from the scene. If you want pure vertex shader without lighting use this instead.

Debug vertex light shader

Debug vertex light shader2 [Based on this tutorial by JessyUV , I edit some of the shader to work like the previous debug vertex light shader] if you find this shader worst than before please tell me okay ^__^.

This shader is very handy when you want to check your vertex color without texture, you can check this to read about other cool debug shader. [Now working on Android platform, I haven’t check with IOS though ]

Note: 3dsmax FBX currently doesn’t export face’s color, so I use only vertex when coloring the model. Coloring face’s just show white on Unity, I still searching how to work this out, maybe the exporter, maybe the shader, I still searching for answer. In the meantime only vertex assigned color that can be exported.

click on the image to see the test

I use one direct light for this scene, the right meshes use vertex color and the left meshes not having any vertex color information.

Vertex Paint tutorial

In this project I use vertex paint to add volume to my texture and model, vertex paint can add variety to my repeated texture, so far I only use some of it’s capability. Also I find some Unity shader that might help you to show your model with.

FACE’S AS MEDIUM

1. Select the object you want to edit, my object use lot of same uv region, so I wouldn’t worry about run out my uv space. But by doing this my repeated texture looks dull and the depth wasn’t there.

2. On modifier list add “vertex paint” in to the list. The highlighted square box below is the vertex paint tools I will use.

3. Expand the vertex paint list and choose “face” for now and select the face you want to colorize.

4. On the vertex paint window, select the color you want to add, I choose very light brown. After that click on the bucket icon to fill the face that you have selected.

The face we selected have became more darker because we add light brown vertex color on it.

VERTEX’S AS MEDIUM

Now we try playing color with vertex as the medium. Vertex has different style and behavior, we can’t contain the color like face’s do, but the advantage on using vertex is that we can have a nice color gradient.

1. Select “vertex” on vertex paint modifier list. We add some shading for the side wood plank and as you see, the shading is very sharp, we want to add smooth transition between the dark and light area.

2. Select 2 or more vertex and using fill tool, flood the vertex with the same color as the side face’s. And we have a nice gradient  shading for our plank round sides.

This is what i come up with the same technique describe above.

That was a quick preview what vertex paint can do. Next I will build a web player using Unity with a model with vertex color shader on it.

Stylized Wild West Part 1

So lets start,

I want to try stylized cartoon for my project, odd form, bright color, strong contrasts, but fun to see. A western theme environment, with canyon and orange sunset as backdrop.

This is what I come up with,

Couple western cowboy building, It’s a little high for now. I will make some adjustment later on.

I also want to focus on performance hit for this project, as this project was intended for browser preview. This model has approximately 2000 triangle, and I will need some shadowing to make the model have depth and volume,  so I use vertex paint to add variety of dark and light on the texture. I don’t know if I will use lightmap later, but it is fun to see what you can make with simple vertex paint tools.

my small tutorial on vertex painting with 3dsmax