Needle Engine Documentation

概要

こんにちは、Kryštofです。私はNeedleについてのリサーチプロジェクトを実施しました。当社では、Needleがワークフローでどのように役立つかを判断したいと考えていました。当社には高級車を再販する地元のお客様がいます。すでにUnityを使用してモバイルアプリとVR体験を提供しました。Engineには約30台のユニークな車が準備されています。視覚的に魅力的なデジタルクローンとより多くの構成オプションを備えたクライアントのウェブサイトを拡張する計画があります。NeedleはUnityとウェブのビジュアル間で完璧な1:1変換を実現できます。これは当社のワークフローにとって非常に大きな利点となります。これがリサーチのきっかけとなったのです。

コンテキスト

私はjavascript、typescript、またはthree.jsの経験があまりありませんので、私の視点はウェブ体験を作成する最も簡単な方法を試している半経験的なUnity開発者としてのものです。Unity WebGLを提案される方もいるかもしれませんが、残念ながらそれは機能せず、モバイルブラウザでは柔軟性がありません。Needleは💚です。

ライティング

当社のライティングモデルはUnityのリフレクションプローブに基づいています。ディレクショナルライトやポイントライトは必要なく、アンビエントライティングのみです。

このスカイボックスを使用しています。

スカイボックス

塗装は次のようになります。

さらに少しディテールを追加するために、わずかな強度（0.04）のディレクショナルライトを2つ追加して、スペキュラーハイライトを作成しました。以前は次のようになっていました。

スペキュラーオフ

しかし、ディレクショナルライトを追加することで、より良いダイナミクスが加わりました。強度を高くすると効果を深めることができます。

スペキュラーオン

背景

シーンは現在次のようになっています。

背景なし

黒い背景はあまり美しくありません。そこで、視覚的なスカイボックスとライティングのスカイボックスを区別するために、マップ全体を包み込む逆球体を追加しました。

背景あり

グラデーションに関しては、わずかなグレーからホワイトの色へ変化します。

この効果は、適切なUVマッピングと、グラデーションを定義する単一ピクセル高のテクスチャだけで簡単に作成できます。

シェーダーグラフでunlitシェーダーを作成しました。

環境シェーダー

カラーバンディングの問題に気づいたので、ディザリングを実装しようとしました。率直に言って、アーティファクトの改善には役立ちませんでしたが、その問題に対する簡単な解決策があるはずです。したがって、シェーダーの上部はオブジェクト空間のY軸に基づいてグラデーションをサンプリングします。そして、下部はカラーバンディングを打ち消そうとします。

シェーダーを使用することで、グラデーションの使用とイテレーションがより簡単になります。NeedleのShadergraph markdownアセットを使用すると、さらに簡単になります！🌵

グラデーション

車の擬似的な動き

現在のシーンは何も動かないため静的です。動きの擬似的な感覚を追加することで、これを打ち消すことができます。まず、ホイールに動きを追加することから始めましょう。

Rotatorと呼ばれるシンプルなコンポーネントで、軸と速度を定義します。

Rotator

import { Behaviour, serializable } from "@needle-tools/engine";

export enum RotationAxis {
    X, Y, Z
}

export class Rotator extends Behaviour {
    //@type RotationAxis
    @serializable()
    axis : RotationAxis = RotationAxis.X;

    @serializable()
    speed : number = 1;

    update() {
        const angle = this.speed * this.context.time.deltaTime;
        switch(this.axis) {
            case RotationAxis.X:
                this.gameObject.rotateX(angle);
                break;
            case RotationAxis.Y:
                this.gameObject.rotateY(angle);
                break;
            case RotationAxis.Z:
                this.gameObject.rotateZ(angle);
                break;
        }
    }
}