added new examples

sony · May 23, 2024 · ac98401 · ac98401
1 parent 57d9164
commit ac98401
Show file tree

Hide file tree

Showing 13 changed files with 5,677 additions and 0 deletions.
diff --git a/examples/animation/basic_animation.html b/examples/animation/basic_animation.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Basic animation</title>
+  <meta property="og:description" content="Basic animation sample utilizing Mapray animation engine" />
+  <script src="../../packages/mapray/dist/umd/mapray-dev.js"></script>
+  <link rel="stylesheet" href="../../packages/ui/dist/mapray.css">
+  <style>
+    body {margin: 0; padding: 0;}
+    html, body, div#mapray-container { height: 100%; }
+  </style>
+</head>
+
+<body>
+<div id="mapray-container"></div>
+</body>
+</html>
+
+<script>
+  class AnimePinStep extends mapray.RenderCallback {
+    constructor(container) {
+      super();
+
+      var accessToken = "MTUzNjI5NzM5OWVmZTI2NTdlZmJlZDgyYTNjZWY0";
+
+      new mapray.Viewer(container, {
+        render_callback: this,
+        image_provider: new mapray.StandardImageProvider("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 2, 18),
+        dem_provider: new mapray.CloudDemProvider(accessToken)
+      });
+
+      this.updater = new mapray.animation.Updater();
+      this.total_time = 0;
+
+      var mlocs_focal_point = new mapray.GeoPoint( 139.69685, 35.689777, 100 );
+      var mlocs_to_gocs = mlocs_focal_point.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
+
+      // 視線方向を定義
+      var cam_pos = mapray.GeoMath.createVector3([0, -2000, 500]);
+      var cam_eye_target = mapray.GeoMath.createVector3([0, 0, 0]);
+      var cam_up = mapray.GeoMath.createVector3([0, 1, 0]);
+
+      // ビュー変換行列を作成
+      var view_to_mlocs = mapray.GeoMath.createMatrix();
+      mapray.GeoMath.lookat_matrix(cam_pos, cam_eye_target, cam_up, view_to_mlocs);
+
+      // カメラの位置と視線方向からカメラの姿勢を変更
+      var view_to_gocs = this.viewer.camera.view_to_gocs;
+      mapray.GeoMath.mul_AA(mlocs_to_gocs, view_to_mlocs, view_to_gocs);
+
+      this.viewer.camera.near = 30;
+      this.viewer.camera.far = 500000;
+
+      // Create keyframes
+      let curve = new mapray.animation.KFLinearCurve(mapray.animation.Type.find("number"));
+
+      let keyframes = [];
+      keyframes.push(mapray.animation.Time.fromNumber(0));
+      keyframes.push(5.0);
+      keyframes.push(mapray.animation.Time.fromNumber(10));
+      keyframes.push(40.0);
+      curve.setKeyFrames(keyframes);
+
+      // Create Entity
+      let pin_entity = new mapray.PinEntity(this.viewer.scene);
+      let pin_point = new mapray.GeoPoint( 139.69685, 35.689777, 100 );
+      pin_entity.addPin(pin_point, { id: 0, size: 40, bg_color: [1, 0, 0] });
+      this.viewer.scene.addEntity(pin_entity);
+
+      // Get default animation entry.
+      let pin = this.viewer.scene.getEntity(0).getEntry(0);
+
+      // Setting up a function to update animations for an Entity
+      this.updater = new mapray.animation.Updater();
+      pin.animation.bind("size", this.updater, curve);
+    }
+
+    onUpdateFrame(delta_time) {
+      this.total_time += delta_time;
+      // calculate the frame
+      this.updater.update(mapray.animation.Time.fromNumber(this.total_time));
+      if (this.total_time > 10.0) {
+        this.total_time = 0.0;
+      }
+    }
+  }
+
+  new AnimePinStep('mapray-container');
+</script>
diff --git a/examples/animation/basic_animation_with_uiviewer.html b/examples/animation/basic_animation_with_uiviewer.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Basic animation with UI Viewer</title>
+  <meta property="og:description" content="Basic animation sample utilizing Mapray animation engine through UIViewer" />
+  <script src="../../packages/mapray/dist/umd/mapray-dev.js"></script>
+  <script src="../../packages/ui/dist/umd/maprayui-dev.js"></script>
+  <link rel="stylesheet" href="../../packages/ui/dist/mapray.css">
+  <style>
+    body {margin: 0; padding: 0;}
+    html, body, div#mapray-container { height: 100%; }
+  </style>
+</head>
+
+<body>
+<div id="mapray-container"></div>
+</body>
+</html>
+
+<script>
+  class AnimationView extends maprayui.StandardUIViewer {
+    constructor(container, accessToken, options) {
+      super(container, accessToken, options);
+
+      // Create keyframes
+      let curve = new mapray.animation.KFLinearCurve(mapray.animation.Type.find("number"));
+
+      let keyframes = [];
+      keyframes.push(mapray.animation.Time.fromNumber(0));
+      keyframes.push(5.0);
+      keyframes.push(mapray.animation.Time.fromNumber(10));
+      keyframes.push(40.0);
+      curve.setKeyFrames(keyframes);
+
+      // Create Entity
+      let pin_entity = new mapray.PinEntity(this.viewer.scene);
+      let pin_point = new mapray.GeoPoint(138.238888, 35.674444, 3200);
+      pin_entity.addPin(pin_point, { id: 0, size: 40, bg_color: [1, 0, 0] });
+      this.viewer.scene.addEntity(pin_entity);
+
+      // Get default animation entry.
+      let pin = this.viewer.scene.getEntity(0).getEntry(0);
+
+      // Setting up a function to update animations for an Entity
+      this.updater = new mapray.animation.Updater();
+      pin.animation.bind("size", this.updater, curve);
+
+      this.total_time = 0.0
+    }
+
+    onUpdateFrame(delta_time) {
+      super.onUpdateFrame(delta_time);
+      this.total_time += delta_time;
+      // calculate the frame
+      this.updater.update(mapray.animation.Time.fromNumber(this.total_time));
+      if (this.total_time > 10.0) {
+        this.total_time = 0.0;
+      }
+    }
+  }
+
+  // Set up your access token, which can be created in Mapray Cloud.
+  var accessToken = "MTUzNjI5NzM5OWVmZTI2NTdlZmJlZDgyYTNjZWY0";
+
+  // The StandardUIView in the ui package includes mouse-based camera manipulation.
+  var uiviewer = new AnimationView( "mapray-container", accessToken );
+
+  uiviewer.setCameraPosition({
+    longitude: 138.368549,
+    latitude: 35.658995,
+    height: 10000
+  });
+
+  uiviewer.setLookAtPosition({
+    longitude: 138.238888,
+    latitude:  35.674444,
+    height: 2800
+  });
+
+
+</script>
diff --git a/examples/atmosphere/basic_atmosphere.html b/examples/atmosphere/basic_atmosphere.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Add an atmosphere on the world</title>
+  <meta property="og:description" content="Basic sample for adding atmospheric representation to the virtual Earth" />
+  <script src="../../packages/mapray/dist/umd/mapray-dev.js"></script>
+  <script src="../../packages/ui/dist/umd/maprayui-dev.js"></script>
+  <link rel="stylesheet" href="../../packages/ui/dist/mapray.css">
+  <style>
+    body {margin: 0; padding: 0;}
+    html, body, div#mapray-container { height: 100%; }
+  </style>
+</head>
+
+<body>
+<div id="mapray-container"></div>
+</body>
+</html>
+
+<script>
+  var accessToken = "MTUzNjI5NzM5OWVmZTI2NTdlZmJlZDgyYTNjZWY0";
+  const uiviewer = new maprayui.StandardUIViewer( "mapray-container", accessToken, {
+    atmosphere: new mapray.Atmosphere()
+  } );
+
+  uiviewer.setCameraPosition({
+    longitude: 137.693861815529,
+    latitude: 36.30821404038031,
+    height: 3300
+  });
+
+  uiviewer.setLookAtPosition({
+    longitude: 137.65906432922944,
+    latitude:  36.294572127536995,
+    height: 2800
+  });
+
+  uiviewer.viewer.atmosphere.setRayleigh(0.003);
+  uiviewer.viewer.atmosphere.setMie(0.001);
+
+
+</script>
diff --git a/examples/atmosphere/cloud_from_space.html b/examples/atmosphere/cloud_from_space.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Display clouds in the sky </title>
+  <meta property="og:description" content="Sample utilizing cloud layers to overlay clouds in the sky." />
+  <script src="../../packages/mapray/dist/umd/mapray-dev.js"></script>
+  <script src="../../packages/ui/dist/umd/maprayui-dev.js"></script>
+  <link rel="stylesheet" href="../../packages/ui/dist/mapray.css">
+  <style>
+    body {margin: 0; padding: 0;}
+    html, body, div#mapray-container { height: 100%; }
+  </style>
+</head>
+
+<body>
+<div id="mapray-container"></div>
+</body>
+</html>
+
+<script>
+  class EarthView extends maprayui.StandardUIViewer {
+    constructor( container, accessToken, options ) {
+      super( container, accessToken, options );
+      this.time = 0.0;
+    }
+    onUpdateFrame( delta_time ) {
+      super.onUpdateFrame( delta_time );
+      // calculate the frame of cloud animation
+      const dv = 1.0 / 18.0;
+      let fade = this.time * dv > 1.0 ? 0 : this.time * dv;
+      this.viewer.cloudVisualizer.setFade( fade );
+      if ( fade === 0 && this.time != 0.0 ) {
+        this.time = 0.0;
+      } else {
+        this.time += delta_time;
+      }
+    }
+  }
+
+  var accessToken = "MTUzNjI5NzM5OWVmZTI2NTdlZmJlZDgyYTNjZWY0";
+  const uiviewer = new EarthView( "mapray-container", accessToken, {
+    atmosphere: new mapray.Atmosphere(),
+    sun_visualizer: new mapray.SunVisualizer( 32 ),
+    moon_visualizer: new mapray.MoonVisualizer( 'https://resource.mapray.com/assets/images/moon.jpg' ),
+    cloud_visualizer: new mapray.CloudVisualizer(),
+    star_visualizer: new mapray.StarVisualizer( 'https://resource.mapray.com/assets/data/star75.json', 'https://resource.mapray.com/assets/images/starmap_512n2.jpg' ),
+  } );
+
+  uiviewer.setCameraPosition({
+    longitude: 142.0,
+    latitude: 20.0,
+    height: 2500000
+  });
+
+  uiviewer.setLookAtPosition({
+    longitude: 137.65906432922944,
+    latitude:  36.294572127536995,
+    height: 1000
+  });
+
+  uiviewer.viewer.cloudVisualizer.loadData( 'https://resource.mapray.com/assets/data/cloud_0.png' , 'https://resource.mapray.com/assets/data/cloud_1.png', 0.0 );
+
+
+</script>
diff --git a/examples/atmosphere/sun_moon_star.html b/examples/atmosphere/sun_moon_star.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Display stars and the moon</title>
+  <meta property="og:description" content="Sample for adding stars and the moon in the space" />
+  <script src="../../packages/mapray/dist/umd/mapray-dev.js"></script>
+  <script src="../../packages/ui/dist/umd/maprayui-dev.js"></script>
+  <link rel="stylesheet" href="../../packages/ui/dist/mapray.css">
+  <style>
+    body {margin: 0; padding: 0;}
+    html, body, div#mapray-container { height: 100%; }
+  </style>
+</head>
+
+<body>
+<div id="mapray-container"></div>
+</body>
+</html>
+
+<script>
+  var accessToken = "MTUzNjI5NzM5OWVmZTI2NTdlZmJlZDgyYTNjZWY0";
+  const uiviewer = new maprayui.StandardUIViewer( "mapray-container", accessToken, {
+    atmosphere: new mapray.Atmosphere(),
+    sun_visualizer: new mapray.SunVisualizer( 32 ),
+    moon_visualizer: new mapray.MoonVisualizer( 'https://resource.mapray.com/assets/images/moon.jpg' ),
+    star_visualizer: new mapray.StarVisualizer( 'https://resource.mapray.com/assets/data/star75.json', 'https://resource.mapray.com/assets/images/starmap_512n2.jpg' ),
+  } );
+
+  uiviewer.setCameraPosition({
+    longitude: 142.0,
+    latitude: 20.0,
+    height: 2500000
+  });
+
+  uiviewer.setLookAtPosition({
+    longitude: 137.65906432922944,
+    latitude:  36.294572127536995,
+    height: 1200000
+  });
+
+  // The positions of the Sun and the Moon can be specified in the GOCS coordinate system.
+  const sun_xy_degree = 135.0;
+  const sun_z_degree = 36.0;
+  uiviewer.viewer.sun.setSunDirection( [ Math.cos(Math.PI/180.0 * sun_xy_degree), Math.sin(Math.PI/180.0 * sun_xy_degree), Math.sin(Math.PI/180.0 * sun_z_degree) ] );
+
+  const moon_xy_degree = -45.0;
+  const moon_z_degree = 36.0;
+  uiviewer.viewer.moon.setMoonDirection( [ Math.cos(Math.PI/180.0 * moon_xy_degree), Math.sin(Math.PI/180.0 * moon_xy_degree), Math.sin(Math.PI/180.0 * moon_z_degree) ] );
+  uiviewer.viewer.moonVisualizer.setRadius(5);
+
+</script>