scenejs_on_rails 1.0.0 → 1.0.1

data/vendor/assets/javascripts/scenejs_plugins/node/skyboxes/clouds.js

@@ -0,0 +1,19 @@
+/**
+ * Cloudy skybox node type, with fine clouds
+ *
+ * Usage example:
+ *
+ * someNode.addNode({
+ *      type: "skyboxes/clouds"
+ *  });
+ */
+SceneJS.Types.addType("skyboxes/clouds", {
+    construct:function (params) {
+
+        // Wraps a 'custom' skybox node type, passing in a clouds texture
+        this.addNode({
+            type:"skyboxes/custom",
+            src:SceneJS.getConfigs("pluginPath") + "/node/skyboxes/textures/clouds.jpg"
+        })
+    }
+});

data/vendor/assets/javascripts/scenejs_plugins/node/skyboxes/cloudySea.js

@@ -0,0 +1,19 @@
+/**
+ * Cloudy skybox node type, with clouds reflected in a calm sea
+ *
+ * Usage example:
+ *
+ * someNode.addNode({
+ *      type: "skyboxes/cloudySea"
+ *  });
+ */
+SceneJS.Types.addType("skyboxes/cloudySea", {
+    construct:function (params) {
+
+        // Wraps a 'custom' skybox node type, passing in a cloudySea texture
+        this.addNode({
+            type:"skyboxes/custom",
+            src:SceneJS.getConfigs("pluginPath") + "/node/skyboxes/textures/cloudySea.jpg"
+        })
+    }
+});

data/vendor/assets/javascripts/scenejs_plugins/node/skyboxes/custom.js

@@ -0,0 +1,150 @@
+/**
+ * Customizable skybox node type, which allows you to customize its texture
+ *
+ * Usage example:
+ *
+ * someNode.addNode({
+ *      type: "skyboxes/custom",
+ *      texture: "foo/bar/mySkyboxTexture.jpg",
+ *      size: 5000 // Box half-size on each axis - default is 5000
+ *  });
+ */
+SceneJS.Types.addType("skyboxes/custom", {
+
+    // TODO: expose node props to tweak the geometry coords to map to variations in texture UV mappings?
+
+    construct:function (params) {
+
+        // Fall back on clouds texture by default
+        var src = params.src || SceneJS.getConfigs("pluginPath") + "/node/skyboxes/textures/clouds.jpg";
+
+        // Sky box dimensions on each axis
+        var size = params.size || 5000.0;
+
+        // Vertex shader which anchors the skybox translation
+        this.addNode({
+
+            // Special pick name so that we can ignore picks on sky boxes
+            type:"name",
+            name:"__SceneJS_dontPickMe",
+
+            nodes:[
+                {
+                    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:src,
+                                                    blendMode:"add"
+                                                }
+                                            ],
+                                            nodes:[
+                                                {
+                                                    type:"scale",
+                                                    x:size, y:size, z:size,
+                                                    nodes:[
+                                                        // Sky box geometry
+                                                        {
+                                                            type:"geometry",
+                                                            positions:[
+                                                                1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, // v0-v1-v2-v3 front
+                                                                1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, // v0-v3-v4-v5 right
+                                                                1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, // v0-v5-v6-v1 top
+                                                                -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, // v1-v6-v7-v2 left
+                                                                -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, // v7-v4-v3-v2 bottom
+                                                                1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1 // v4-v7-v6-v5 back
+                                                            ],
+                                                            uv:[
+                                                                0.5, 0.6666,
+                                                                0.25, 0.6666,
+                                                                0.25, 0.3333,
+                                                                0.5, 0.3333,
+
+                                                                0.5, 0.6666,
+                                                                0.5, 0.3333,
+                                                                0.75, 0.3333,
+                                                                0.75, 0.6666,
+
+                                                                0.5, 0.6666,
+                                                                0.5, 1,
+                                                                0.25, 1,
+                                                                0.25, 0.6666,
+
+                                                                0.25, 0.6666,
+                                                                0.0, 0.6666,
+                                                                0.0, 0.3333,
+                                                                0.25, 0.3333,
+
+                                                                0.25, 0,
+                                                                0.50, 0,
+                                                                0.50, 0.3333,
+                                                                0.25, 0.3333,
+
+                                                                0.75, 0.3333,
+                                                                1.0, 0.3333,
+                                                                1.0, 0.6666,
+                                                                0.75, 0.6666
+                                                            ],
+                                                            indices:[
+                                                                0, 1, 2,
+                                                                0, 2, 3,
+                                                                4, 5, 6,
+                                                                4, 6, 7,
+                                                                8, 9, 10,
+                                                                8, 10, 11,
+                                                                12, 13, 14,
+                                                                12, 14, 15,
+
+                                                                16, 17, 18,
+                                                                16, 18, 19,
+
+                                                                20, 21, 22,
+                                                                20, 22, 23
+                                                            ]
+                                                        }
+                                                    ]
+                                                }
+                                            ]
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        })
+    }
+});

data/vendor/assets/javascripts/scenejs_plugins/node/skyboxes/grimmNight.js

@@ -0,0 +1,19 @@
+/**
+ * Skybox node type, with gloomy night clouds
+ *
+ * Usage example:
+ *
+ * someNode.addNode({
+ *      type: "skyboxes/grimmNight"
+ *  });
+ */
+SceneJS.Types.addType("skyboxes/grimmNight", {
+    construct:function (params) {
+
+        // Wraps a 'custom' skybox node type, passing in a the grimmNight texture
+        this.addNode({
+            type:"skyboxes/custom",
+            src:SceneJS.getConfigs("pluginPath") + "/node/skyboxes/textures/grimmNight.jpg"
+        })
+    }
+});

data/vendor/assets/javascripts/scenejs_plugins/node/skyboxes/interstellarClouds.js

@@ -0,0 +1,19 @@
+/**
+ * Skybox node type, with an interstellar cloudy background
+ *
+ * Usage example:
+ *
+ * someNode.addNode({
+ *      type: "skyboxes/interstellarClouds"
+ *  });
+ */
+SceneJS.Types.addType("skyboxes/interstellarClouds", {
+    construct:function (params) {
+
+        // Wraps a 'custom' skybox node type, passing in the interstellarClouds texture
+        this.addNode({
+            type:"skyboxes/custom",
+            src:SceneJS.getConfigs("pluginPath") + "/node/skyboxes/textures/interstellarClouds.jpg"
+        })
+    }
+});

data/vendor/assets/javascripts/scenejs_plugins/node/skyboxes/miramarClouds.js

@@ -0,0 +1,19 @@
+/**
+ * Skybox node type, with a cloudy Miramar beachscape background
+ *
+ * Usage example:
+ *
+ * someNode.addNode({
+ *      type: "skyboxes/miramarClouds"
+ *  });
+ */
+SceneJS.Types.addType("skyboxes/miramarClouds", {
+    construct:function (params) {
+
+        // Wraps a 'custom' skybox node type, passing in the miramarClouds texture
+        this.addNode({
+            type:"skyboxes/custom",
+            src:SceneJS.getConfigs("pluginPath") + "/node/skyboxes/textures/miramarClouds.jpg"
+        })
+    }
+});

data/vendor/assets/javascripts/scenejs_plugins/node/skyboxes/stormyDays.js

@@ -0,0 +1,19 @@
+/**
+ * Skybox node type, with stormy clouds
+ *
+ * Usage example:
+ *
+ * someNode.addNode({
+ *      type: "skyboxes/stormyDays"
+ *  });
+ */
+SceneJS.Types.addType("skyboxes/stormyDays", {
+    construct:function (params) {
+
+        // Wraps a 'custom' skybox node type, passing in the stormyDays texture
+        this.addNode({
+            type:"skyboxes/custom",
+            src:SceneJS.getConfigs("pluginPath") + "/node/skyboxes/textures/stormyDays.jpg"
+        })
+    }
+});

data/vendor/assets/javascripts/scenejs_plugins/node/skyboxes/violentDays.js

@@ -0,0 +1,19 @@
+/**
+ * Skybox node type, with firey apocalyptic clouds
+ *
+ * Usage example:
+ *
+ * someNode.addNode({
+ *      type: "skyboxes/violentDays"
+ *  });
+ */
+SceneJS.Types.addType("skyboxes/violentDays", {
+    construct:function (params) {
+
+        // Wraps a 'custom' skybox node type, passing in the violentDays texture
+        this.addNode({
+            type:"skyboxes/custom",
+            src:SceneJS.getConfigs("pluginPath") + "/node/skyboxes/textures/violentDays.jpg"
+        })
+    }
+});

data/vendor/assets/javascripts/scenejs_plugins/texture/image.js

@@ -0,0 +1,67 @@
+SceneJS.Plugins.addPlugin(
+
+    "texture",
+    "image",
+
+    new (function () {
+
+        this.getSource = function (params) {
+
+            var gl = params.gl;
+            var texture = gl.createTexture();
+            var publish;
+
+            return {
+                subscribe:function (fn) {
+                    publish = fn;
+                },
+                configure:function (cfg) {
+                    if (!cfg.src) {
+                        throw "Parameter expected: 'src'";
+                    }
+                    var image = new Image();
+                    image.crossOrigin = "anonymous";
+                    image.onload = function () {
+                        gl.bindTexture(gl.TEXTURE_2D, texture);
+                        var potImage = ensureImageSizePowerOfTwo(image); // WebGL hates NPOT images
+                        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, potImage);
+                        if (publish) {
+                            publish(texture);
+                        }
+                    };
+                    image.src = cfg.src;
+                },
+
+                destroy:function () { // TODO
+                }
+            };
+        };
+
+        function ensureImageSizePowerOfTwo(image) {
+            if (!isPowerOfTwo(image.width) || !isPowerOfTwo(image.height)) {
+                var canvas = document.createElement("canvas");
+                canvas.width = nextHighestPowerOfTwo(image.width);
+                canvas.height = nextHighestPowerOfTwo(image.height);
+                var ctx = canvas.getContext("2d");
+                ctx.drawImage(image,
+                    0, 0, image.width, image.height,
+                    0, 0, canvas.width, canvas.height);
+                image = canvas;
+            }
+            return image;
+        }
+
+        function isPowerOfTwo(x) {
+            return (x & (x - 1)) == 0;
+        }
+
+        function nextHighestPowerOfTwo(x) {
+            --x;
+            for (var i = 1; i < 32; i <<= 1) {
+                x = x | x >> i;
+            }
+            return x + 1;
+        }
+
+    })());
+

data/vendor/assets/javascripts/scenejs_plugins/texture/video.js

@@ -0,0 +1,105 @@
+SceneJS.Plugins.addPlugin(
+
+    "texture",
+    "video",
+
+    new (function () {
+
+        this.getSource = function (params) {
+
+            var gl = params.gl;      
+            var publish;
+            var video;
+            var texture = gl.createTexture();
+
+            return {
+
+                subscribe:function (fn) {
+                    publish = fn;
+                },
+
+                configure:function (cfg) {
+
+                    if (cfg.src) {
+
+                        var canvas = document.createElement("canvas");
+                        document.getElementsByTagName("body")[0].appendChild(canvas);
+                        var ctx = canvas.getContext("2d");
+
+                        /* Create hidden video canvas
+                         */
+                        video = document.createElement("video");
+                        video.style.display = "none";
+                        video.setAttribute("loop", "loop");
+                        video.autoplay = true;
+                        video.addEventListener("ended", // looping broken in FF
+                            function () {
+                                this.play();
+                            },
+                            true);
+
+                        document.getElementsByTagName("body")[0].appendChild(video);
+
+                        //video.crossOrigin = "anonymous";
+                        video.src = cfg.src;
+
+                        var updateTexture = function () {
+
+                            if (video.readyState > 0) {
+
+                                if (video.height <= 0) {
+                                    video.style.display = "";
+                                    video.height = video.offsetHeight;
+                                    video.width = video.offsetWidth;
+                                    video.style.display = "none";
+                                }
+
+                                //                                    canvas.height = video.height;
+                                //                                    canvas.width = video.width;
+                                //
+                                //                                    ctx.drawImage(video, 0, 0);
+                                //
+                                //                                    gl.bindTexture(gl.TEXTURE_2D, texture);
+                                //                                    //
+                                //                                    try {
+                                //                                        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
+                                //
+                                //                                    } catch(e) {
+                                //
+                                //                                        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas, null);
+                                //                                    }
+                                //
+                                //                                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+                                //                                    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+                                //
+                                //                                    gl.generateMipmap(gl.TEXTURE_2D);
+                                //
+
+                                try {
+                                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
+                                }
+                                catch (e) {
+                                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video, null);
+                                }
+                                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+                                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+                                gl.generateMipmap(gl.TEXTURE_2D);
+                                if (publish) {
+                                    publish(texture);
+                                }
+                            }
+                            window.requestAnimationFrame(updateTexture);
+                        };
+
+                        window.requestAnimationFrame(updateTexture);// TODO: synch with render loop
+                    }
+                },
+
+                destroy:function () {
+                    // TODO: destroy any existing video
+                }
+            };
+        };
+
+    })());
+