Pixelize me again girl! But like, with more lines please?

After a weekend's worth of headache, and research for more outline shaders, I found two examples that stood out the most:

Ex.1 The Outlined Cute Cube

This first one inspired by this jsfiddle example seemed really promising at first. It took only a few hours to figure out how to merge into a base shader. But if you take a look at the fragment shader,

const GeoOutlineShader = {

  uniforms: {
    'size' : {value: null}, // Must be vector3
    'thickness' : {value: 0.01},
    'smoothness' : {value: 0.1},
  },

  vertexShader: /* glsl */`

    varying vec3 vPos;

    void main()	{
      vPos = position;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }`,

  fragmentShader: /* glsl */`

    varying vec3 vPos;

    uniform vec3 size;
    uniform float thickness;
    uniform float smoothness;
  
    void main() {
        
      float a = smoothstep(thickness, thickness + smoothness, length(abs(vPos.xy) - size.xy));
      a *= smoothstep(thickness, thickness + smoothness, length(abs(vPos.yz) - size.yz));
      a *= smoothstep(thickness, thickness + smoothness, length(abs(vPos.xz) - size.xz));
      
      vec3 c = mix(vec3(1), vec3(0), a);
      
      gl_FragColor = vec4(c, 1.0);
    }`

};

export { GeoOutlineShader };
        

it only works on geometry with only 3 dimensions, namely a cube. That wouldn't work on more complex geometry. And I'm not too far in my shader exploration to know how to really rewrite it yet.

Ex.2 Outlines of Geometry

This is where things got complicated for me. There is this really cool shader presented here and a forum that lead to it, that depicts what seems like an effortless execution of outlining a complex scene that creates an outline effect by generating geometry and shading it using conditional maths.

I thought, alright, great! I'll just plug and play! Copy pasta, bing bam blahp~

nahhhhh

Sorely mistaken, there were some compatibility errors with the newest version of three.js, so, with a tail tucked between my legs, I squinted through the code, looking at other examples on how to fix shader code, and slowly but surely pieced it together. I simplified a lot of things so it made sense to me -- definitely trash compacting everything into some poorly written code but I promise to actually comment and complile these files as I go along.... (am I making false promises??)

But anyway HERE IT IS!

Not much at first sight when compared to the outline effect packaged with three.js, but when they are combined...

Ex.3 Outlines of Geometry combined with the Outline Effect

We get something all the more interesting:

There are four shaders at work here,

• one for the base model
• geometry generated and shaded following the edges
• geometry generated and shaded following the tangent angles of each polygon
• the outline effect

Ex.4 A Cone Problem

The reason we would want to combine these shaders is to solve the cone problem! I say this as if it's a thing -- it's not -- but rather a more general problem of outlining an object efficiently.

The cone problem for me with the outline effect is that if you turn the opacity to zero for the geoOutline, the effectOutline fails to shade the cone edges properly and vice versa.

To solve for all of the edge cases, pun intended, I was determined to combine these together and maybe... eventually... port and simplify these into one.

Ideally, I'd know how to combine all of them into one elegantly programmed shader that is easier to plug-n-play, but alas, I'm not there yet!

If you're interested in the source for this, I'd be happy to send over some files, or set up a github, but I haven't even done that for myself yet but right now I'm learning a ton and am excited to do more.

In the meantime, the source from the original conditional lines shader can be found on github: here

Thanks for stopping by friend!

With love,

April Jane