Using the template

Here you can find how to use the AirFlow template to create your application.

Controlling the airflow

The AirflowMain project contains the airflow controls.

The bottom bar show the currently set airflow temperature and AC levels and serves as the main control for the airflow. The bottom menu activates slider controls for:

• Driver side

• Synchronizing the driver and passenger side

• Passenger side

To show the driver side temperature and AC level controls, click the icons in the bottom-left corner. To show the passenger side controls, click the icons in the bottom-right corner.

To show controls that synchronize the temperature and AC level for both driver and passenger sides, click the icon in the middle.

Changing car model

The CarModel project contains the car model and the textures that the models use.

To change the interior, move parts of the car, or add functionality, see the structure in the CarModel project. As an example of how to do this and how to scale a car model, see the CarModelReference.fbx model.

To change the car model:

1. In the CarModel project, import the 3D model of the car that you want to use.

2. In the AirflowMain project, in the RootPage > Viewport 2D > Scene > CarRoot, set the Prefab Template property to the kzb URL of the prefab in the CarModel project that you want to use.

   

Changing environment

The Environment project defines the environment and contains the environment assets.

The AirflowMain project instantiates the environment in the Environment prefab using a kzb URL.

When you change the environment, the template animates the change with a fade-in, fade-out effect. This is created in the Environment project with a custom textured shader EnvironmentTextured that is controlled by envChanger controller property in the Sunset State Manager.

The visibility of an environment is changed based on the current value of the envChanger using mix function in the EnvironmentTextured material type fragment shader:

This template shows an environment that uses a texture mapped on a skybox sphere. To ensure good performance, it uses only one texture for the whole environment.

To change the environment, use your own environment image. To use the image in a skybox sphere, in addition to the cubemaps used by the 3D models, create a regular texture. To create a texture from an HDR image, in the Library > Resource Files > Images, right-click your environment texture and select Create > Texture.

If you change the environment textures, to set the car paint reflections, use the cubemaps from the same environment. In the CarModel project, use the cubemaps in the CarEnvironmentSwitch state manager.

Adjusting rendering

The CarModel project defines the rendering.

To adjust the rendering, in the Library > Rendering > Render Pass Prefabs adjust the Default Render Pass render pass.

The Default Render Pass render pass defines the drawing of the sky, the main scene, transparent objects, light beams and overlays. The Blit Render Pass applies bloom to the scene.

Adjusting features

Adjusting the airflow direction

The direction of the airflow is defined in the AirFlowMain project, while the airflow meshes are defined in the AirFlowWind project.

The direction of airflows is controlled by the RootPage > Scroll View 2D nodes. These scroll views define the limit the airflow direction to maximum and minimum rotations using the Scroll Bounds Minimum and Scroll Bounds Maximum properties. This keeps the airflow pointing only in available directions and prevents overlapping airflows.

The direction of the airflow is controlled with this logic:

Airflow node	Controlling properties
Wind_L	AirFlowWind.AngleY_L AirFlowWind.AngleX_L
Wind_R	AirFlowWind.AngleY_R AirFlowWind.AngleX_R
Wind_CL	AirFlowWind.AngleY_CL AirFlowWind.AngleX_CL
Wind_CR	AirFlowWind.AngleY_CR AirFlowWind.AngleX_CR

These properties are connected to the Scroll View 2D nodes ScrollViewConcept.ScrollPosition properties. In addition to the Scroll Bounds Minimum and Scroll Bounds Maximum properties, the airflow has clamping properties to prevent overextending the airflow directions. This is set in each Wind node in the AirFlowWind project using a binding that controls the direction.

x = {../AirFlowWind.AngleX_L}
y = {../AirFlowWind.AngleY_L}

a = 10

#Clamp X minimum
Xmin = -5

#Clamp Y maximum
Xmax = 18

#Clamp Y minimum
Ymin = -30

#Clamp Y Maximum
Ymax = 25

horizontalAngle = CLAMP(Xmin - a, Xmax + a, x)
verticalAngle = clamp(Ymin - a, Ymax+a, y)

createRotation(verticalAngle , 0.0, horizontalAngle )

Adjusting the wind color

You can adjust the wind color in the AirFlowWind project in the AirflowLeft and AirflowRight prefabs. These prefabs have a Property-Driven Animation Player node component Temperature_Anim attached that animates the color values based on the input property ACDemo.Temperature.

This animation defines the individual color channel values based on the ACDemo.Temperature property value.

To adjust how the temperature affects the coloring, in the PropertyDriven_Temperature_Properties animation clip, adjust the keyframes for each color channel. Keep in mind that the property-driven animation player must start from 0 seconds.

The ACDemo.Temperature property that controls the property-driven animation has a binding to the ##Template of the prefab to mix depending on whether it is the driver or passenger side airflow mesh. To enable synchronization of temperatures on both sides, it uses the mix binding function.

mix({##Template/ACDemo.TemperatureDriverSide}-16.0,{##Template/ACDemo.TemperaturePassengerSide}-16.0, {##Template/ACDemo.SyncTemperature})

The binding uses the value -16.0 to set the 16 degrees as the lowest temperature.

In addition to the airflow meshes having color that enhances the ambient coloring inside the cabin, there are point lights that have property-driven animation players that define the colors for the ambient light. The source for this color is Color animation clip.

Adjusting the wind speed

You can adjust the wind color in the AirFlowWind project in the AirflowLeft and AirflowRight prefabs. These prefabs have a Property-Driven Animation Player node component that sets the wind speed.

The animation for the wind speed is in the Library > Animations > PropertyDriven_FanSpeed_Properties. To change the appearance of wind, adjust the properties in this animation. The properties refer to the custom shader DynamicAC, but are controlled simultaneously using the property-driven animation.

The speed for the wind meshes has different levels and is controlled by the Library > State Managers > AirflowStateManager state manager through the ACDemo_FanSpeed controller property. These levels set the animation speed. This state manager controls:

• The speed of the flowing air

• The masking effect for the mesh to reduce the length of the mesh

The source for ACDemo.FanSpeed control depends on which side of the airflow meshes you edit. Controls for FanSpeed are added in AirFlowMain UI as sliders on the right side. The slider returns the FanSpeed value through the Controls node to the prefab.

The value is calculated in the slider, by dividing the maximum slider value of 100 by 25 to return the correct integer values for the property. When FanSpeed value is 0, the wind meshes fade out and are not shown. The fading is set in the State Managers > AirflowStateManager > 0 State, by setting the Blend Intensity property to 0.

For example, to change the number of fan levels so that level 0 switches AC off and add one more AC level:

1. In the AirFlowWind project:

   1. In the Library > Property Types > ACDemo > FanSpeed property, set the Upper Bound to 5.

      

   2. In the Library > State Managers > AirFlowStateManager state manager, create the state for the additional level and in that state set the ACDemo.FanSpeed controller property to 5.

      

2. In the AirflowMain project:

   1. In each fan prefab, adjust the binding so that the sliders respond to the updated range.

      

   2. In each instance of the SliderFan prefab, adjust the binding to add a step.

      

   3. In the Textured_Fan_Scale shader, adjust the 02_Scale > Gauge.Scale_Tiling property to add a step.

      

Adjusting the wind shape

You can adjust the wind shape in the AirFlowWind project.

To introduce variation to the wind meshes, use the WaveCrestOffset properties in the shader. The wave meshes have three overlapping planes. You can add variation by modifying the wave crest of each plane. The properties WaveCrestOffset, WaveCrestOffsetLower, and WaveCrestOffsetMiddle define controls for adding different variation points for the waves cycle calculation. If these properties have the same value, each plane uses the same pattern for the waves.

To modify the wave calculation, the movement achieved modifying vertex position (pos) to simulate a dynamic wave effect. The wave is generated by applying sinusoidal functions to the vertex positions and vertex colors are used to mask each of the three overlapping planes to be controlled separately. To change the wave direction to horizontal instead of vertical, change the shader code to modify pos.z to be pos.x.

void main()
{
vTexCoord = (vec2(kzTextureCoordinate0.x,1.0-kzTextureCoordinate0.y) * TextureTiling - TextureOffset);
vTexCoord2 = vec2(kzTextureCoordinate0.x,1.0-kzTextureCoordinate0.y) ;
vColor = kzColor0;

vec4 pos = vec4(kzPosition.xyz, 1.0);
float WaveRange = smoothstep(1.0, 0.7, vTexCoord2.y);
//Red VColor waves
pos.z += WaveHeight.y * kzColor0.r * sin(pos.y * WaveLength.y + WaveTime + WaveCrestOffset) * WaveRange;
pos.z += WaveHeight.x * kzColor0.r * sin(pos.x * WaveLength.x + WaveTime + WaveCrestOffset) * WaveRange;
//Blue VColor waves
pos.z += WaveHeight.y * kzColor0.g * sin(pos.y * WaveLength.y + WaveTime + WaveCrestOffsetMiddle) * WaveRange;
pos.z += WaveHeight.x * kzColor0.g * sin(pos.x * WaveLength.x + WaveTime + WaveCrestOffsetMiddle) * WaveRange;
//Green VColor waves
pos.z += WaveHeight.y * kzColor0.b * sin(pos.y * WaveLength.y + WaveTime + WaveCrestOffsetLower) * WaveRange;
pos.z += WaveHeight.x * kzColor0.b * sin(pos.x * WaveLength.x + WaveTime + WaveCrestOffsetLower) * WaveRange;
//Scale of flow

gl_Position = kzProjectionCameraWorldMatrix * vec4(pos.xyz, 1.0);
}

Fine-tuning wind appearance

You can fine-tune the appearance of wind in the AirFlowWind project.

To give the illusion of the air moving along the airflow meshes, airflow prefabs AirflowLeft and AirflowRight use Float Value Accumulator node components. These value accumulators continuously animate the texture offset of the material. The offset is set by Texture Offset.Y according to the UV coordinates of the meshes.

A value accumulator enables you to:

• Control the size of the increment at application runtime.

• Loop the value increment.

These Float Value Accumulators define the speed of the texture offsetting and waves:

• The TextureOffsetY Value Accumulator uses for the value of the Increment Size Source the ACDemo.WindAnimationSpeed property. This enables you to control the size of the increments. In the project the AirflowStateManager sets the value of this property. The wind speed increases with the increase in size of the increment set by the AirflowStateManager.

  

• The WaveTime Value Accumulator uses for the Increment Size Type the Fixed value and in the Increment Size sets the value.

  

Repositioning the wind meshes

When you import your own car model, the air vents are in a different position than in the template car model. After you import your car model, adjust the position of the wind meshes in the AirFlowWind project.

To reposition the wind meshes:

1. In the Car node set the Prefab Template property to the kzb URL of the prefab that contains your car model in the CarModel project.

   

2. Reposition the child nodes of the SportsCar_AC prefab to the vent locations by adjusting the Render Transformation properties.