Totem's Lair: Guida a Visual Basic.Net + XNA (3D), Riflessi

B21. Riflessi

Quando guardiamo la superficie dell'acqua, essa non appare sempre uniforme, ma, dato che riflette anche la luce del sole, ci saranno certi punti molto più luminosi di altri. Questo è quello che succede, infatti, quando si guarda l'immagine riflessa del sole, ad esempio, in una pozzanghera. Nella cube map che abbiamo usato come skybox c'è il "disegno" di un sole, ed esso viene correttamente riflesso sulla sull'acqua senza problemi. La situazione non impone di aggiungere ulteriori riflessi, ma lo si può fare. Questa aggiunta rappresenta una raffinatezza usabile anche in altri casi.
Per trovare quei pixel che vengono colpiti dalla luce solare, basta semplicemente riflettere la direzione della luce sulla superficie. Questa operazione viene effettuata usando la funzione reflect di hlsl, che accetta come primo parametro il vettore da riflettere, e come secondo parametro la normale del punto di riflessione. Aggiungiamo quindi questo codice alla fine del pixel shader, dopo il calcolo di WaterColor:

float3 ReflectionVector = -reflect(LightDirection, Normal);

In questo modo, si ottiene il vettore riflesso di LightDirection rispetto alla normale del punto colpito dalla luce. Potete osservare il risultato che si dovrebbe ottenere in questo schema:

Luce riflessa

Tuttavia, la funzione reflect non restituisce il vettore verde esattamente com'è nella figura, ma invertito, con la punta rivolta verso O (ossia esattamente simmetrica al vettore Luce rispetto alla normale). Per questo motivo dobbiamo mettere un meno davanti al risultato della funzione per ottenere il vettore giusto.
Ora, sappiamo che la luce intensa riflessa dai punti colpiti dal sole ci giunge solo se stiamo guardando verso quei punti. Perciò, per sapere quanta luce l'osservatore riceva, dobbiamo valutare di quanto il vettore riflessione sia uguale al vettore sguardo. Se vi ricordate, per calcolare "quanto coincidenti" (passatemi il termine) siano due vettori, si utilizza il prodotto scalare dot, che restituisce il coseno dell'angolo compreso tra i due. Immettiamo questo risultato in un fattore che chiamiamo Specular:

//Vector e Normal sono definiti nella parte precedente
//del pixel shader
float3 ReflectionVector = -reflect(LightDirection, Normal);
//Ricordate che dot richiede, in questo caso, due vettori di
//lunghezza unitaria
float  Specular = dot(normalize(ReflectionVector), normalize(Vector));

Possiamo ora sommare questo valore al colore di output del pixel shader, per esaltarne la luminosità:

Output.Color.rgb += Specular;

E otterremo questo magnifico risultato:

Un effetto alquanto strano

Non era proprio quello che ci si era aspettati, a dire il vero. Questo succede perchè la luce viene riflessa ed espansa su tutta la superficie disponibile e quando il coseno risulta negativo (ossia quando si voltano le spalle alla luce) il colore non viene esaltato ma scurito. Possiamo eliminare questo vistoso difetto elevando il coefficiente Specular ad una potenza molto grande (e pari): in questo modo non solo si elimina l'area scura che deturpa la bellezza del paesaggio, ma si restringe anche la luce ad un'area molto piccola. Infatti, usando una funzione esponenziale, i valori bassi del coseno tenderanno ad annullarsi e quelli alti a divenire ancora più evidenti. Potete capire meglio questo concetto osservando il grafico seguente

Approssimazione della funzione

Questo grafico rappresenta la funzione |2cos(x/4)|⁵. Il coefficiente 2 serve per rendere evidente i picchi (se avessi lasciato solo coseno, il grafico sarebbe oscillato tra 0 e 1: in questo modo oscilla tra 0 e 2⁵); il fattore 1/4 nell'argomento del coseno serve per allargare la funzione in modo da renderla meglio osservabile (altrimenti sarebbe stata molto stretta); il valore assoluto, invece, serve per annullare l'oscillazione negativa del coseno, in quanto la potenza 5 è dispari e fa permanere il segno. Insomma, tralasciando tutti gli accorgimenti che ho immesso per rendere la funzione "più bella" esteticamente, potete osservare che, solo con la quinta potenza, essa oscilla vertiginosamente, e raggiunge picchi molto alti in un intervallo esiguo. Pensate al suo andamento se elevassimo, ad esempio, alla 256-esima potenza! Se non riuscite a pensarlo, allora provate (usando la funzione pow, che è identica a Math.Pow):

Specular = pow(Specular, 256);        
Output.Color.rgb += Specular;

Otterrete questo:

Il vero riflesso

Un risultato molto migliore di prima, vero? Tuttavia, possiamo renderlo ancora migliore. Infatti, in questo codice presumiamo che la normale sia la stessa (0,1,0) in tutti i punti. Ma nei tutorial precedenti abbiamo introdotto apposta una bump map per rendere la superficie increspata. Introduciamo questa modifica anche sulla luce:

Normal = (BumpColor.rbg - 0.5f) * 2.0f;
float3 ReflectionVector = -reflect(LightDirection, Normal);
float  Specular = dot(normalize(ReflectionVector), normalize(Vector));
Specular = pow(Specular, 256);        
Output.Color.rgb += Specular;

Risultato finale

struct VertexToPixel
{
    float4 Position   	   : POSITION;    
    float4 Color		   : COLOR0;
    float  LightingFactor  : TEXCOORD0;
    float2 TextureCoords   : TEXCOORD1;
};

struct PixelToFrame
{
    float4 Color : COLOR0;
};

float4x4 View;
float4x4 Projection;
float4x4 World;
float3 LightDirection;
float AmbientFactor;
bool LightEnabled;

texture ATexture;
sampler TextureSampler = sampler_state 
{
    Texture = ;
    Magfilter = Linear;
    Minfilter = Linear;
    Mipfilter = Linear;
    AddressU = Mirror;
    AddressV = Mirror;
};

//--------------------------------------------
//Tecnica 1 : Colore
//--------------------------------------------

VertexToPixel ColoredVertexShader(float4 inPos : POSITION, float4 inColor: COLOR)
{	
	VertexToPixel Output = (VertexToPixel)0;
    
	float4x4 ViewProjection = mul(View, Projection);
	float4x4 WorldViewProjection = mul(World, ViewProjection);
    
	Output.Position = mul(inPos, WorldViewProjection);
	Output.Color = inColor;
    
	return Output;    
}

PixelToFrame ColoredPixelShader(VertexToPixel inPixel) 
{
	PixelToFrame Output = (PixelToFrame)0;		
    
	Output.Color = inPixel.Color;
	
	return Output;
}

technique Colored
{
	pass Pass0
	{   
		VertexShader = compile vs_1_1 ColoredVertexShader();
		PixelShader  = compile ps_1_1 ColoredPixelShader();
	}
}


//--------------------------------------------
//Tecnica 2 : Colore + Luce
//--------------------------------------------

VertexToPixel ColoredPlusVertexShader(float4 inPos : POSITION, float4 inColor: COLOR, float3 inNormal: NORMAL)
{	
	VertexToPixel Output = (VertexToPixel)0;
    
	float4x4 ViewProjection = mul(View, Projection);
	float4x4 WorldViewProjection = mul(World, ViewProjection);
    
	Output.Position = mul(inPos, WorldViewProjection);
	Output.Color = inColor;
	
	Output.LightingFactor = 1;
	if (LightEnabled)
    {
        float3 Normal = normalize(mul(normalize(inNormal), World));	
		Output.LightingFactor = saturate(dot(Normal, -LightDirection));
    }
    
	return Output;    
}

PixelToFrame ColoredPlusPixelShader(VertexToPixel inPixel) 
{
	PixelToFrame Output = (PixelToFrame)0;		
    
	Output.Color = inPixel.Color;
	Output.Color.rgb *= saturate(inPixel.LightingFactor + AmbientFactor);
	
	return Output;
}

technique ColoredPlus
{
	pass Pass0
	{   
		VertexShader = compile vs_1_1 ColoredPlusVertexShader();
		PixelShader  = compile ps_1_1 ColoredPlusPixelShader();
	}
}


//--------------------------------------------
//Tecnica 3 : Textured
//--------------------------------------------

VertexToPixel TexturedVertexShader(float4 inPos : POSITION, float3 inNormal: NORMAL, float2 inTexCoords: TEXCOORD0)
{    
    VertexToPixel Output = (VertexToPixel)0;
	
    float4x4 ViewProjection = mul (View, Projection);
    float4x4 WorldViewProjection = mul (World, ViewProjection);
    
    Output.Position = mul(inPos, WorldViewProjection);    
    Output.TextureCoords = inTexCoords;
        
    Output.LightingFactor = 1;
    if (LightEnabled)
    {
        float3 Normal = normalize(mul(normalize(inNormal), World));	
		Output.LightingFactor = saturate(dot(Normal, -LightDirection));
    }
    
    return Output;    
}

PixelToFrame TexturedPixelShader(VertexToPixel inPixel)
{
    PixelToFrame Output = (PixelToFrame)0;        
    
    Output.Color = tex2D(TextureSampler, inPixel.TextureCoords);
    Output.Color.rgb *= saturate(inPixel.LightingFactor + AmbientFactor);

    return Output;
}

technique Textured
{
    pass Pass0
    {
        VertexShader = compile vs_1_1 TexturedVertexShader();
        PixelShader = compile ps_1_1 TexturedPixelShader();
    }
}


//--------------------------------------------
//Tecnica 4 : MultiTextured
//--------------------------------------------

struct MultiVertexToPixel
{
    float4 Position         : POSITION;    
    float4 Color            : COLOR0;
    float3 Normal           : TEXCOORD0;
    float2 TextureCoords    : TEXCOORD1;
    float4 LightDirection   : TEXCOORD2;
    float4 TextureWeights   : TEXCOORD3;
    float Depth             : TEXCOORD4;
};

struct MultiPixelToFrame
{
    float4 Color : COLOR0;
};

Texture Texture0;
Texture Texture1;
Texture Texture2;
Texture Texture3;

sampler TextureSampler0 = sampler_state 
{
	Texture = <Texture0>; 
	Magfilter = Linear; 
	Minfilter = Linear; 
	Mipfilter = Linear; 
	AddressU = Wrap; 
	AddressV = Wrap;
};

sampler TextureSampler1 = sampler_state 
{
	Texture = <Texture1>; 
	Magfilter = Linear; 
	Minfilter = Linear; 
	Mipfilter = Linear; 
	AddressU = Wrap; 
	AddressV = Wrap;
};

sampler TextureSampler2 = sampler_state 
{
	Texture = <Texture2>; 
	Magfilter = Linear; 
	Minfilter = Linear; 
	Mipfilter = Linear; 
	AddressU = Mirror; 
	AddressV = Mirror;
};

sampler TextureSampler3 = sampler_state 
{
	Texture = <Texture3>; 
	Magfilter = Linear; 
	Minfilter = Linear; 
	Mipfilter = Linear;
	AddressU = Mirror; 
	AddressV = Mirror;
};



MultiVertexToPixel MultiTexturedVertexShader(float4 inPos : POSITION, float3 inNormal: NORMAL, float4 inTexCoords: TEXCOORD0, float4 inTexWeights: TEXCOORD1)
{    
    MultiVertexToPixel Output = (MultiVertexToPixel)0;
	
    float4x4 ViewProjection = mul(View, Projection);
    float4x4 WorldViewProjection = mul(World, ViewProjection);
    
    Output.Position = mul(inPos, WorldViewProjection);
    Output.Normal = mul(normalize(inNormal), World);
    Output.TextureCoords = inTexCoords;
    Output.LightDirection.xyz = -LightDirection;
    Output.LightDirection.w = 1;    
    Output.TextureWeights = inTexWeights;
    Output.Depth = Output.Position.z / Output.Position.w;
    
    return Output;    
}

MultiPixelToFrame MultiTexturedPixelShader(MultiVertexToPixel inPixel)
{
    MultiPixelToFrame Output = (MultiPixelToFrame)0;        
    
    float lightingFactor = 1;
    if (LightEnabled)
        lightingFactor = saturate(saturate(dot(inPixel.Normal, inPixel.LightDirection)) + AmbientFactor);
        
    float blendDistance = 0.99f;
    float blendWidth = 0.005f;
    float blendFactor = clamp((inPixel.Depth - blendDistance) / blendWidth, 0, 1);
        
    float4 farColor;
    farColor = tex2D(TextureSampler0, inPixel.TextureCoords) * inPixel.TextureWeights.x;
    farColor += tex2D(TextureSampler1, inPixel.TextureCoords) * inPixel.TextureWeights.y;
    farColor += tex2D(TextureSampler2, inPixel.TextureCoords) * inPixel.TextureWeights.z;
    farColor += tex2D(TextureSampler3, inPixel.TextureCoords) * inPixel.TextureWeights.w;
    
    float4 nearColor;
    float2 nearTextureCoords = inPixel.TextureCoords * 3;
    nearColor = tex2D(TextureSampler0, nearTextureCoords) * inPixel.TextureWeights.x;
    nearColor += tex2D(TextureSampler1, nearTextureCoords) * inPixel.TextureWeights.y;
    nearColor += tex2D(TextureSampler2, nearTextureCoords) * inPixel.TextureWeights.z;
    nearColor += tex2D(TextureSampler3, nearTextureCoords) * inPixel.TextureWeights.w;

    Output.Color = lerp(nearColor, farColor, blendFactor);
    Output.Color *= lightingFactor;
    
    return Output;
}

technique MultiTextured
{
    pass Pass0
    {
        VertexShader = compile vs_2_0 MultiTexturedVertexShader();
        PixelShader = compile ps_2_0 MultiTexturedPixelShader();
    }
}


//--------------------------------------------
//Tecnica 5 : Acqua
//--------------------------------------------

float4x4 ReflectionView;
Texture ReflectionMap;
Texture RefractionMap;
Texture BumpMap;
float WaveLength;
float WaveHeight;
float3 CameraPosition;
float Time;
float WindForce;
float3 WindDirection;

sampler ReflectionSampler = sampler_state
{
    texture = <ReflectionMap>;
    Magfilter = Linear;
    Minfilter = Linear;
    Mipfilter = Linear;
    AddressU = Mirror;
    AddressV = Mirror;
};

sampler RefractionSampler = sampler_state
{
    texture = <RefractionMap>;
    Magfilter = Linear;
    Minfilter = Linear;
    Mipfilter = Linear;
    AddressU = Mirror;
    AddressV = Mirror;
};

sampler BumpSampler = sampler_state
{
    texture = <BumpMap>;
    Magfilter = Linear;
    Minfilter = Linear;
    Mipfilter = Linear;
    AddressU = mirror;
    AddressV = mirror;
};

struct WaterVertexToPixel
{
    float4 Position           : POSITION;
    float4 ReflectionPos      : TEXCOORD1;
    float2 BumpPos            : TEXCOORD2;
    float4 RefractionPos      : TEXCOORD3;
    float4 PointPosition      : TEXCOORD4;
};

struct WaterPixelToFrame
{
    float4 Color : COLOR0;
};

WaterVertexToPixel WaterVertexShader(float4 inPos : POSITION, float2 inTex: TEXCOORD)
{    
    WaterVertexToPixel Output = (WaterVertexToPixel)0;

    float4x4 ViewProjection = mul(View, Projection);
    float4x4 WorldViewProjection = mul(World, ViewProjection);
    
    float4x4 ReflectionViewProjection = mul(ReflectionView, Projection);
    float4x4 WorldReflectionViewProjection = mul(World, ReflectionViewProjection);
    
    Output.Position = mul(inPos, WorldViewProjection);
    Output.ReflectionPos = mul(inPos, WorldReflectionViewProjection);
    Output.RefractionPos = mul(inPos, WorldViewProjection);
    
    float3 windDir = normalize(WindDirection);    
    float3 perpDir = cross(WindDirection, float3(0,1,0));
    float ydot = dot(inTex, WindDirection.xz);
    float xdot = dot(inTex, perpDir.xz);
    float2 moveVector = float2(xdot, ydot);  
    moveVector.y += Time * WindForce;
    Output.BumpPos = (moveVector) / WaveLength;
    
    Output.PointPosition = mul(inPos, World);

    return Output;
}

WaterPixelToFrame WaterPixelShader(WaterVertexToPixel inPixel)
{
    WaterPixelToFrame Output = (WaterPixelToFrame)0;        
    
    float2 TexCoords;
    TexCoords.x = (inPixel.ReflectionPos.x / inPixel.ReflectionPos.w) / 2.0f + 0.5f;
    TexCoords.y = -(inPixel.ReflectionPos.y / inPixel.ReflectionPos.w) / 2.0f + 0.5f; 
       
    float4 BumpColor = tex2D(BumpSampler, inPixel.BumpPos);
    float2 Perturbation = WaveHeight * (BumpColor.rg - 0.5f) * 2.0f;
    float2 NewTexCoords = TexCoords + Perturbation;
    float4 ReflectionColor = tex2D(ReflectionSampler, NewTexCoords);    
    
    
    float2 RefractionTexCoords;
    RefractionTexCoords.x = (inPixel.RefractionPos.x / inPixel.RefractionPos.w) / 2.0f + 0.5f;
    RefractionTexCoords.y = -(inPixel.RefractionPos.y / inPixel.RefractionPos.w) / 2.0f + 0.5f;
        
    float2 RefractionNewTexCoords = RefractionTexCoords + Perturbation;    
    float4 RefractionColor = tex2D(RefractionSampler, RefractionNewTexCoords);
     
    float3 Vector = normalize(CameraPosition - inPixel.PointPosition);
    float3 Normal = float3(0, 1, 0);
    float  FresnelFactor = dot(Vector, Normal);    
    float4 Result = lerp(ReflectionColor, RefractionColor, FresnelFactor);
     
    float4 WaterColor = float4(0.35f, 0.35f, 0.55f, 0.9f);
     
    Output.Color = lerp(Result, WaterColor, 0.15f);
    
    Normal = (BumpColor.rbg - 0.5f) * 2.0f;
    float3 ReflectionVector = -reflect(LightDirection, Normal);
    float  Specular = dot(normalize(ReflectionVector), normalize(Vector));
    Specular = pow(Specular, 256);        
    Output.Color.rgb += Specular;
     
    return Output;
}

technique Water
{
    pass Pass0
    {
        VertexShader = compile vs_2_0 WaterVertexShader();
        PixelShader = compile ps_2_0 WaterPixelShader();
    }
}

The Totem's Lair - Copyright (C) 2009
È vietata la riproduzione sia totale che parziale del sito.