Sun
Mapray JS では太陽の位置・明るさ・大きさを指定して描けます。大気 (Atmosphere) と組み合わせると、空・地表・水面が同じ太陽で照らされ、地平線近くでは太陽が赤く減光します。
関連クラス
| クラス |
取得先 |
内容 |
Sun |
viewer.sun |
太陽の方向・照度・視直径。空・地表・水面・太陽の円盤がすべてこの値を読みます |
SunVisualizer |
viewer.sunVisualizer |
太陽の円盤と円光 (まわりの暈) の表示 |
SunVisualizer は Viewer の生成時に渡します。
const viewer = new mapray.Viewer( "mapray-container", {
// ...
atmosphere: new mapray.Atmosphere(),
sun_visualizer: new mapray.SunVisualizer(),
} );
Sun のメソッド
| メソッド |
単位 |
動作 |
setSunDirection( v ) |
GOCS の単位ベクトル |
太陽の方向。正規化はしないので、単位ベクトルを渡します。空・地表・月の満ち欠け・夜景レイヤーがすべて読みます |
setIlluminance( v ) |
基準の太陽 = 1.0 |
太陽の照度 (明るさ)。空・空気遠近・地表・水面・太陽の円盤が一様に明るさを変えます |
setIlluminanceLux( v ) |
lx |
照度を lx で指定します。基準の太陽の照度 (mapray.Sun.SOLAR_ILLUMINANCE_LUX) で割った値を setIlluminance に渡すのと同じです |
setAngularDiameterDegree( v ) |
度 |
太陽の視直径。照度は変わらないので、大きくすると円盤は大きく暗くなり、地表の明るさは変わりません |
getSunDirection( dst ) で現在の方向を取得できます- 太陽の方向の GOCS については 座標系 を参照してください
- 描画に使う照度には下限があります。
setIlluminance( 0 ) にしても、空・地表・太陽の円盤は下限の照度で描かれ、真っ暗にはなりません
| 標準の視直径 |
視直径 2° |
|
 |
SunVisualizer のメソッド
| メソッド |
動作 |
setVisibility( flag ) |
太陽の円盤を描くか。非表示にすると円光も消えます (値は保持されます) |
setGlowIntensity( v ) |
円光 (太陽のまわりの暈) の強さ。2〜3 が快晴らしさを保てる上限の目安です |
- 円光は大気の空のシェーダーの中で描きます。大気が無いとき、大気を無効にしたときは描きません
Atmosphere.applyPreset() も円光の強さ (aureole_intensity) を書き込みます。後から書いた方が残りますnew mapray.SunVisualizer( divide ) の divide は円盤の分割数です (小さすぎる値は例外になります)
大気との関係
- 大気が有効なときは、太陽の円盤も大気の透過率で減光し、地平線近くで赤くなります。ブルーム (Render Effects) が効く品質 (
medium / high) では、円盤のまわりに光がにじみます
- 大気が無いとき、または大気を無効にしたとき (
setEnvironmentEnabled( false )) は、円盤を表示色の光輪で描きます。このとき視直径を変えると円盤は大きくなりますが暗くはならず、照度の下限もありません
- 大気の描画品質
minimal では、地形・建物・点群は固定のライティングになるので、太陽の照度を変えても地表の明るさは変わりません。空・太陽の円盤・水面には効きます
| 大気あり |
大気なし (setEnvironmentEnabled( false )) |
|
 |
非推奨の API
| 非推奨のメソッド |
現在の動作 |
SunVisualizer.setIntensity( v ) |
viewer.sun.setIlluminance( v ) に書き込みます。円盤だけでなく空・地表・水面の明るさも変わります |
SunVisualizer.setRadius( v ) |
viewer.sun.setAngularDiameterDegree() に、標準の視直径の v 倍を書き込みます。大気があると、大きくするほど円盤は暗くなります |
SunVisualizer.setRayleigh / setMie / setScaleDepth |
大気が無い (または無効な) ときに、キャンバスへ直接描く場合だけ、太陽の赤みに使います |
SunVisualizer.setSunRate |
描画に影響しません |
Atmosphere.setAureoleIntensity |
太陽と月の円光の両方に書き込みます。setGlowIntensity を使ってください |
サンプルコード
Sun と SunVisualizer で、夕方の太陽を描く例です。
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
52
53 | <!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(),
sun_visualizer: new mapray.SunVisualizer(),
});
// Wait for the initialization process to complete.
await uiviewer.viewer.init_promise;
const theta = - Math.PI / 180.0 * ( -47.5 );
uiviewer.viewer.sun.setSunDirection( [ Math.cos( theta ), Math.sin( theta ), 0 ] );
uiviewer.viewer.sun.setAngularDiameterDegree( 1.0 );
uiviewer.viewer.sunVisualizer.setGlowIntensity( 1.0 );
uiviewer.setCameraPosition({
longitude: 139.09396,
latitude: 35.42153,
height: 5200
});
uiviewer.setLookAtPosition({
longitude: 138.733876,
latitude: 35.392069,
height: 2200
});
}
main();
</script>
|
その他のメソッドや詳細、各メソッドの範囲と既定値は リファレンスマニュアル (Sun) と リファレンスマニュアル (SunVisualizer) を参照してください。
