CIS700-Procedural-Graphics · rms13 · Apr 18, 2017 · Apr 19, 2017 · Apr 19, 2017 · Apr 19, 2017
diff --git a/FinalReport.md b/FinalReport.md
diff --git a/README.md b/README.md
@@ -1,112 +1,84 @@
-# CIS700 Procedural Graphics: Final Project
+### CIS700 Procedural Graphics: Final Project
+# Procedural Terrain using Cesium
+#### By: Rudraksha Shah and Rishabh Shah
 
-Time to show off your new bag of procedural tricks by creating one polished final project. For this assignment you will have four weeks to create and document a portfolio piece that demonstrates your mastery of procedural thinking and implementation. You may work in groups of up to three (working alone is fine too). You may use any language / platform you choose for this assignment (given our approval if it’s not JavaScript/WebGL or C++/OpenGL).
+[Youtube Video](https://www.youtube.com/watch?v=qH6zrUEBTnE)
 
-As usual with this class, we want to encourage you to take this opportunity to explore and experiment. To get you started, however, we’ve provided a few open-ended prompts below. Interesting and complex visuals are the goal in all of these prompts, but they encourage focus on different aspects of proceduralism.
+-----
 
-## Prompts:
+![](./images/dd_img1.jpg)
 
-- ### A classic 4k demo
-  * In the spirit of the demo scene, create an animation that fits into a 4k executable that runs in real-time. Feel free to take inspiration from the many existing demos. Focus on efficiency and elegance in your implementation.
-  * Examples: [cdak by Quite & orange](https://www.youtube.com/watch?v=RCh3Q08HMfs&list=PLA5E2FF8E143DA58C)
+### Introduction
+This project consists of procedural generation of terrain and textures for Cesium. Cesium fetches tiles with geometry data from a server. We will be adding proceduralism to Cesium by providing the procedural terrain in place of pre-modelled structures.
 
-- ### A forgery
-  * Taking inspiration from a particular natural phenomenon or distinctive set of visuals, implement a detailed, procedural recreation of that aesthetic. This includes modeling, texturing and object placement within your scene. Does not need to be real-time. Focus on detail and visual accuracy in your implementation.
-  * Examples:
-    - [Snail](https://www.shadertoy.com/view/ld3Gz2), [Journey](https://www.shadertoy.com/view/ldlcRf), Big Hero 6 Wormhole: [Image 1](http://2.bp.blogspot.com/-R-6AN2cWjwg/VTyIzIQSQfI/AAAAAAAABLA/GC0yzzz4wHw/s1600/big-hero-6-disneyscreencaps.com-10092.jpg) , [Image 2](https://i.stack.imgur.com/a9RGL.jpg)
+### Goal
+The geometry data Cesium fetches from the servers is based on the camera position. When the camera moves to an object, a higher resolution mesh is rendered. Our goal is to develop an algorithm that can generate terrain and textures in such incremental levels of detail. We will be creating a web server to provide the generated content.
 
-- ### A game level
-  * Like generations of game makers before us, create a game which generates an  navigable environment (eg. a roguelike dungeon, platforms) and some sort of goal or conflict (eg. enemy agents to avoid or items to collect). Must run in real-time. Aim to create an experience that will challenge players and vary noticeably in different playthroughs, whether that means complex dungeon generation, careful resource management or a sophisticated AI model. Focus on designing a system that will generate complex challenges and goals.
-  * Examples: Spore, Dwarf Fortress, Minecraft, Rogue
+### Inspiration/ Reference
+Some cool demos that inspired us to do this project:
+- Ixaleno: A 4kb executable by IQ: tps://www.youtube.com/watch?v=XAWPCmVC5jA
+- fp.skiView: IQ again: https://www.shadertoy.com/view/XdjXDK
+- Planet Shadertoy: by reinder: https://www.shadertoy.com/view/4tjGRh
 
-- ### An animated environment / music visualizer
-  * Create an environment full of interactive procedural animation. The goal of this project is to create an environment that feels responsive and alive. Whether or not animations are musically-driven, sound should be an important component. Focus on user interactions, motion design and experimental interfaces.
-  * Examples: [Panoramical](https://www.youtube.com/watch?v=gBTTMNFXHTk), [Bound](https://www.youtube.com/watch?v=aE37l6RvF-c)
-- ### Own proposal
-  * You are of course **welcome to propose your own topic**. Regardless of what you choose, you and your team must research your topic and relevant techniques and come up with a detailed plan of execution. You will meet with some subset of the procedural staff before starting implementation for approval. 
+### Specification
+Our final product would feature:
+- Procedurally generated terrain.
+- Procedurally generated texture for the terrain.
+- Varying levels of detail for the terrain and the textures based on the distance of the camera from the terrain.
+- Web server serving the content to Cesium.
 
-**Final grading will be individual** and will be based on both the final product and how well you were able to achieve your intended effect according to your execution plan. Plans change of course, and we don’t expect you to follow your execution plan to a T, but if your final project looks pretty good, but you cut corners and only did 30% of what you outlined in your design doc, you will be penalized.
+### Techniques
 
-But overall, have fun! This is your opportunity to work on whatever procedural project inspires you. The best way to ensure a good result is to pick something you’re passionate about. :)
+#### Terrain Generation
+1. For the procedural terrain generation part we are planning to make a 3D height field using pseudorandom perlin noise that will be divided into a set of tiles to discretise the terrain creation.
 
-## Timeline
+![](./images/dd_img2.png)
+![](./images/dd_img3.png)
+![](./images/dd_img4.jpg)
 
-- 4/08	Design doc due / Have met with procedural staff
-- 4/18	Milestone 1 (short write-up + demo)
-- 4/25	Milestone 2 (short write-up + demo)
-- 5/3	Final presentations (3-5 pm, Siglab), final reports due
+2. Another method for obtaining the initial seed values for the terrain can be generated using various fractal patterns as mentioned below.
 
-## Design Doc
+3. Using the seed random data converted to a 2D array, we will apply the Diamond-Square algorithm to procedurally generate and tessellate the terrain with realistic looking mountain, valleys and rough terrain.
 
-Your design doc should follow the following template. Note, each section can be pretty short, but cover them all! This will serve as valuable documentation when showing this project off in the future AND doing a good job will make it much easier for you to succeed, so please take this seriously.
+![](./images/dd_img5.gif)
+![](./images/dd_img6.gif)
 
-### Design Doc Template:
+4. Another approach that can be used to generate the terrain would be as mentioned in this article [[1]](http://www-cs-students.stanford.edu/~amitp/game-programming/polygon-map-generation/) using voronoi patterns. We don’t exactly know how cesium tiling works and how we can use this methods to procedurally generate more definition in the terrain as the level of detail increases. We will get a better idea on which methods are feasible to use once we get an understanding on how cesium works.
 
-- #### Introduction
-  * What motivates this project?
-- #### Goal
-  * What do you intend to achieve with this project?
-- #### Inspiration/reference: 
-  * Attach some materials, visual or otherwise you intend as reference
-- #### Specification:
-  * Outline the main features of your project
-- #### Techniques:
-  * What are the main technical/algorithmic tools you’ll be using? Give an overview, citing  specific papers/articles
-- #### Design:
-  * How will your program fit together? Make a simple free-body diagram illustrating the pieces.
-- #### Timeline:
-  * Create a week-by-week set of milestones for each person in your group.
+#### Texture Generation
+We will be working on multiple texture generation algorithms to achieve different terrain effects.
 
+1. Fractals: This can be used if the finer details are to be added to coarser images, as fractals are repetitive. Also, we can get other cool terrain features like rivers using fractals.
 
-Along with your final project demo, you will submit a final report, in which you will update correct your original design doc as needed and add a few post-mortem items.
+2. Voronoi patterns / Cell noise / Worley noise: To achieve a dry land kind of effect, one of these methods will be used. These can also be used for texturing stones.
 
-## Milestones
+![](./images/dd_img7.jpg)
 
-To keep you honest / on-track, we will be checking on your progress at weekly intervals, according to milestones you’ll define at the outset (pending our approval). For each of the two milestones prior to the final submission, you will submit a short write up explaining whether or not you individually achieved your goals (specifying the files where the work happened), along with a link to a demo / images. These don’t have to be super polished -- we just want to see that you’re getting things done.
+3. Ridged fractal/perlin noise: This will be used for creating smoother looking textures like desert or snow, and for blending the textures. This is very similar to the original Perlin noise algorithm, with some modifications [[2]](http://www.inear.se/2010/04/ridged-perlin-noise). We will be using either one of those. Examples of ridged fractal noise textures:
 
-Example:
+![](./images/dd_img8.jpg)
+![](./images/dd_img9.jpg)
+![](./images/dd_img10.jpg)
 
-“Milestone 1:
-	Adam:
-Made some procedural terrain code in src/terrain.js. Implemented 3D simplex noise to do it. Also applied coloring via custom shader based on this cool paper X (see src/shaders/dirt.glsl). IMAGE
+4. Blending different textures for smoother transition. Dirt and snow on mountains, sand and water on beaches, etc. don’t have hard edges. We don’t have a proper idea of what the best method would be to achieve this. There are some articles describing the use of height maps to do this [[3]](http://www.cprogramming.com/discussionarticles/texture_generation.html). We will get a better idea about this as we begin working on the generation algorithms.
 
-Austin: 
-I managed to set up my voronoi diagram shader (see src/shaders/voronoi.glsl). 
-Experimented with different scattering techniques. It’s working with the euclidean distance metric. I’m using it in src/main.js to color stones. IMAGE
+5. Since we are aiming for realistic images, we would like to explore Whittaker diagram for biomes of multiple terrain types [[4]](https://w3.marietta.edu/~biol/biomes/biome_main.htm), if time permits. It uses data like temperature and humidity to define biomes.
 
-Rachel:
-I tried really hard to make my toon shader work (src/shaders/toon.glsl), but I still have a bug! T_T BUGGY IMAGE. DEMO LINK”
-
-## Final Report
-
-In addition to your demo, you will create a final report documenting your project overall. This document should be clear enough to explain the value and details of your project to a random computer graphics person with no knowledge of this class.
-
-### Final Report Template:
-
-- #### Updated design doc: 
-  * All the sections of your original design doc, corrected if necessary
-- #### Results:
-  * Provide images of your finished project
-- #### Evaluation (this is a big one!):
-  * How well did you do? What parameters did you tune along the way? Include some WIP shots that compare intermediate results to your final. Explain why you made the decisions you did.
-- #### Future work:
-  * Given more time, what would you add/improve
-- #### Acknowledgements:
-  * Cite _EVERYTHING_. Implemented a paper? Used some royalty-free music? Talked to classmates / a professor in a way that influenced your project? Attribute everything!
-
-## Logistics
-
-Like every prior project, your code will be submitted via github. Fork the empty final project repo and start your code base from there. Take this as an opportunity to practice using git properly in a team setting if you’re a new user.  For each weekly submission, provide a link to your pull request. Your repo will contain all the code and documentation associated with your project. The readme for your repo will eventually be your final report. At the top level, include a folder called “documentation”, where you’ll put your design doc and milestone write-ups.
-
-Don’t wait to merge your code! Seriously, there be dragons. Try to have a working version including all your code so that compatibility and merge issues don’t sneak up on you near the end.
-
-## Grading
-
-- 15% Design Doc (graded as a group)
-- 15% Milestone 1 (graded as a group)
-- 15% Milestone 2 (graded as a group)
-- 55% Final demo + report (graded individually)
-
-NOTE: We’ve been pretty lax about our late policy throughout the semester, but our margins on the final project are tight, therefore late submissions will NOT be accepted. If you have a significant reason for being unable to complete your goals, talk to us, and we’ll discuss getting you an incomplete and figure out an adjusted work plan with your group.
+### Design
+As stated before, Cesium obtains tiles from the server. We will be creating a web server that provides the 3D tile content.
 
+![](./images/dd_img11.png)
 
+### Timeline
+- 09 April - 15 April
+    - Rishabh & Rudraksha: Getting the server part working.
+    - Rishabh: Start with ridged fractal/perlin noise.
+    - Rudraksha: Understand the tiling method used by cesium to start working on the terrain generation.
+- 16 April - 22 April
+    - Rishabh: Complete ridged fractal/perlin noise and start with Voronoi / fractals depending on the terrain types that are going to be generated.
+    - Rudraksha: Generate the terrain height field data and pack it in the .gltf format for output to cesium.
+- 23 April - 29 April
+    - Rishabh: Complete all the texture generation part. Work on the blending of textures if not already taken care of while implementing the generation.
+    - Rudraksha: Finish any remaining details and merge the code.
+- 30 April - 03 May
+    - Time buffer.
diff --git a/images/DS.png b/images/DS.png
diff --git a/images/IV.png b/images/IV.png
diff --git a/images/SS.png b/images/SS.png
diff --git a/images/T1.png b/images/T1.png
diff --git a/images/T2.png b/images/T2.png
diff --git a/images/WFT1.png b/images/WFT1.png
diff --git a/images/WFT2.png b/images/WFT2.png
diff --git a/images/dd_img1.jpg b/images/dd_img1.jpg
diff --git a/images/dd_img10.jpg b/images/dd_img10.jpg
diff --git a/images/dd_img11.png b/images/dd_img11.png
diff --git a/images/dd_img2.png b/images/dd_img2.png
diff --git a/images/dd_img3.png b/images/dd_img3.png
diff --git a/images/dd_img4.jpg b/images/dd_img4.jpg
diff --git a/images/dd_img5.gif b/images/dd_img5.gif
diff --git a/images/dd_img6.gif b/images/dd_img6.gif
diff --git a/images/dd_img7.jpg b/images/dd_img7.jpg
diff --git a/images/dd_img8.jpg b/images/dd_img8.jpg
diff --git a/images/dd_img9.jpg b/images/dd_img9.jpg
diff --git a/images/m1-abs_value_noise.PNG b/images/m1-abs_value_noise.PNG
diff --git a/images/m1-ridged_value_noise.PNG b/images/m1-ridged_value_noise.PNG
diff --git a/images/m1-texture1.PNG b/images/m1-texture1.PNG
diff --git a/images/m1-texture2.PNG b/images/m1-texture2.PNG
diff --git a/images/m1-value_2nd_derivative.PNG b/images/m1-value_2nd_derivative.PNG
diff --git a/images/m1-value_noise.PNG b/images/m1-value_noise.PNG
diff --git a/images/presentation/Screenshot (25)(1).png b/images/presentation/Screenshot (25)(1).png
diff --git a/images/presentation/Screenshot_1.png b/images/presentation/Screenshot_1.png
diff --git a/images/presentation/coarse_bounding.png b/images/presentation/coarse_bounding.png
diff --git a/images/presentation/coarse_wire.png b/images/presentation/coarse_wire.png
diff --git a/images/presentation/final_base.png b/images/presentation/final_base.png
diff --git a/images/presentation/final_base_green.png b/images/presentation/final_base_green.png
diff --git a/images/presentation/final_base_green_voro.png b/images/presentation/final_base_green_voro.png
diff --git a/images/presentation/final_base_green_voro_snow.png b/images/presentation/final_base_green_voro_snow.png
diff --git a/images/presentation/final_img.png b/images/presentation/final_img.png
diff --git a/images/presentation/final_shaded.png b/images/presentation/final_shaded.png
diff --git a/images/presentation/final_value.png b/images/presentation/final_value.png
diff --git a/images/presentation/fine_bounding.png b/images/presentation/fine_bounding.png
diff --git a/images/presentation/fine_flat.png b/images/presentation/fine_flat.png
diff --git a/images/presentation/fine_shaded.png b/images/presentation/fine_shaded.png
diff --git a/images/presentation/fine_wire.png b/images/presentation/fine_wire.png
diff --git a/images/presentation/sine_noise.png b/images/presentation/sine_noise.png
diff --git a/images/presentation/value.png b/images/presentation/value.png
diff --git a/images/presentation/value_abs.png b/images/presentation/value_abs.png
diff --git a/images/presentation/value_ridged.png b/images/presentation/value_ridged.png
diff --git a/images/presentation/voro.png b/images/presentation/voro.png
diff --git a/images/presentation/voro_diff.png b/images/presentation/voro_diff.png
diff --git a/images/presentation/voro_mul.png b/images/presentation/voro_mul.png
diff --git a/images/presentation/voro_mul_small.png b/images/presentation/voro_mul_small.png
diff --git a/images/presentation/voro_v0xv1.png b/images/presentation/voro_v0xv1.png
diff --git a/images/report/increase_detail.gif b/images/report/increase_detail.gif
diff --git a/images/report/terrain/Screen Shot 2017-04-30 at 7.40.35 PM.png b/images/report/terrain/Screen Shot 2017-04-30 at 7.40.35 PM.png
diff --git a/images/report/terrain/Screen Shot 2017-04-30 at 7.40.53 PM.png b/images/report/terrain/Screen Shot 2017-04-30 at 7.40.53 PM.png
diff --git a/images/report/terrain/Screen Shot 2017-04-30 at 7.41.00 PM.png b/images/report/terrain/Screen Shot 2017-04-30 at 7.41.00 PM.png
diff --git a/images/report/terrain/Screen Shot 2017-04-30 at 7.41.10 PM.png b/images/report/terrain/Screen Shot 2017-04-30 at 7.41.10 PM.png
diff --git a/images/report/terrain/Screen Shot 2017-04-30 at 7.41.35 PM.png b/images/report/terrain/Screen Shot 2017-04-30 at 7.41.35 PM.png
diff --git a/images/report/terrain/Screen Shot 2017-05-01 at 1.45.20 PM.png b/images/report/terrain/Screen Shot 2017-05-01 at 1.45.20 PM.png
diff --git a/images/report/terrain/Screen Shot 2017-05-01 at 1.45.27 PM.png b/images/report/terrain/Screen Shot 2017-05-01 at 1.45.27 PM.png
diff --git a/images/report/terrain/Screen Shot 2017-05-01 at 1.46.06 PM.png b/images/report/terrain/Screen Shot 2017-05-01 at 1.46.06 PM.png
diff --git a/images/report/terrain/Screen Shot 2017-05-02 at 1.11.27 PM.png b/images/report/terrain/Screen Shot 2017-05-02 at 1.11.27 PM.png
diff --git a/images/report/terrain/Screen Shot 2017-05-02 at 1.11.34 PM.png b/images/report/terrain/Screen Shot 2017-05-02 at 1.11.34 PM.png
diff --git a/images/report/terrain/Screen Shot 2017-05-02 at 1.11.48 PM.png b/images/report/terrain/Screen Shot 2017-05-02 at 1.11.48 PM.png
diff --git a/images/report/terrain/Screen Shot 2017-05-02 at 2.16.27 PM.png b/images/report/terrain/Screen Shot 2017-05-02 at 2.16.27 PM.png
diff --git a/images/report/terrain/Screen Shot 2017-05-03 at 11.52.39 AM.png b/images/report/terrain/Screen Shot 2017-05-03 at 11.52.39 AM.png
diff --git a/images/report/terrain/Screen Shot 2017-05-03 at 11.53.14 AM.png b/images/report/terrain/Screen Shot 2017-05-03 at 11.53.14 AM.png
diff --git a/images/report/terrain/Screen Shot 2017-05-03 at 11.53.43 AM.png b/images/report/terrain/Screen Shot 2017-05-03 at 11.53.43 AM.png
diff --git a/images/report/terrain/Tile_Terrain_W_N_S.png b/images/report/terrain/Tile_Terrain_W_N_S.png
diff --git a/images/report/terrain/Tile_terrain_W_N.png b/images/report/terrain/Tile_terrain_W_N.png
diff --git a/images/report/terrain/Tile_terrain_W_textured.png b/images/report/terrain/Tile_terrain_W_textured.png
diff --git a/images/report/terrain/Tile_terrain_Wo_N.png b/images/report/terrain/Tile_terrain_Wo_N.png
diff --git a/images/report/terrainimg.png b/images/report/terrainimg.png
diff --git a/images/report/texture.gif b/images/report/texture.gif
diff --git a/images/report/textureimg.png b/images/report/textureimg.png
diff --git a/images/shadercesium.gif b/images/shadercesium.gif
diff --git a/images/sinenoise.gif b/images/sinenoise.gif
diff --git a/milestone reports/milestone1.md b/milestone reports/milestone1.md
@@ -0,0 +1,76 @@
+### Milestone-1 Report:
+
+### Rishabh
+
+- I tried setting up Cesium and the server we will be using to send the data to cesium. I spent an entire day trying to get cesium to work but it just won't. So I downloaded an older version, and it worked. But I still can't get the server to work. So for now, my code is in [this](https://github.com/rms13/Project1-Noise) repo. Rudraksha is looking into the server issue.
+
+- `shaders/mountain-frag.glsl` fragment shader contains the shader that textures the mountain. Value Noise algorithm is used as the noise generator. It is a slightly modified version (the noise function and the matrices are different) of what IQ shows [here](http://www.iquilezles.org/www/articles/morenoise/morenoise.htm). The derivatives of noise are used to simulate erosion effects. It still needs some work.
+
+- `shaders/mountain-vert.glsl` vertex shader uses Ridged Value Noise to model mountains. This is *not* the terrain we will be using for the final version. It's used only for testing the texture. The terrain part (using Diamond Square algorithm) is being done by [Rudraksha](https://github.com/rudraksha20).
+
+- Demo: https://github.com/rms13/Project1-Noise
+
+#### Example images:
+
+Value noise:
+
+![](../images/m1-value_noise.PNG)
+
+Absolute value noise:
+
+![](../images/m1-abs_value_noise.PNG)
+
+Ridged value noise:
+
+![](../images/m1-ridged_value_noise.PNG)
+
+2nd derivative of value noise:
+
+![](../images/m1-value_2nd_derivative.PNG)
+
+Example texture:
+
+![](../images/m1-texture1.PNG)
+
+Example texture with terrain:
+
+![](../images/m1-texture2.PNG)
+
+
+### Rudraksha Shah
+
+#### Procedural Terrain:
+
+`Main.js:` contains the implementation of the Diamond Square algorithm that I have implemented to procedurally generate the terrain.
+
+`TODO:` I am working on improving the terrain structure and removing the artifacts created by the random number and the diamond square algorithm.
+
+`Diamond Square Algorithm:` consists of the following main steps
+
+- Initial Grid:
+
+![](../images/IV.png)
+
+- The Diamond Step
+
+![](../images/DS.png)
+
+- The Square Step
+
+![](../images/SS.png)
+
+
+
+### Tessellated Terrain Mesh Images:
+
+![](../images/T1.png)
+
+![](../images/T2.png)
+
+### Tessellated Terrain WireFrame Images:
+
+![](../images/WFT1.png)
+
+![](../images/WFT2.png)
+
+- Demo: https://rudraksha20.github.io/Final-Project/
diff --git a/milestone reports/milestone2.md b/milestone reports/milestone2.md
@@ -0,0 +1,36 @@
+### Milestone-2 Report:
+
+### Rishabh
+
+- Finally we have the server thanks to Austin!! We haven't merged our code, so it is not yet deployed. The texture does not become more defined as you go closer as I have hardcoded the number of octaves. I will be changing them based on the viewer distance to change the levels of detail.
+
+![](../images/shadercesium.gif)
+
+
+- `shaders/sinenoise-frag.glsl` fragment shader is an accidental marble texture that I did not intend to make.
+
+    I found articles on warping noise functions with other noise functions while looking up Voronoi diagrams. I thought I could use the Ridged noise with just sine functions to get cool streams and rivers. [cegaton](https://blender.stackexchange.com/questions/45892/is-it-possible-to-distort-a-voronoi-texture-like-the-wave-textures-distortion-sl) does it using voronoise.
+
+    So I tried it, and It looks more like marble than rivers. I don't think it will work for this project.
+
+    I am still understanding voronoise and how to integrate it to the texture I already have.
+
+![](../images/sinenoise.gif)
+
+- Demo (of marble texture): https://rms13.github.io/Project1-Noise
+- Source: https://github.com/rms13/Project1-Noise
+
+
+### Rudraksha Shah
+
+
+
+- With the server working (thanks to Austin!) I worked on setting up the tiles of the sphere to procedurally generate the terrain andf render it out per tile. I was able to get the terrain (though flat) to show up instead of each tile but I am having issues with the normals which is why I do not have any Images to show as mostly everything looks black without shading.
+
+
+
+- Also as the code is not working correctly I have not pushed it to git will do as soon as I get it up and running.
+
+
+
+- For the future I will work on either gerenating the terrain with spherical coordinates as is the way Austin has gave us the implementation or will change the code to render a flat 2D plane which renders tiles which I will use to render the terrain.
diff --git a/source/demo/index.html b/source/demo/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<head>
+    <script src="/Cesium/Cesium.js"></script>
+    <link rel="stylesheet" type="text/css" href="/Cesium/Widgets/widgets.css">
+    <style>
+        #cesiumContainer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            overflow: hidden;
+            padding: 0;
+            font-family: sans-serif;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="cesiumContainer"></div>
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/source/demo/main.js b/source/demo/main.js
@@ -0,0 +1,18 @@
+
+/*global Cesium*/
+
+var viewer = new Cesium.Viewer('cesiumContainer', {
+
+});
+
+var scene = viewer.scene;
+scene.globe.show = false;
+
+var tileset = new Cesium.Cesium3DTileset({
+    url: '/'
+});
+
+scene.primitives.add(tileset);
+
+viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
+viewer.cesium3DTilesInspector.viewModel.tileset = tileset;
diff --git a/source/package.json b/source/package.json
@@ -0,0 +1,22 @@
+{
+  "scripts": {
+    "start": "nodemon server.js --ignore example/",
+    "serve": "node server.js",
+    "postinstall": "cd cesium && npm install",
+    "build": "cd cesium && npm run release"
+  },
+  "dependencies": {
+    "3d-tiles-tools": "^0.1.2",
+    "cesium": "^1.32.1",
+    "compression": "^1.6.2",
+    "express": "^4.15.2",
+    "gltf-pipeline": "0.1.0-alpha11",
+    "morgan": "^1.8.1",
+    "three": "^0.85.2",
+    "yargs": "^7.0.2"
+  },
+  "devDependencies": {
+    "gh-pages-deploy": "^0.4.2",
+    "nodemon": "^1.11.0"
+  }
+}