UnityのWebGLで点群を表示してみる

Unity 2018.3.2f1のWebGL出力で点群を表示できたのでやったことをメモしておく。
(はやくAmazon Sumerianで点群表示をサポートしてほしい)

Unity Editorで点群を表示してみる

表示手順

UnityでPoint Cloudを表示する方法 – NegativeMind – Medium
を参考にして以下のような手順を実施した。

• 以下のスクリプトを作成する。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[RequireComponent(typeof(MeshFilter), typeof(MeshRenderer))]
public class PointCloud : MonoBehaviour
{

    private Mesh mesh;
    int numPoints = 600000;

    // Use this for initialization
    void Start()
    {
        mesh = new Mesh();

        GetComponent<MeshFilter>().mesh = mesh;
        CreateMesh();
    }

    void CreateMesh()
    {
        Vector3[] points = new Vector3[numPoints];
        int[] indecies = new int[numPoints];
        Color[] colors = new Color[numPoints];
        for (int i = 0; i < points.Length; ++i)
        {
            points[i] = new Vector3(Random.Range(-10, 10), Random.Range(-10, 10), Random.Range(-10, 10));
            indecies[i] = i;
            colors[i] = new Color(Random.Range(0.0f, 1.0f), Random.Range(0.0f, 1.0f), Random.Range(0.0f, 1.0f), 1.0f);
        }

        mesh.indexFormat = UnityEngine.Rendering.IndexFormat.UInt32;
        mesh.vertices = points;
        mesh.colors = colors;
        mesh.SetIndices(indecies, MeshTopology.Points, 0);

    }
}

• 以下のシェーダーを作成する

Shader "Custom/VertexColor"
{
    SubShader {
    Pass {
        LOD 200
         
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
 
        struct VertexInput {
            float4 v : POSITION;
            float4 color: COLOR;
        };
         
        struct VertexOutput {
            float4 pos : SV_POSITION;
            float4 col : COLOR;
        };
         
        VertexOutput vert(VertexInput v) {
         
            VertexOutput o;
            o.pos = UnityObjectToClipPos(v.v);
            o.col = v.color;
             
            return o;
        }
         
        float4 frag(VertexOutput o) : COLOR {
            return o.col;
        }
 
        ENDCG
        } 
    }
}

• マテリアルを作成して作成したシェーダーを指定する。
• [CreateEmpty]でGameObjectを作成する。
• 作成したGameObjectにMesh Rendererコンポーネント、Mesh Filterコンポーネント、作成したスクリプト、作成したマテリアルを割り当てる。
• 実行する。
  

スクリプトについて

以下のように指定しているのでUInt32のMAXまで点群が設定可能。それを超える場合はゲームオブジェクト(メッシュ)の分割が必要。

mesh.indexFormat = UnityEngine.Rendering.IndexFormat.UInt32;

WebGLで点群を表示してみる

上記のままでWebGLビルドしても点群が表示されない。

多分以下の問題。
MeshTopology.Point Geometry not displaying in WebGL Builds - Unity Forum
以下のようにすることでWebGLで表示できた。

• リンク先にあった以下のシェーダーを作成する。

Shader "Custom/PointCloud_GL"
{
	Properties
	{
		_PointSize("PointSize", Float) = 5
		_HeightTex("Height Texture", 2D) = "white" {}
	}

	SubShader
	{
		Pass
		{
			LOD 200

			GLSLPROGRAM
			#pragma multi_compile __ HEIGHTMAP_ON

			#ifdef VERTEX

			out vec4 Color;
			uniform sampler2D _HeightTex;
			uniform float _PointSize;

			float ToneMap(float rawValue)
			{
				float contrast = 3.8;
				float exposure = 0.001;
				float a = exposure * pow(rawValue, contrast);
				return a / (1.0f + a);
			}

            void main()
            {
                gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
				gl_PointSize = _PointSize * (1.0 / gl_Position.w);

				#ifdef HEIGHTMAP_ON
				float index = ToneMap(gl_MultiTexCoord0.x);
				Color = texture2D(_HeightTex, vec2(index, 0));
				#else
				Color = gl_Color;
				#endif
            }
           
            #endif
           
            #ifdef FRAGMENT
                       
            in vec4 Color;
           
            void main()
            {
				vec2 coord = gl_PointCoord - vec2(0.5);
				if (length(coord) > 0.5)
				{
					discard;
				}

				gl_FragColor = Color;
            }
           
            #endif

			ENDGLSL
		}
	}
}

• 上記シェーダーを[Editor] => [Project Settings]の[Always Included Shaders]に登録する。
• スクリプトのStart()に以下を追加する。

#if !UNITY_EDITOR && UNITY_WEBGL
        gameObject.GetComponent<MeshRenderer>().material.shader = Shader.Find("Custom/PointCloud_GL");
#endif

• ビルドする。