Merge pull request #89 from ux3d/feature/npm_package

Feature/npm package

.gitignore

@@ -15,4 +15,3 @@ debug.log
 /3751792e8d692473.wasm
 /1053c4edd3398f26.wasm
 npm_package/*.map
-npm_package/

.gitmodules

@@ -1,6 +1,6 @@
 [submodule "assets/models"]
-	path = app_web/assets/models
+	path = assets/models
 	url = https://github.com/KhronosGroup/glTF-Sample-Models.git
 [submodule "assets/environments"]
-	path = app_web/assets/environments
+	path = assets/environments
 	url = https://github.com/KhronosGroup/glTF-Sample-Environments.git

.npmignore

@@ -1,3 +1,23 @@
-.vscode
-assets
-*.html
+# top level directories
+.git/
+.vscode/
+app_headless/
+app_web/
+assets/
+source/
+documentation/
+.project
+.settings
+.eslintignore
+.gitattributes
+.gitmodules
+.eslintrc.json
+
+# files types to ignore
+rollup.config.js
+package-lock.json
+.DS_Store
+npm-debug.log
+yarn.lock
+*.map
+

README.md

@@ -1,20 +1,19 @@
 Khronos glTF 2.0 Sample Viewer
 ==============================
 
-[![](examples/assets/images/BoomBox.jpg)](http://gltf.ux3d.io/)
+[![](assets/images/BoomBox.jpg)](http://gltf.ux3d.io/)
 
 This is the official [Khronos](https://www.khronos.org/) [glTF 2.0](https://www.khronos.org/gltf/) Sample Viewer using [WebGL](https://www.khronos.org/webgl/): [glTF 2.0 Sample Viewer](http://gltf.ux3d.io/)
 
 
-**Table of Contents**
+Table of Contents
+-----------------
 
 - [Version](#version)
 - [Credits](#credits)
 - [Features](#features)
-- [Viewer](#viewer)
-  - [Usage](#usage)
-  - [Setup](#setup)
-  - [Debugging](#debugging)
+- [Setup](#setup)
+- [Web App](#web-app)
 - [Physically-Based Materials in glTF 2.0](#physically-based-materials-in-gltf-20)
 - [Appendix A Metallic-Roughness Material](#appendix-a-metallic-roughness-material)
   - [Specular Term](#specular-term-f_specular)
@@ -35,7 +34,7 @@ Refactored and developed by [UX3D](https://www.ux3d.io/). Supported by the [Khro
 Original code based on the former [glTF-WebGL-PBR](https://github.com/KhronosGroup/glTF-Sample-Viewer/tree/glTF-WebGL-PBR) project. Previously supported by [Facebook](https://www.facebook.com/) for animations, skinning and morphing.
 
 Features
-========
+--------
 
 - [x] glTF 2.0
 - [x] [KHR_draco_mesh_compression](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression)
@@ -51,78 +50,31 @@ Features
 - [x] [KHR_texture_transform](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_texture_transform)
 - [ ] KHR_xmp_ld
 
-Viewer
-======
-
-Link to the live [glTF 2.0 Sample Viewer](http://gltf.ux3d.io/).
-
-Usage
------
-
-**Controls**
-
-`click + drag` : Rotate model
-
-`scroll` : Zoom camera
-
-`GUI` : Use to change models and settings
-
-**Change glTF model**
-
-* Choose one of the glTF models in the selection list
-
-or
-
-* Drag and drop glTF files into viewer
 
 Setup
 -----
 
 For local usage and debugging, please follow these instructions:
 
-**(0)** Make sure [Git LFS](https://git-lfs.github.com) is installed.
-
-**(1)** Checkout the [`master`](../../tree/master) branch
-
-**(2)** Pull the submodules for the required [glTF sample models](https://github.com/KhronosGroup/glTF-Sample-Models) and [environments](https://github.com/KhronosGroup/glTF-Sample-Environments) `git submodule update  --init --recursive`
-
-**(3)** To test the gltf-sample-viewer:
+0. Make sure [Git LFS](https://git-lfs.github.com) is installed.
 
-- `cd example`
-- run `npm install`
-- start a demo in the browser with `npm run dev`, and open http://localhost:8000.
+1. Checkout the [`master`](../../tree/master) branch
 
-When making changes, the project is automatically rebuilt and the `example/dist/` folder
-is updated. Files in the `dist/` folder should not be included in pull
-requests — they will be updated by project maintainers with each new release.
+2. Pull the submodules for the required [glTF sample models](https://github.com/KhronosGroup/glTF-Sample-Models) and [environments](https://github.com/KhronosGroup/glTF-Sample-Environments) `git submodule update  --init --recursive`
 
-**(4)** To build the npm package for publishing:
-- `cd src`
-- run `npm install`
-- run `npm run build`
+3. To build the npm package for publishing:
+	- run `npm install`
+	- run `npm run build`
 
-This will create a new `gltf-sample-viewer.js` and `gltf-sample-viewer.module.js` in the `npm_package` folder
+This will create a new `gltf-viewer.js` and `gltf-viewer.module.js` in the `dist` directory.
 
-**(5)** To test the npm-package:
-- Change the `gltf-sample-viewer` dependency in `example/package.json` from `../src` to `../npm_package`
-- Delete the `gltf-sample-viewer` folder in `example/npm_modules`
-- Now follow steps from **(3)**
-
-
-Debugging
----------
-
-* Requirements
-  * [Visual Studio Code](https://code.visualstudio.com/)
-  * [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/)
-* Install the [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug) extension for Visual Studio Code
-* Open the project folder in Visual Studio Code and select `Debug->Add Configuration->Firefox` so the `.vscode/launch.json` file is created.
-* One might need to append `/example` to `${workspaceFolder}` in the `launch.json` file
-* `Debug->Start Debugging` should now launch a Firefox window with the sample viewer and VS Code breakpoints should be hit.
+Web App
+-------
 
+You can find an example application for the gltf viewer in the [app_web subdirectory of the sample viewer repository](https://github.com/ux3d/glTF-Sample-Viewer/tree/develop/app_web). A live demo can be found at [gltf.ux3d.io](https://gltf.ux3d.io).
 
 Physically-Based Materials in glTF 2.0
-======================================
+--------------------------------------
 
 With the change from glTF 1.0 to glTF 2.0, one of the largest changes included core support for materials that could be used for physically-based shading. Part of this process involved choosing technically accurate, yet user-friendly, parameters for which developers and artists could use intuitively. This resulted in the introduction of the **Metallic-Roughness Material** to glTF. If you would like to read more about glTF, you can find the content at its [GitHub page](https://github.com/KhronosGroup/glTF).
 
@@ -132,7 +84,7 @@ For implementation details and further theory, please find more information in t
 
 
 Appendix A: Metallic-Roughness Material
-=======================================
+---------------------------------------
 
 For further reference, please read the [glTF 2.0: Appendix B: BRDF Implementation](https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#appendix-b-brdf-implementation)
 The following sections do summarize the important shader code.

app_headless/index.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 const yargs = require("yargs");
-const sample_viewer = require("gltf-sample-viewer");
+const sample_viewer = require("@khronosgroup/gltf-viewer");
 const fs = require("fs");
 const node_gles = require("node-gles");
 const png = require("fast-png");
@@ -23,15 +23,15 @@ async function main()
     const view = new sample_viewer.GltfView(gl);
     const state = view.createState();
 
-    const environment_file = new Uint8Array(fs.readFileSync(__dirname + "/../app_web/assets/environments/footprint_court_512.hdr")).buffer;
+    const environment_file = new Uint8Array(fs.readFileSync(__dirname + "/../assets/environments/footprint_court_512.hdr")).buffer;
     const luts = {
-        lut_ggx_file: new Uint8Array(fs.readFileSync(__dirname + "/../app_web/assets/images/lut_ggx.png")).buffer,
-        lut_charlie_file: new Uint8Array(fs.readFileSync(__dirname + "/../app_web/assets/images/lut_charlie.png")).buffer,
-        lut_sheen_E_file: new Uint8Array(fs.readFileSync(__dirname + "/../app_web/assets/images/lut_sheen_E.png")).buffer,
+        lut_ggx_file: new Uint8Array(fs.readFileSync(__dirname + "/../assets/images/lut_ggx.png")).buffer,
+        lut_charlie_file: new Uint8Array(fs.readFileSync(__dirname + "/../assets/images/lut_charlie.png")).buffer,
+        lut_sheen_E_file: new Uint8Array(fs.readFileSync(__dirname + "/../assets/images/lut_sheen_E.png")).buffer,
     };
 
     state.environment = await sample_viewer.loadEnvironment(environment_file, view, luts);
-    const glb_file = new Uint8Array(fs.readFileSync(__dirname + "/../app_web/assets/models/2.0/Box/glTF-Binary/Box.glb")).buffer;
+    const glb_file = new Uint8Array(fs.readFileSync(__dirname + "/../assets/models/2.0/Box/glTF-Binary/Box.glb")).buffer;
     state.gltf = await sample_viewer.loadGltf(glb_file, view);
 
     const defaultScene = state.gltf.scene;
@@ -40,7 +40,6 @@ async function main()
     scene.applyTransformHierarchy(state.gltf);
     sample_viewer.computePrimitiveCentroids(state.gltf);
     state.userCamera.fitViewToScene(state.gltf, state.sceneIndex);
-    state.userCamera.updatePosition();
 
     view.renderFrame(state, width, height);
 

app_headless/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "cd ../source; npm run build; cd ../app_headless; node index.js"
+    "start": "cd ..; npm run build; cd app_headless; node index.js"
   },
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
   "dependencies": {
     "@types/webgl2": "0.0.5",
     "fast-png": "^5.0.3",
-    "gltf-sample-viewer": "../npm_package",
+    "@khronosgroup/gltf-viewer": "..",
     "node-gles": "0.0.17",
     "yargs": "^16.2.0"
   }

app_web/README.md

@@ -0,0 +1,60 @@
+glTF Sample Viewer Web App
+==============================
+
+[![](../assets/images/BoomBox.jpg)](http://gltf.ux3d.io/)
+
+This is the official [Khronos](https://www.khronos.org/) [glTF 2.0](https://www.khronos.org/gltf/) Sample Viewer using [WebGL](https://www.khronos.org/webgl/): [glTF 2.0 Sample Viewer](http://gltf.ux3d.io/)
+
+
+Viewer
+======
+
+Link to the live [glTF 2.0 Sample Viewer](http://gltf.ux3d.io/).
+
+Usage
+-----
+
+### Controls
+
+`click + drag` : Rotate model
+
+`scroll` : Zoom camera
+
+`GUI` : Use to change models and settings
+
+### Change glTF model
+
+* Choose one of the glTF models in the selection list
+* Drag and drop glTF files into viewer
+
+### Change the environment map
+* Drag and drop a .hdr panorama file
+
+Setup
+-----
+
+For local usage and debugging, please follow these instructions:
+
+0. Make sure [Git LFS](https://git-lfs.github.com) is installed.
+
+1. Checkout the [`master`](../../tree/master) branch
+
+2. Pull the submodules for the required [glTF sample models](https://github.com/KhronosGroup/glTF-Sample-Models) and [environments](https://github.com/KhronosGroup/glTF-Sample-Environments) `git submodule update  --init --recursive`
+
+3. Build the web app
+	- `cd app_web`
+	- run `npm install`
+	- start a demo in the browser with `npm run dev`, and open http://localhost:8000.
+
+When making changes, the project is automatically rebuilt and the `app_web/dist/` directory is populated with the web app. This directory contains all files necessary for deployment to a webserver.
+
+Debugging
+---------
+
+* Requirements
+  * [Visual Studio Code](https://code.visualstudio.com/) or [vscodium](https://github.com/VSCodium/vscodium)
+  * [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/en-US/firefox/new/)
+* Install the [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) or [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug) extension for Visual Studio Code
+* Open the project directory in Visual Studio Code and select `Debug->Add Configuration->Chrome` or `Debug->Add Configuration->Firefox` so the `.vscode/launch.json` file is created.
+* Append `/app_web/dist` to `${workspaceFolder}` in the `launch.json` file
+* `Debug->Start Debugging` should now launch a Chrome or Firefox window with the sample viewer and VS Code breakpoints should be hit.

app_web/index.html

@@ -12,7 +12,7 @@
 
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="ui.css">
-    <link rel="stylesheet" href="dist/GltfSVApp.umd.css">
+    <link rel="stylesheet" href="GltfSVApp.umd.css">
     <link rel="icon" href="assets/images/gltf.png">
 
     <!-- buefy styles -->
@@ -29,7 +29,7 @@
     <script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
 
     <script src="https://www.gstatic.com/draco/v1/decoders/draco_decoder_gltf.js"></script>
-    <script src="node_modules/gltf-sample-viewer/libs/libktx.js"></script>
+    <script src="libs/libktx.js"></script>
 
 </head>
 <script>
@@ -310,5 +310,5 @@ <h2>Advanced Controls</h2>
         </template>
     </div>
 </body>
-<script src="dist/GltfSVApp.umd.js"></script>
+<script src="GltfSVApp.umd.js"></script>
 </html>

app_web/package.json

@@ -5,8 +5,8 @@
   "main": "src/main.js",
   "module": "src/main.js",
   "scripts": {
-    "build": "rollup -c",
-    "dev": "concurrently \"rollup -c -w\" \"serve --listen 8000 .\"",
+    "build": "cd ../source; npm run build; cd ../app_web; rollup -c",
+    "dev": "concurrently \"rollup -c -w\" \"serve --listen 8000 dist\"",
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint src/**/*.js",
     "lint:fix": "eslint --fix src/**/*.js",
@@ -24,11 +24,11 @@
   "author": "Khronos Group Inc.",
   "license": "Apache-2.0",
   "dependencies": {
-    "@bundled-es-modules/axios": "^0.18.1",
+    "axios": "^0.21.1",
     "buefy": "^0.9.4",
     "gl-matrix": "^3.2.1",
-    "gltf-sample-viewer": "../source",
-    "rollup-plugin-commonjs": "^10.1.0",
+    "@khronosgroup/gltf-viewer": "..",
+    "gltf-viewer-source": "../source",
     "rxjs": "^6.6.3",
     "simple-dropzone": "^0.8.0",
     "vue": "^2.6.11",
@@ -38,9 +38,11 @@
     "concurrently": "^5.3.0",
     "eslint": "^6.8.0",
     "rollup": "^1.31.1",
+    "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-glslify": "^1.1.3",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-scss": "^2.6.1",
     "serve": "^11.3.0"
   },

app_web/rollup.config.js

@@ -3,6 +3,7 @@ import resolve from 'rollup-plugin-node-resolve';
 import builtins from 'rollup-plugin-node-builtins';
 import scss from 'rollup-plugin-scss';
 import commonjs from 'rollup-plugin-commonjs';
+import copy from 'rollup-plugin-copy'
 
 export default {
   input: 'src/main.js',
@@ -12,7 +13,7 @@ export default {
       file: 'dist/GltfSVApp.umd.js',
       format: 'umd',
       sourcemap: true,
-      external: [ 'gl-matrix',  '@bundled-es-modules/axios', 'jpeg-js', 'fast-png']
+      external: [ 'gl-matrix', 'axios', 'jpeg-js', 'fast-png']
     }
   ],
   plugins: [
@@ -25,6 +26,16 @@ export default {
         preferBuiltins: true
     }),
     builtins(),
-    scss()
+    scss(),
+    copy({
+        targets: [
+            { src: ["index.html", "styles.css", "ui.css"], dest: "dist/"},
+            { src: ["../assets/models/2.0", "!../asset/models/.git"], dest: "dist/assets/models"},
+            { src: ["../assets/environments/*.hdr", "!../asset/environments/.git"], dest: "dist/assets/environments"},
+            { src: ["../assets/images"], dest: "dist/assets"},
+            { src: ["../assets/ui"], dest: "dist/assets"},
+            { src: ["../source/libs/*", "!../source/libs/hdrpng.js"], dest: "dist/libs"}
+        ]
+    })
   ]
 };