Cloud

Mapray JS では、宇宙から見た雲を描けます。雲の量を表す画像を、地表から一定の高さの球面に貼って描きます。

使い方

CloudVisualizer を Viewer の生成時に渡し、viewer.init_promise を待ってから画像を読み込みます。初期化が終わる前に loadData などを呼ぶと、描画用のバッファが無いため例外になります。

const uiviewer = new maprayui.StandardUIViewer( "mapray-container", accessToken, {
    atmosphere: new mapray.Atmosphere(),
    cloud_visualizer: new mapray.CloudVisualizer(),
});
await uiviewer.viewer.init_promise;
await uiviewer.viewer.cloudVisualizer.loadData( from_url, to_url, 0.0 );

new mapray.CloudVisualizer( option ) のオプション:

オプション	内容
height	雲を描く高さ [m]
from_image / to_image	最初に読む画像
gradient_array / gradient_mode	雲の量から色への対応 (省略すると白で、雲の量が多いほど不透明になります)

雲の画像

画像は 1440 × 722 ピクセルで地球全体を覆います。画素はグレースケール 8 bit で、白 (255) に近いほど濃い雲になります。画像は URL の文字列、URLResource、または読み込み済みの画像 (HTMLImageElement など) で渡せます。

CloudVisualizer のメソッド

viewer.cloudVisualizer から触ります。雲は 2 枚の画像 (From と To) を持ち、フェード係数で混ぜて描けます。

メソッド	動作
loadData( from, to, fade )	From と To に画像を読み込みます。to を省略すると From と同じ画像、fade を省略するとフェード係数を変えません
loadFrom( image, fade ) / loadTo( image, fade )	From / To の一方だけを読み込みます
pushFront( image, fade )	新しい画像を From に、それまでの From を To にします
pushBack( image, fade )	新しい画像を To に、それまでの To を From にします
setFade( v )	フェード係数。0 で From の画像、1 で To の画像。間は 2 枚を混ぜます
setIntensity( v )	夜の側の雲の暗さの抑え方。1 以上で陰が付かず、0 に近いほど太陽の反対側の雲が暗くなります
setGradient( colors, mode )	雲の量から色への対応 (RGBA の配列と、LINEAR / STEP)
setVisibility( flag )	雲を描くか

setIntensity( 1.0 )	setIntensity( 0 ) (夜の側を暗く)

大気との関係

• 雲は大気の描画品質を読みません
• HDR パイプラインを使わない描画 (大気の品質 minimal など) では、雲もシェーダーの中で同じトーンマップ・露出・ガンマを掛けるので、明るさの基準は変わりません

その他のメソッドや詳細、各メソッドの範囲と既定値は リファレンスマニュアル を参照してください。

サンプルコード

CloudVisualizer で雲を描く例です。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="./v0.10.6/mapray.min.js"></script>
        <script src="./v0.10.6/maprayui.min.js"></script>
        <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
        <style>
            html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
        </style>
    </head>

    <body>
        <div id="mapray-container"></div>
    </body>
</html>

<script>
    async function main() {
        // Set up your Organization Token, which can be created in Mapray Cloud.
        const accessToken = "<YOUR_MAPRAY_ACCESS_TOKEN>";
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", accessToken, {
            dem_provider: new mapray.StandardDemProvider( {
                prefix:  "https://tiles.mapray.com/dem/",
                headers: { Authorization: "Bearer " + accessToken }
            } ),
            atmosphere: new mapray.Atmosphere(),
            cloud_visualizer: new mapray.CloudVisualizer(),
        });

        // Wait for the initialization process to complete.
        await uiviewer.viewer.init_promise;

        // Load after init_promise: the cloud's drawing buffer does not exist before that.
        // A fade of 0.5 blends the two images half and half.
        await uiviewer.viewer.cloudVisualizer.loadData(
            "https://resource.mapray.com/assets/data/cloud_0.png",
            "https://resource.mapray.com/assets/data/cloud_1.png",
            0.5
        );

        uiviewer.setCameraPosition({
            longitude: 135.0,
            latitude: 35.0,
            height: 25000000
        });

        uiviewer.setLookAtPosition({
            longitude: 135.0,
            latitude: 35.0,
            height: 0
        });
    }

    main();
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudのアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。