360 Panorama Reflection Shader

An article by mgear

5 Comments

Tried to convert this webgl shader to unity.. but its not working yet.

Webplayer:
http://unitycoder.com/upload/demos/360ReflectionShader_unity/ (v2.0)

Download Source: (webplayer scene)
360panoramaFakeReflection.unityPackage

Source v1.0 (broken):

– Can anyone spot what could be the problem..or are the textures just wrong? I have no idea about those matrix stuffs either, just picked something that sounded similar in unity 🙂
– Update: was missing “IN.” at pitch line.. also updated some calculations to unity built-in variables.. now it almost works..
– Added webplayer with torus and new screenshot below.

// original source: http://www.clicktorelease.com/code/streetViewReflectionMapping
Shader "Custom/360reflection2" {
Properties {
_texture ("texture (RGB)", 2D) = "white" {}
_scaledTexture ("scaledTexture (RGB)", 2D) = "white" {}
}
SubShader {
Tags { "RenderType"="Opaque" }
LOD 200

CGPROGRAM
#pragma target 3.0
#pragma surface surf Lambert vertex:vert

float3 vReflect;
float3 vRefract;

struct Input {
float2 uv_MainTex;
float4 pos : SV_POSITION;
float3 vReflect;
float3 vRefract;
};

void vert (inout appdata_full v, out Input o)
{
float4 mPosition = mul(_Object2World,float4(v.vertex.xyz, 1.0 ));
float3 nWorld = normalize( mul(  float3x3(_Object2World[0].xyz, _Object2World[1].xyz, _Object2World[2].xyz) ,v.normal ));
o.vReflect = normalize( reflect( normalize( mPosition.xyz - _WorldSpaceCameraPos ), nWorld ) );
o.vRefract = normalize( refract( normalize( mPosition.xyz - _WorldSpaceCameraPos ), nWorld, 0.9 ) );
o.pos = mul(UNITY_MATRIX_P * UNITY_MATRIX_MV,float4(v.vertex.xyz, 1.0));
}

uniform float rAmount;
uniform sampler2D _texture;
uniform sampler2D _scaledTexture;

void surf (Input IN, inout SurfaceOutput o)
{
float PI = 3.14159265358979323846264;
float yaw = .5 - atan2(IN.vReflect.z, - IN.vReflect.x ) / ( 2.0 * PI );
float pitch = .5 - asin( vReflect.y ) / PI;
float3 color = tex2D(_scaledTexture, float2( yaw, pitch ) ).rgb * ( 1.0 - rAmount );
yaw = .5 - atan2(IN.vRefract.z, - vRefract.x ) / ( 2.0 * PI );
pitch = .5 - asin(IN.vRefract.y ) / PI;
color += tex2D(_texture, float2( yaw, pitch ) ).rgb * rAmount;
half4 c =  float4( color, 1.0 );
o.Albedo = c.rgb;
o.Alpha = c.a;
}

ENDCG
}
FallBack "Diffuse"
}

—
Image #2: Almost.. reflection image is upside down. Added webplayer for this version.

Tags: 360, panorama, reflection, shader, sphere, webgl

About the Author:

.fi

5 Comments + Add Comment

antstewart 19/10/2012 at 22:47

it looks pretty good already, like awesome, sell it or give it in the asset store MAN!

Reply
antstewart 19/10/2012 at 22:49

and the unify wiki is very cool also! good way to get clicks back to your website!

Reply
Paradox 09/08/2013 at 02:45

Hello! Thank you very much for shader! I found small mistake.. =)
In line 42 must be “IN.vReflect.y” instead of “vReflect.y”:
float pitch = .5 – asin( IN.vReflect.y ) / PI;

otherwise pitch will be always .5

Reply
- mgear 10/08/2013 at 02:43
  
  ouch!..Thanks 🙂
  
  Reply
Ilie 26/10/2013 at 00:56

fixed:
void surf (Input IN, inout SurfaceOutput o)
{
float PI = 3.14159265358979323846264;
float yaw = .5 – atan2(IN.vReflect.z, – IN.vReflect.x ) / ( 2.0 * PI );
float pitch = .5 – asin( -IN.vReflect.y ) / PI;
float3 color = tex2D(_scaledTexture, float2( yaw, pitch ) ).rgb * ( 1.0 – rAmount );
yaw = .5 – atan2(IN.vRefract.z, – IN.vRefract.x ) / ( 2.0 * PI );
pitch = .5 – asin(IN.vRefract.y ) / PI;
color += tex2D(_texture, float2( yaw, pitch ) ).rgb * rAmount;
half4 c = float4( color, 1.0 );
o.Albedo = c.rgb;
o.Alpha = c.a;
}

Reply