sony · masa-sony · Jun 3, 2021 · Jun 5, 2021 · Jun 5, 2021 · Jun 5, 2021
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,8 @@
 build/
 dist/
 doc/jsdoc/
+doc/typedoc/
+doc/typedoc-devel/
 node_modules/
 
 */**/yarn.lock

diff --git a/apps/fall/README.md b/apps/fall/README.md
@@ -1,4 +1,4 @@
-# maprayJS Fall 
+# mapray-js Fall 
 This is a simple demo application with beautiful Mt Fuji on [Mapray](https://mapray.com) website.
 
 ## Preparing your Development Environment
@@ -14,26 +14,26 @@ brew install yarn
 ```
 
 ## Usage
-**To set access token:**
+
+### Set access token
 
 To see the terrian data, you need a [Mapray access token](/doc/developer-guide/GettingStarted/index.md). You can either set an environment variable:
 
 ```bash
 export MAPRAY_ACCESS_TOKEN=<mapray_access_token>
 ```
 
-Or set accsess token to `<your access token here>` directly in `Fall.js`.
+Or set accsess token to `<your access token here>` directly in `Fall.js` and `Turn.js`.
 
 
-**To install dependencies:**
+### Install dependencies
 
 ```bash
 npm install
 # or
 yarn
 ```
 
-**Commands:**
-* `npm start` is the development target, to serves the app and hot reload.
-* `npm run build` is the production target, to create the final bundle and write to disk.
-* `npm run start-local` is the target for developing mapray and ui packages, to include mapray packages from local modules to write to disk.
+### Commands
+- `npm start` is the development target, to serves the app and hot reload.
+- `npm run build-prod` is the production target, to create the final bundle and write to disk.
diff --git a/apps/fall/index.html b/apps/fall/index.html
@@ -19,28 +19,40 @@
     </noscript>
     <style>
       #mapray-container {
-        width: 98%;
-        height: 95%;
+        width: 100%;
+        height: 100%;
         margin: 0;
         overflow: hidden;
         padding: 0;
-        border: solid 2px blue;
+        background: rgb(236, 236, 236);
         position: relative;
+        box-shadow: inset 0 0px 50px 20px #aaa;
       }
-      html {
-        height: 100%;
-      }
-      body {
-        padding: 0;
+      html, body {
         margin: 0;
-        overflow: hidden;
+        padding: 0;
         height: 100%;
       }
+      .toolbar {
+        position: fixed;
+        height: 40px;
+        z-index: 10;
+      }
+      .toolbar input {
+        display: inline-block;
+        height: 30px;
+        padding: 0 15px;
+        margin: 5px 5px 5px 0;
+      }
+      .toolbar input:first-child {
+        margin: 5px;
+      }
     </style>
   </head>
   <body>
-    <div>
-      <input type="button" value="start" onclick="window.startApp('mapray-container');"/>
+    <div class="toolbar">
+      <input type="button" value="Fall" onclick="window.startApp('mapray-container', 'fall');"/><!--
+   --><input type="button" value="Turn" onclick="window.startApp('mapray-container', 'turn');"/>
     </div>
     <div id="mapray-container">
     </div>

diff --git a/apps/fall/package.json b/apps/fall/package.json
@@ -3,13 +3,11 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "start": "run-p start-server build-watch",
-    "start-local": "run-p start-server local-watch",
-    "build": "rollup -c --environment BUILD:production",
+    "start": "run-p server build-watch",
+    "build": "rollup -c",
+    "build-prod": "rollup -c --environment BUILD:production",
     "build-watch": "rollup -c -w",
-    "local": "rollup -c --environment local,BUILD:production",
-    "local-watch": "rollup -c -w --environment local",
-    "start-server": "st --no-cache -H 0.0.0.0 --port 7776 --index index.html ."
+    "server": "st --no-cache -H 0.0.0.0 --port 7776 --index index.html --dir ."
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",

diff --git a/apps/fall/rollup.config.js b/apps/fall/rollup.config.js
@@ -1,98 +1,56 @@
-import path from 'path'
-import { terser } from 'rollup-plugin-terser'
-import babel from 'rollup-plugin-babel'
-import { string } from 'rollup-plugin-string'
-import replace from 'rollup-plugin-replace'
-import postcss from 'rollup-plugin-postcss'
-import resolve from 'rollup-plugin-node-resolve'
-import commonjs from 'rollup-plugin-commonjs'
-import strip from '@rollup/plugin-strip';
-import { addLocalSettings } from '../rollup.config.local.js'
+import path from 'path';
+import { terser } from 'rollup-plugin-terser';
+import babel from 'rollup-plugin-babel';
+import replace from 'rollup-plugin-replace';
+import postcss from 'rollup-plugin-postcss';
+import resolve from 'rollup-plugin-node-resolve';
 
-var outdir = "dist/"
 
-let accessToken = '"<your access token here>"'
-if (process.env.MAPRAY_ACCESS_TOKEN)  {
-    accessToken = JSON.stringify(process.env.MAPRAY_ACCESS_TOKEN)
-}
 
-const getPluginsConfig = (prod) => {
-    const params = [
-        postcss(),
-        replace({
-            '"<your access token here>"': accessToken,
-            delimiters: ['', '']
-        }),
-        commonjs(),
-        resolve(),
-        (process.env.local && prod ?
-            strip({
-                    include: [
-                        'src/**/*.js',
-                        '../../**/*.js'
-                    ],
-                    debugger: false,
-                    functions: [ 'console.assert' ],
-                    labels: [ 'ASSERT' ],
-                    sourceMap: true,
-            })
-        : null),
-        (process.env.local ?
-            string({
-                    include: [
-                        '../../**/*.vert',
-                        '../../**/*.frag',
-                    ]
-            })
-        : null),
-        babel({
-            exclude: 'node_modules/**'
-        })
-    ]
+const outdir = "dist/";
 
-    if (prod) {
-        params.push(
-            terser({
-                compress: {
-                    unused: false,
-                    collapse_vars: false,
-                },
-                output: {
-                    comments: false,
-                },
-            })
-        )
-    }
 
-    return params;
-}
 
-const config = (build) => {
+export default () => {
+
+    const isProd = process.env.BUILD === 'production';
+    const maprayAccessToken = process.env.MAPRAY_ACCESS_TOKEN;
+
     const bundle = {
         input: 'src/index.js',
-        output: { 
-            file: outdir+'bundle.js', 
-            format: 'iife', 
+        output: {
+            file: outdir + 'bundle.js',
+            format: 'iife',
             indent: false,
-            sourcemap: true
-        }
+            sourcemap: !isProd,
+        },
+        plugins: [
+            postcss(),
+            (maprayAccessToken ?
+                replace({
+                    '"<your access token here>"': JSON.stringify( maprayAccessToken ),
+                    delimiters: ['', ''],
+                }):
+                null
+            ),
+            resolve(),
+            babel({
+                exclude: 'node_modules/**',
+            }),
+            (isProd ?
+                terser({
+                    compress: {
+                        unused: false,
+                        collapse_vars: false,
+                    },
+                    output: {
+                        comments: false,
+                    },
+                }):
+                null
+            )
+        ]
     }
-    bundle.plugins = getPluginsConfig(build === 'production')
 
-    return bundle
-}
-
-// get the setting when developing in local environment
-const loadLocalSetting = (env) => {
-    const appDir = path.join(__dirname, '../')
-    let bundle = config(env.BUILD)
-    bundle = addLocalSettings(env, appDir, bundle)
-    return bundle
-}
-
-export default () => {
-    if (process.env.local) {
-        return loadLocalSetting(process.env)
-    }
-    return config(process.env.BUILD);
+    return bundle;
 }
diff --git a/apps/fall/src/Fall.js b/apps/fall/src/Fall.js
@@ -1,31 +1,44 @@
 import mapray from "@mapray/mapray-js";
-import FallRenderCallback from "./FallRenderCallback";
+
+const GeoMath = mapray.GeoMath;
 
 
 const accessToken = "<your access token here>";
 
+
+
 /**
  * @summary 下降カメラ
  */
-class Fall {
+class Fall extends mapray.RenderCallback {
 
     /**
      * @param {string|Element} container  コンテナ (ID または要素)
      */
     constructor( container )
     {
-        this._image_provider  = new mapray.StandardImageProvider( "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 0, 18 );
-        this._render_callback = new FallRenderCallback( this );
-
-        this._viewer = new mapray.Viewer( container, { image_provider:  this._image_provider,
-                                                       dem_provider:    new mapray.CloudDemProvider(accessToken),
-                                                       render_callback: this._render_callback } );
+        super();
+        this._viewer = new mapray.Viewer( container, {
+            render_callback: this,
+            image_provider: this.createImageProvider(),
+            dem_provider: new mapray.CloudDemProvider(accessToken),
+        });
         this._viewer.attribution_controller.addAttribution({
             display: "国土地理院",
             link: "http://maps.gsi.go.jp/development/ichiran.html"
-        });                                   
+        });
+
+        const home_pos = { longitude: 138.727778, latitude: 35.360556, height: 0 };
+        this._home_to_gocs   = GeoMath.iscs_to_gocs_matrix( home_pos, GeoMath.createMatrix() );
+
+        this._cam_position   = GeoMath.createVector3();
+        this._cam_end_pos    = GeoMath.createVector3( [-150, 500, 3900] );
+        this._cam_eye_target = GeoMath.createVector3( [1500, -1000, 3200.0] );
+        this._cam_up         = GeoMath.createVector3( [0, 0, 1] );
+        this._cam_speed      = Math.log( 1 - 0.1 );
     }
 
+
     /**
      * アプリを停止してから削除する。
      */
@@ -34,6 +47,49 @@ class Fall {
         this._viewer.destroy();
     }
 
+
+    /**
+     * @override
+     */
+    onStart()
+    {
+        GeoMath.copyVector3( [0, 100000, 50000], this._cam_position );
+    }
+
+
+    /**
+     * @override
+     */
+    onUpdateFrame( delta_time )
+    {
+        const camera = this.viewer.camera;
+
+        // _cam_position を更新
+        const a = 1 - Math.exp( this._cam_speed * delta_time );
+        const e = this._cam_end_pos;
+        const p = this._cam_position;
+        p[0] = a*(e[0] - p[0]) + p[0];
+        p[1] = a*(e[1] - p[1]) + p[1];
+        p[2] = a*(e[2] - p[2]) + p[2];
+
+        // _view_to_gocs を更新
+        const view_to_home = GeoMath.createMatrix();
+        GeoMath.lookat_matrix( p, this._cam_eye_target, this._cam_up, view_to_home );
+
+        const view_to_gocs = camera.view_to_gocs;
+        GeoMath.mul_AA( this._home_to_gocs, view_to_home, view_to_gocs );
+
+        // 仮の near, far を設定
+        camera.near = 30;
+        camera.far  = 500000;
+    }
+
+
+    // 画像プロバイダを生成
+    createImageProvider()
+    {
+        return new mapray.StandardImageProvider( "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 2, 18 );
+    }
 }