Outline v2


The author share his shaders twitter.com/_chrisro/status/759558775657422849

so u can port it to Urho


I managed to get this to work with DirectX


#include "Uniforms.hlsl"
#include "Samplers.hlsl"
#include "Transform.hlsl"
#include "ScreenPos.hlsl"
#include "PostProcess.hlsl"

uniform float2 vScreenPos;

uniform float4 cOutlineColor;
uniform float2 cOutlineBlurredMaskHInvSize;

void VS(float4 iPos : POSITION,
    out float2 oTexCoord : TEXCOORD0,
    out float2 oScreenPos : TEXCOORD1,
    out float4 oPos : OUTPOSITION)
    float4x3 modelMatrix = iModelMatrix;
    float3 worldPos = GetWorldPos(modelMatrix);
    oPos = GetClipPos(worldPos);
    oTexCoord = GetQuadTexCoord(oPos);
    oScreenPos = GetScreenPosPreDiv(oPos);

void PS(
    float3 iTexCoord : TEXCOORD0,
    float2 iScreenPos : TEXCOORD1,
    out float4 oColor : OUTCOLOR0)
    #ifdef MASK
    oColor = float4(cOutlineColor.rgb, 1);

    #ifdef BLURH
        float4 rgba = Sample2D(DiffMap, iScreenPos + float2(0.0, 0.0) * cOutlineBlurredMaskHInvSize);
        oColor = rgba * 0.2;

    #ifdef BLURV
        float4 rgba = Sample2D(DiffMap, iScreenPos + float2(0.0, 0.0) * cOutlineBlurredMaskHInvSize);
        oColor = rgba * 0.2;

    #ifdef OUTPUT
        float4 blurredMask = Sample2D(DiffMap, iScreenPos);
        float4 mask = Sample2D(NormalMap, iScreenPos);
        float4 viewport = Sample2D(SpecMap, iScreenPos);
        blurredMask = clamp(blurredMask - mask.a, 0.0, 1.0);
        blurredMask *= 200.0;
        oColor = viewport * (1.0 - blurredMask.a) + blurredMask;


Althought I did have to change few things to get it to work correctly. Also my experience with HLSL shaders is really small, but I’m happy with the results.


Can you provide a simple working sample with this shader in place?


See my project here: https://github.com/ArnisLielturks/Urho3D-Project-Template
There are few commits which shows how its done


January 9th commits to be exact


Ok, got three files, the material, the technique and the hlsl shader.

In the feature sample billboards, made the tiles out of stoneoutline.xml rather than stone.xml.

And can’t see a difference. Log output looks fine, but initially I hadn’t gotten the technique just the shader and material and found that via the log.

What case is the appropriate use of this material to highlight the effect your work shows?

DEBUG: Loading resource Materials/StoneOutline.xml
DEBUG: Loading resource Techniques/DiffOutline.xml


What about render path file? https://github.com/ArnisLielturks/Urho3D-Project-Template/blob/master/bin/CoreData/RenderPaths/Forward.xml
Also I’m not the author of this so cant take credit for it. Im just the guy who adopted HLSL shader, nothing else


I’m not sure the effect would be visible on a billboard. Could you try the material on a different model?


Yes, was missing most of the contents of that file, though the file itself was in my RenderPaths folder.

I’m not formally running it on a billboard model, but on a box model. Here’s most of the pertinent code, with a change to run forward.xml.

var rp = ((StereoApplication)Application).Renderer.DefaultRenderPath.Clone();
            ((StereoApplication)Application).Renderer.DefaultRenderPath = rp;

            //working on why no shadows ... but so far have never seen an Urho3D shadow on any hololens app
            Application.Renderer.DrawShadows = true;
            var YPos = -50;
            for (int y = -5; y <= 5; ++y)
                for (int x = -5; x <= 5; ++x)
                    var floorNode = billboardNode.CreateChild("FloorTile");
                    floorNode.Position = new Vector3(x * 20.5f, YPos, y * 20.5f);
                    floorNode.Scale = new Vector3(20.0f, 1.0f, 20.0f);
                    var floorObject = floorNode.CreateComponent<Urho.Shapes.Box>();
                    floorObject.Material = cache.GetMaterial("Materials/StoneOutline.xml");
                    //floorObject.Material = cache.GetMaterial("Materials/Stone.xml");

After adding in the renderpath to forward.xml, and modifying the contents of that file. Perhaps see some additional blurring, but honestly, not sure what to look for. Somehow I thought it would be readily visible.


Also converted the animating scene feature sample, and again, see no difference. No errors or warnings, all looks just like it did before the conversion to use StoneOutline.xml. Perhaps a bit of shimmer in the light as they rotate? Meaning, when I decrease the light brightness, they seem to give off a sparkle, like rotating a diamond in the light, as if that face of the cube has been polished.

What is the actual effect?


It adds an outline.

Be sure to have something like <parameter name="OutlineWidth" value="0.05" /> and <parameter name="OutlineColor" value="0 0 0 1" /> in your material file.


Was missing the OutlineWidth parameter, but still no outline seen. I’m using SharpReality and viewing on a hololens.

Here’s the material file:

  <technique name="Techniques/DiffOutline.xml" />
  <parameter name="MatDiffColor" value="1 1 1 1" />
  <parameter name="MatSpecColor" value="1 1 1 300" />
  <parameter name="OutlineBlurredMaskHInvSize" value="1 1" />
  <parameter name="OutlineWidth" value="0.15" />
  <parameter name="OutlineColor" value=".5 .5 .5" />
  <texture unit="diffuse" name="Textures/StoneDiffuse.dds" />
  <texture unit="normal" name="Textures/StoneNormal.dds" />

Have been modifying values trying to see some change. Black doesn’t show up on a hololens unless in front of a colored background like you show.


Could you post a screenshot?
Your OutlineColor is missing a fourth number (alpha value), btw.


It looks identical to what it looks like without StoneOutline.xml, so using Stone.xml produces an identical output. Using the animatedscene feature sample, in c#. Just converted to run on hololens are the only changes to it. And changes for stoneoutline, the material, the technique, the hlsl shader, and changes to forward.xml, and the change to render path to use forward.xml.

The urho log runs clean. Added the missing alpha param.

  1. Could you try the material on a different model?
  2. Could you post a screenshot?


With cylinder model:

That shimmer sort of shows up on some of the cylinders. They look really nice on hololens.

Finally, here is just the plain Stone.xml picture with cylinder model, there’s a bit of sparkle, but it’s more pronounced with the StoneOutline.xml, but still very subtle and only visible at times for just a blink of an eye, just like a diamond rotating in the light:


I believe that’s the specular reflection.
Did you add the fourth number to your OutlineColor?


Yes, and to get to 20 chars, I’ll say it again, yes.

Edit: here’s the material file:

  <technique name="Techniques/DiffOutline.xml" />
  <parameter name="MatDiffColor" value="1 1 1 1" />
  <parameter name="MatSpecColor" value="1 1 1 300" />
  <parameter name="OutlineBlurredMaskHInvSize" value="1 1" />
  <parameter name="OutlineWidth" value="0.2" />
  <parameter name="OutlineColor" value=".5 .5 .5 1" />
  <texture unit="diffuse" name="Textures/StoneDiffuse.dds" />
  <texture unit="normal" name="Textures/StoneNormal.dds" />


Do you have a repository somewhere?
Also, could you try removing - or commenting out - this line:
<parameter name="OutlineBlurredMaskHInvSize" value="1 1" />?


But why would it be more pronounced with StoneOutline? Subtle but a bit more noticed.

The repository is really the C# featured samples. that run on a number of different platforms. I’ve copied and modified, but the base is the same.

Removed that parameter … no change.