0
\$\begingroup\$

So I'm having trouble going about creating an 80s neon color grid wire-frame, like the examples.

How would you go about making the floor into an 80s styled grid floor? I'm just looking for square grids.

Here is what I'm currently using

Shader "Custom/Grid" { 
  Properties {
    _GridThickness ("Grid Thickness", Float) = 0.01
    _GridSpacingX ("Grid Spacing X", Float) = 1.0
    _GridSpacingY ("Grid Spacing Y", Float) = 1.0
    _GridOffsetX ("Grid Offset X", Float) = 0
    _GridOffsetY ("Grid Offset Y", Float) = 0
    _GridColour ("Grid Colour", Color) = (0.5, 1.0, 1.0, 1.0)
    _BaseColour ("Base Colour", Color) = (0.0, 0.0, 0.0, 0.0)
  } 

  SubShader {
    Tags { "Queue" = "Transparent" } 

    Pass {
      ZWrite Off
      Blend SrcAlpha OneMinusSrcAlpha 

      CGPROGRAM 

      // Define the vertex and fragment shader functions
      #pragma vertex vert
      #pragma fragment frag 

      // Access Shaderlab properties
      uniform float _GridThickness;
      uniform float _GridSpacingX;
      uniform float _GridSpacingY;
      uniform float _GridOffsetX;
      uniform float _GridOffsetY;
      uniform float4 _GridColour;
      uniform float4 _BaseColour; 

      // Input into the vertex shader
      struct vertexInput {
          float4 vertex : POSITION;
      };

      // Output from vertex shader into fragment shader
      struct vertexOutput {
        float4 pos : SV_POSITION;
        float4 worldPos : TEXCOORD0;
      };

      // VERTEX SHADER
      vertexOutput vert(vertexInput input) {
        vertexOutput output;
        output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
        // Calculate the world position coordinates to pass to the fragment shader
        output.worldPos = mul(unity_ObjectToWorld, input.vertex);
        return output;
      }

      // FRAGMENT SHADER
      float4 frag(vertexOutput input) : COLOR {
         if (
          frac((input.worldPos.x + _GridOffsetX)/_GridSpacingX) 
            < (_GridThickness / _GridSpacingX) 
             ||
          frac((input.worldPos.z + _GridOffsetY)/_GridSpacingY) 
            < (_GridThickness / _GridSpacingY)) {
          return _GridColour;
        }
        else {
          return _BaseColour;
        }
      }
      ENDCG
    }
  }
}
\$\endgroup\$
1
  • \$\begingroup\$ Here is the shader i'm using right now \$\endgroup\$
    – Joey Peir
    Aug 18 '16 at 13:30
2
\$\begingroup\$

Use a texture like this one:

enter image description here

  • Create a grid in your favorite paint program.
  • Apply a blur filter.
  • Cut the texture to contain just 1 tile.

In Unity:

  • Create a material
  • Assign that texture to the material
  • Set the material properties to repeat the tile how many times you want
  • Apply the material to an object such as a plane.
\$\endgroup\$
3
  • \$\begingroup\$ Trying this out for myself (including extra tweaking - you can not just assign the material property to repeat, you have to set the texture sprite to repeat aswell), the result is quite.. dull. This question appears to specifically ask for shaders, but more to the point, to use "neon colours". This effect is not produced by the steps listed above. \$\endgroup\$
    – Gnemlock
    Aug 18 '16 at 1:27
  • \$\begingroup\$ Thanks that is exactly what I did, but now I found out that you can write a c# shader. So I'm going to write my own and if I do it be the end of the day. I'll leave the source code here for anyone who has the same problem. \$\endgroup\$
    – Joey Peir
    Aug 18 '16 at 12:35
  • \$\begingroup\$ Shaders have a huge advantage of being faster, and decently designed shaders only need 1 pass without a texture memory footprint (and overhead of doing that). Most people just need solid lines of a color (with transparency) and a simple lerp/smoothing on edges for a good look. \$\endgroup\$ Sep 17 '18 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.