How to render a scanline in VR space with Unity

Summary

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

 

Samples

The sample available in GitHub: https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/WorldScanlineShader_Sample   The sample VR space: http://gallery.styly.cc/r-ngtm/c42952b6-e559-11e8-b34d-4783bb2170d0    

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.

オブジェクトの色にx座標を適用

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.

0≦x≦0.1の部分を白くする

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.

Cubeオブジェクトの作成

Crate a Cube object.

 

作成したCubeオブジェクト

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. https://styly.cc/ja/manual/unity-asset-uploader/