Atmosphere
Mapray JS は大気層の表現ができ、レイリー散乱などの光の散乱現象を再現することで、青空や夕焼け、日の出などの空の色合いを表現できます。
また、地表の色合いも大気層の影響による変化を表現することができます。
主なメソッド
| メソッド |
動作 |
| setStarMask |
昼間の恒星表示マスクを指定します |
| setSkyVisibility |
空の大気層の可視性フラグを指定します |
| setGroundVisibility |
地表の大気層の可視性フラグを指定します |
パラメータ調整用メソッド
Atmosphere クラスには以下のパラメータがあり、下記のメソッドで空と地表に分けて効果をコントロールできます。
| メソッド |
パラメータ詳細 |
基準値（Sky） |
基準値（Ground） |
推奨値 |
| Rayleigh |
レイリー散乱の係数。値が大きいほど空が鮮やかな青になります |
0.01 |
0.0025 |
0.0025 ~ 0.0150 |
| Mie |
ミー散乱の係数。光の散乱による霞のような効果を調整します |
0.001 |
0.001 |
0.0001 ~ 0.01 |
| ScaleDepth |
大気のスケール係数。大気の厚さや遠近感を調整します |
0.13 |
0.25 |
0.08 ~ 0.25 |
| SunRate |
大気の太陽の影響の係数。高い値で鮮やかな色合いになります |
17.5 |
16.0 |
10.0 ~ 25.0 |
| Exposure |
大気の露光係数。大気の明るさを調整し、大きくすると暗くなります |
-1.4 |
-2.0 |
-3.0 ~ -0.4 |
Note
atmosphere.setRayleigh( 0.015 ) や atmosphere.setGroundMie( 0.005 ) のように、
空の場合は setXXXXX (メソッド名)、地表の場合は setGroundXXXXX (メソッド名) のメソッドで値を指定します。
その他メソッドや詳細は リファレンスマニュアル を参照してください。
サンプルコード
Atmosphere を使い、夕焼けを表現する例を示します。
このサンプルコードでは、太陽を低い位置に設定し空や地表のパラメータを設定することで色合いを調整しています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51 | <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
<script src="https://resource.mapray.com/ui/v0.9.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 API Key, which can be created in Mapray Cloud.
const apikey = "<YOUR_MAPRAY_API_KEY>";
const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey, {
atmosphere: new mapray.Atmosphere(),
sun_visualizer: new mapray.SunVisualizer()
});
// Wait for the initialization process to complete.
await uiviewer.viewer.init_promise;
// Set the sun position.
const theta = - Math.PI / 180.0 * ( -47.5 );
uiviewer.viewer.sun.setSunDirection( [ Math.cos(theta), Math.sin(theta), 0 ] );
// Specify parameters to control the color tone.
uiviewer.viewer.atmosphere.setRayleigh( 0.015 );
uiviewer.viewer.atmosphere.setScaleDepth( 0.09 );
uiviewer.viewer.atmosphere.setGroundExposure( -1.5 )
uiviewer.setCameraPosition({
longitude: 139.09396,
latitude: 35.42153,
height: 5200
});
uiviewer.setLookAtPosition({
longitude: 138.733876,
latitude: 35.392069,
height: 2200
});
}
main();
</script>
|