Giter VIP home page Giter VIP logo

unityoutlineshader's Introduction

Outline Shader for Unity

Unity 2018.3 project source for completed Outline Shader Tutorial from the site roystan.net.

alt text

Uses the depth and normals buffers to generate outlines of variable thickness and color.

unityoutlineshader's People

Contributors

ironwarrior avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

unityoutlineshader's Issues

Silhouette-only Outline doesn't work at Runtime/Play Mode

Hi there, thanks for building and sharing this!

I was able to get the effect I want (silhouette outline) by increasing the Depth Threshold to 5 as shown in this image;

image

However, once I play, the interior lines show up.

image

I would love to have the silhouette effect, but not sure how to get it to work properly.

Does not seem to work on iOS at all

The outline is visible in play mode in Unity, but when I build the project for iOS, it doesn't show up in the built version. Is there any way to fix this?

Thanks.

Depth comparisons not working

I tried your tutorial, but the depth based part wasn't working. It was neccessary to set the camera depthTextureMode to DepthTextureMode.Depth before I got good results.

NB: You can probably use DepthTextureMode.DepthNormals to avoid needing a secondary camera.

Draw outlines only with depth buffer

image
@IronWarrior Thank your tutorial first! But I found we can draw outlines only with depth buffer.

float4 Frag(VaryingsDefault i) : SV_Target
{

	float halfScaleFloor = floor(_Scale * .5);
	float halfScaleCeil = ceil(_Scale * .5);
	float2 bottomLeftUV = i.texcoord - float2(_MainTex_TexelSize.x, _MainTex_TexelSize.y) * halfScaleFloor;
	float2 topRightUV = i.texcoord + float2(_MainTex_TexelSize.x , _MainTex_TexelSize.y) * halfScaleCeil;
	float2 bottomRightUV = i.texcoord + float2(_MainTex_TexelSize.x * halfScaleCeil, - _MainTex_TexelSize.y * halfScaleFloor);
	float2 topLeftUV = i.texcoord + float2(-_MainTex_TexelSize.x * halfScaleFloor, _MainTex_TexelSize.y * halfScaleCeil);

	float depth0 = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, bottomLeftUV).r;
	float depth1 = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, topRightUV).r;
	float depth2 = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, bottomRightUV).r;
	float depth3 = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, sampler_CameraDepthTexture, topLeftUV).r;

	float depthFiniteDifference0 = depth1 - depth0;
	float depthFiniteDifference1 = depth3 - depth2;
	float edgeDepth = sqrt(pow(depthFiniteDifference0, 2) + pow(depthFiniteDifference1, 2)) * 100;
	// edgeDepth = step( _DepthThreshold, edgeDepth);  // Actullay, it will eliminate the material color

	return edgeDepth;
}

And I'm using unity 2019.3.3f1.

Orthographic camera has some artifacts

Hello,
First of all you did a great job, brilliant solution!
I found some artifacts with orthographic camera. See picture below:
image

And the same camera transform but Perspective projection:
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.