How to render a scanline in VR space with Unity


I explain how to render ‘scanline’, which looks like laser running on a surface, with Unity’s shader as shown below.  


Scanline in VR space


View the sample asset by WebEditor

View the sample asset by WebEditorLaunch the WebEditor

※If you have your STYLY account, you can view the sample asset created in this article by WebEditor. If you don’t, create a new STYLY account and then press the button above.

You can create a new STYLY account >> Click here



The sample available in GitHub:   The sample VR space:    

How to make scanline in VR space

I explain how to create a scanline in VR space.  

Use the x coordinate as colour

Unity’s shader takes the coordinate, where the pixel of the object on the screen is located, as a parameter. For example, if you used the x coordinate as the colour of the object,  it would look like the shown below.


Use the x coordinate as the colour of an object

The part where the X coordinate is smaller than 0.0 is coloured in black, where it is larger than 1.0 is coloured in white, and it’s coloured in grey in the case the X coordinate takes the value between 0.0 and 1.0.   The code for Unity’s ShaderLab is shown below.


Create scanline

When the condition, 0.0 ≦ the X coordinate ≦ 0.1, is satisfied, colour the object white. Otherwise, colour it black.


The part with the condition, 0≦x≦0.1, is coloured white.

  The code for Unity’s ShaderLab is shown below.


Add the trace effect

Add a trace to the scanline.


Add a trace to the scanline.

  The code for Unity’s ShaderLab is shown below.


Move Scanline

Create a series of scanlines and animate them.


Animate scanlines

  The code for Unity’s ShaderLab is shown below.


Colour the scanlines ~ completion

Finally, colour the scanlines. Now we finished rendering the scanlines in VR space.


Colour the scanlines


Create Scanline with Unity

Create a shader file

Select ‘Create > Shader > Unlit Shader’ to create a shader file.


Create a shader file

Name the shader file ‘WorldScanline’.


The shader file created.

Edit the shader file

Open the ‘WorldScanline’ shader, edit it as shown below.


Create a material

Right-click the shader file and select ‘Create > Material’ to create a material.


Create a material



The material created


Assign the material to a Cube

In the Hierarchy window, select ‘Create > 3D Object  > Cube’ to create a Cube object.


Crate a Cube object.



The Cube object created.

  Drag the material created earlier into the Cube to assign the material to it.


Assign the material to the Cube object.

  By playing the game with the scanline material applied, you can see the animated scanline on the Cube.


The result – after applying the material


Create a ‘Sci-Fi’ board

I explain how to create a board full of Sci-Fi atmosphere.


Render a scanline on the cubes arranged like a board.

    Firstly, arrange a lot of Cubes to form the board-like shape as shown below.


Arrange Cubes

  Set the parameters of the material as shown below and assign it to each cube.


The setting for the material.

  Once the material has been applied, the appearance would be like the shown below.


The result – after applying the scanline shader



How to upload an asset from Unity to STYLY

Please refer to the article below to learn how to upload an asset from Unity to STYLY.