Shader, Shader, 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



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.


・職業はUnityエンジニア(2018年現在) ・面白そうと思ったものにはすぐに手を出すが、飽きることが多い器用貧乏 ・カフェで作業するのが好き

Share this article

Facebook Twitter Google+ Pinterest hatebu


STYLY is a cloud-based service for creating high quality,beautiful VR spaces that doesn’t require any coding. By using STYLY, creators can express their imaginations indefinitely and build a variety of virtual spaces. Through these spaces, we can share experiences that are unachievable in the real world.