Procedural city demo

mantinha · May 26, 2013 · a646439 · a646439
1 parent 4891aa2
commit a646439
Show file tree

Hide file tree

Showing 7 changed files with 661 additions and 65 deletions.
diff --git a/examples/ex/demos/city.html b/examples/ex/demos/city.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>SceneJS Example</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+
+    <style>
+        body {
+            background: white;
+            margin: 0;
+            -moz-user-select: -moz-none;
+            -khtml-user-select: none;
+            -webkit-user-select: none;
+        }
+    </style>
+</head>
+<body>
+
+<script src="../../../build/latest/scenejs.js"></script>
+<script src="../../../build/latest/extras/orbitControl.js"></script>
+
+<script src="../../models/wireGrid.js"></script>
+<script src="../../libs/cityBuilder.js"></script>
+
+
+<script>
+
+    var cityBuilder = new CityBuilder({
+        texturePath:"../../textures/city"
+    });
+
+    // Point SceneJS to the bundled plugins
+    SceneJS.setDebugConfigs({
+        pluginPath:"../../../build/latest/plugins"
+    });
+
+    var scene = SceneJS.createScene({
+        nodes:[
+            wireGrid,
+            {
+                type:"node",
+                id:"cityGoesHere"
+            },
+
+            //--------------------------------------------------------------------------------
+            // Sky box
+            //--------------------------------------------------------------------------------
+
+            // Shader node, injects custom function into the vertex shader
+            // to intercept the View matrix and remove translation terms from it.
+            // This anchors the sky box, preventing it from translating
+            // as we move the eye position.
+            {
+                type:"shader",
+                shaders:[
+                    {
+                        stage:"vertex",
+                        code:[
+                            "mat4 myViewMatrix(mat4 m) {",
+                            "   m[3][0] =m[3][1] = m[3][2] = 0.0;",
+                            "return m;",
+                            "}"
+                        ],
+                        // Bind our injected functions to SceneJS hook points
+                        hooks:{
+                            viewMatrix:"myViewMatrix"
+                        }
+                    }
+                ],
+                nodes:[
+
+                    // Disable lighting for the sky box
+                    {
+                        type:"flags",
+                        flags:{
+                            specular:false,
+                            diffuse:false,
+                            ambient:false
+                        },
+                        nodes:[
+
+                            {
+                                type:"material",
+                                color:{ r:0, g:0, b:0  },
+                                emit:0.0,
+                                nodes:[
+                                    // Clouds texture
+                                    {
+                                        type:"texture",
+                                        layers:[
+                                            {
+                                                src:"../../textures/clouds-box.jpg",
+                                                blendMode:"add"
+                                            }
+                                        ],
+                                        nodes:[
+                                            {
+                                                type:"scale",
+                                                x:1000,
+                                                y:1000,
+                                                z:1000,
+                                                nodes:[
+                                                    // Sky box geometry
+                                                    {
+                                                        type:"geometry",
+                                                        source:{
+                                                            type:"skybox"
+                                                        }
+                                                    }
+                                                ]
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    });
+
+    cityBuilder.build(
+            scene.getNode("cityGoesHere"), {
+                xPos:0,
+                zPos:0,
+                xBuildings:15,
+                zBuildings:15,
+                xWidth:800,
+                zWidth:800
+            });
+
+    new SceneJS.OrbitControls(scene, {
+        yaw:-100,
+        pitch:-10,
+        zoom:400,
+        zoomSensitivity:5.0,
+        eye:{ y:40 },
+        look:{ y:40 }
+    });
+
+</script>
+</body>
+</html>
diff --git a/examples/ex/index.json b/examples/ex/index.json
@@ -849,7 +849,13 @@
                         "tags":["fragmentShader", "vertexShader", "lighting", "modelTransform", "viewTransform", "animation"],
                         "id":"tronTank"
                     },
-
+                    {
+                        "title":"Procedural City",
+                        "path":"demos/city.html",
+                        "editor":false,
+                        "tags":[],
+                        "id":"city"
+                    },
                     {
                         "title":"Bubbles",
                         "path":"demos/bubbles.html",

diff --git a/examples/ex/shaders/vertex/skybox.html b/examples/ex/shaders/vertex/skybox.html
@@ -24,6 +24,69 @@
     var scene = SceneJS.createScene({
         nodes:[
 
+            // Sky box
+            {
+                type:"shader",
+                shaders:[
+                    {
+                        stage:"vertex",
+                        code:[
+                            "mat4 myViewMatrix(mat4 m) {",
+                            "   m[3][0] =m[3][1] = m[3][2] = 0.0;",
+                            "return m;",
+                            "}"
+                        ],
+                        hooks:{
+                            viewMatrix:"myViewMatrix"
+                        }
+                    }
+                ],
+                nodes:[
+                    {
+                        type:"flags",
+                        flags:{
+                            specular:false,
+                            diffuse:false,
+                            ambient:false
+                        },
+                        nodes:[
+                            {
+                                type:"material",
+                                color:{ r:1, g:1, b:1  },
+                                emit:0.0,
+                                nodes:[
+                                    {
+                                        type:"texture",
+                                        layers:[
+                                            {
+                                                src:"../../../textures/clouds-box.jpg",
+                                                blendMode:"multiply"
+                                            }
+                                        ],
+                                        nodes:[
+                                            {
+                                                type:"scale",
+                                                x:1000,
+                                                y:1000,
+                                                z:1000,
+                                                nodes:[
+                                                    {
+                                                        type:"geometry",
+                                                        source:{
+                                                            type:"skybox"
+                                                        }
+                                                    }
+                                                ]
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            },
+
             // Torus and ground
 
             {
@@ -106,70 +169,6 @@
                         ]
                     }
                 ]
-            },
-
-            // Sky box
-
-            {
-                type:"shader",
-                shaders:[
-                    {
-                        stage:"vertex",
-                        code:[
-                            "mat4 myViewMatrix(mat4 m) {",
-                            "   m[3][0] =m[3][1] = m[3][2] = 0.0;",
-                            "return m;",
-                            "}"
-                        ],
-                        hooks:{
-                            viewMatrix:"myViewMatrix"
-                        }
-                    }
-                ],
-                nodes:[
-                    {
-                        type:"flags",
-                        flags:{
-                            specular:false,
-                            diffuse:false,
-                            ambient:false
-                        },
-                        nodes:[
-                            {
-                                type:"material",
-                                color:{ r:1, g:1, b:1  },
-                                emit:0.0,
-                                nodes:[
-                                    {
-                                        type:"texture",
-                                        layers:[
-                                            {
-                                                src:"../../../textures/clouds-box.jpg",
-                                                blendMode:"multiply"
-                                            }
-                                        ],
-                                        nodes:[
-                                            {
-                                                type:"scale",
-                                                x:1000,
-                                                y:1000,
-                                                z:1000,
-                                                nodes:[
-                                                    {
-                                                        type:"geometry",
-                                                        source:{
-                                                            type:"skybox"
-                                                        }
-                                                    }
-                                                ]
-                                            }
-                                        ]
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
             }
         ]
     });