TypeScript example of setting RenderPath shader parameters

ShaderParameters/JavaScript/Resources.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "2deef6864c1d118dda9f2e7b15519384",
+	"FolderImporter": {}
+}

ShaderParameters/JavaScript/Resources/Components.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "d236ac1b8302f40fd21f766b567f749c",
+	"FolderImporter": {}
+}

ShaderParameters/JavaScript/Resources/Components/Spinner.js

@@ -0,0 +1,33 @@
+"atomic component";
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+/**
+ * Component that will rotate a node at a configurable speed.
+ */
+var Spinner = (function (_super) {
+    __extends(Spinner, _super);
+    function Spinner() {
+        var _this = _super.apply(this, arguments) || this;
+        /**
+         * Fields witihin the inspectorFields object will be exposed to the editor
+         */
+        _this.inspectorFields = {
+            speed: 1.0
+        };
+        return _this;
+    }
+    /**
+     * Update called every cycle with timeStep containing the delta between calls
+     * @param  {number} timeStep time since last call to update
+     */
+    Spinner.prototype.update = function (timeStep) {
+        this.node.yaw(timeStep * 75 * this.speed);
+    };
+    return Spinner;
+}(Atomic.JSComponent));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Spinner;

ShaderParameters/JavaScript/Resources/Components/Spinner.js.asset

@@ -0,0 +1,7 @@
+{
+	"version": 1,
+	"guid": "349c0036f110db5bfd705f105a8d83ea",
+	"JavascriptImporter": {
+		"IsComponentFile": true
+	}
+}

ShaderParameters/JavaScript/Resources/Components/Spinner.ts

@@ -0,0 +1,30 @@
+"atomic component";
+
+/**
+ * Component that will rotate a node at a configurable speed.
+ */
+export default class Spinner extends Atomic.JSComponent {
+
+    /**
+     * Fields witihin the inspectorFields object will be exposed to the editor
+     */
+    inspectorFields = {
+        speed: 1.0
+    };
+
+    /**
+     * The speed in which to turn the component
+     * @type {number}
+     */
+    speed: number;
+
+    /**
+     * Update called every cycle with timeStep containing the delta between calls
+     * @param  {number} timeStep time since last call to update
+     */
+    update(timeStep) {
+
+        this.node.yaw(timeStep * 75 * this.speed);
+
+    }
+}

ShaderParameters/JavaScript/Resources/Components/Spinner.ts.asset

@@ -0,0 +1,7 @@
+{
+	"version": 1,
+	"guid": "d04862f9e6885b9bd4b2e363d1e5d9e4",
+	"TypeScriptImporter": {
+		"IsComponentFile": false
+	}
+}

ShaderParameters/JavaScript/Resources/Components/UI.js

@@ -0,0 +1,97 @@
+"atomic component";
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+/**
+ * A new component
+ */
+var UI = (function (_super) {
+    __extends(UI, _super);
+    function UI() {
+        var _this = _super.apply(this, arguments) || this;
+        /**
+         * Fields witihin the inspectorFields object will be exposed to the editor
+         */
+        _this.inspectorFields = {};
+        return _this;
+    }
+    /**
+     * Called when the component is first added to the node
+     */
+    UI.prototype.start = function () {
+        //creates a new scene, but doesn't load it to the player
+        var scene = Atomic.player.loadScene("Scenes/Scene.scene");
+        //get camera from the scene
+        var camera = scene.getComponents("Camera", true)[0];
+        //create a new UIView
+        var view = new Atomic.UIView();
+        // Create a UIWindow
+        var window = new Atomic.UIWindow();
+        // It will only have a title bar and won't be resizeable or have a close button
+        window.settings = Atomic.UI_WINDOW_SETTINGS.UI_WINDOW_SETTINGS_TITLEBAR;
+        window.text = "ShaderParameters";
+        window.setSize(UI.WIDTH, UI.HEIGHT);
+        var layout = new Atomic.UILayout();
+        var slider = new Atomic.UISlider();
+        slider.layoutWidth = 100;
+        slider.setLimits(.1, 1.0);
+        slider.value = 1;
+        // The Scene View
+        var sceneView = new Atomic.UISceneView();
+        sceneView.setView(scene, camera);
+        sceneView.autoUpdate = true;
+        sceneView.layoutWidth = 512;
+        sceneView.layoutHeight = 384;
+        layout.addChild(sceneView);
+        layout.addChild(slider);
+        window.addChild(layout);
+        // Add to main UI view and center
+        view.addChild(window);
+        window.center();
+        var viewport = sceneView.viewport;
+        var renderPath = viewport.renderPath;
+        // Add a blur post process effect
+        viewport.renderPath.append(Atomic.cache.getResource("XMLFile", "PostProcess/MyBlur.xml"));
+        // Get the individual blur commands from MyBlur.xml
+        var rpc = new Atomic.RenderPathCommand();
+        var commands = [];
+        for (var i = 0; i < renderPath.numCommands; i++) {
+            renderPath.getCommand(i, rpc);
+            if (rpc.tag == "Blur1" || rpc.tag == "Blur2" ||
+                rpc.tag == "Blur3" || rpc.tag == "Blur4") {
+                // store off the command index so we can update it later
+                rpc["cmdIndex"] = i;
+                commands.push(rpc);
+                rpc = new Atomic.RenderPathCommand();
+            }
+        }
+        this.subscribeToEvent(slider, Atomic.UIWidgetEvent(function (ev) {
+            if (ev.type == Atomic.UI_EVENT_TYPE.UI_EVENT_TYPE_CHANGED) {
+                var value = 2.0 * slider.value;
+                // This works, can set globally
+                //renderPath.setShaderParameter("BlurSigma", value);
+                // Though, for this example set per command
+                for (var i = 0; i < commands.length; i++) {
+                    var cmd = commands[i];
+                    cmd.setShaderParameter("BlurSigma", value);
+                    // update in the renderPath
+                    renderPath.setCommand(cmd["cmdIndex"], cmd);
+                }
+            }
+        }));
+    };
+    /**
+     * Update called every cycle with timeStep containing the delta between calls
+     * @param timeStep time since last call to update
+     */
+    UI.prototype.update = function (timeStep) {
+    };
+    return UI;
+}(Atomic.JSComponent));
+UI.WIDTH = 640;
+UI.HEIGHT = 480;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = UI;

ShaderParameters/JavaScript/Resources/Components/UI.js.asset

@@ -0,0 +1,7 @@
+{
+	"version": 1,
+	"guid": "da18dbc102b5a00540a0dbb61f94bdcf",
+	"JavascriptImporter": {
+		"IsComponentFile": true
+	}
+}

ShaderParameters/JavaScript/Resources/Components/UI.ts

@@ -0,0 +1,119 @@
+"atomic component";
+
+/**
+ * A new component
+ */
+export default class UI extends Atomic.JSComponent {
+
+    /**
+     * Fields witihin the inspectorFields object will be exposed to the editor
+     */
+    inspectorFields = {
+    };
+
+    /**
+     * Called when the component is first added to the node
+     */
+    start() {
+
+        //creates a new scene, but doesn't load it to the player
+        let scene = Atomic.player.loadScene("Scenes/Scene.scene");
+        //get camera from the scene
+        let camera = <Atomic.Camera>scene.getComponents("Camera", true)[0];
+        //create a new UIView
+        let view = new Atomic.UIView();
+
+        // Create a UIWindow
+        let window = new Atomic.UIWindow();
+        // It will only have a title bar and won't be resizeable or have a close button
+        window.settings = Atomic.UI_WINDOW_SETTINGS.UI_WINDOW_SETTINGS_TITLEBAR;
+        window.text = "ShaderParameters";
+        window.setSize(UI.WIDTH, UI.HEIGHT);
+
+        let layout = new Atomic.UILayout();
+
+        let slider = new Atomic.UISlider();
+        slider.layoutWidth = 100;
+        slider.setLimits(.1, 1.0);
+        slider.value = 1;
+
+        // The Scene View
+        let sceneView = new Atomic.UISceneView();        
+        sceneView.setView(scene, camera);
+        sceneView.autoUpdate = true;
+        sceneView.layoutWidth = 512;
+        sceneView.layoutHeight = 384;
+
+        layout.addChild(sceneView);
+        layout.addChild(slider);
+
+        window.addChild(layout);
+
+        // Add to main UI view and center
+        view.addChild(window);
+        window.center();
+
+        let viewport = sceneView.viewport;
+        let renderPath = viewport.renderPath;        
+
+        // Add a blur post process effect
+        viewport.renderPath.append(Atomic.cache.getResource<Atomic.XMLFile>("XMLFile", "PostProcess/MyBlur.xml"));
+        
+        // Get the individual blur commands from MyBlur.xml
+        let rpc = new Atomic.RenderPathCommand();
+        let commands:Array<Atomic.RenderPathCommand> = [];
+
+        for (let i = 0; i < renderPath.numCommands; i++) {
+
+            renderPath.getCommand(i, rpc);
+
+            if (rpc.tag == "Blur1" || rpc.tag == "Blur2" || 
+                rpc.tag == "Blur3" || rpc.tag == "Blur4") {
+                
+                // store off the command index so we can update it later
+                rpc["cmdIndex"] = i;
+                commands.push(rpc);
+                rpc = new Atomic.RenderPathCommand();
+            }
+
+        }        
+
+        this.subscribeToEvent(slider, Atomic.UIWidgetEvent((ev) => {
+
+            if (ev.type == Atomic.UI_EVENT_TYPE.UI_EVENT_TYPE_CHANGED) {
+
+                let value = 2.0 * slider.value;
+
+                // This works, can set globally
+                //renderPath.setShaderParameter("BlurSigma", value);
+
+                // Though, for this example set per command
+                for (let i = 0; i < commands.length; i++) {
+
+                    let cmd = commands[i];
+
+                    cmd.setShaderParameter("BlurSigma", value);                    
+
+                    // update in the renderPath
+                    renderPath.setCommand(cmd["cmdIndex"], cmd);
+
+                }
+
+            }
+            
+        }));
+                
+
+    }
+
+    /**
+     * Update called every cycle with timeStep containing the delta between calls
+     * @param timeStep time since last call to update
+     */
+    update(timeStep: number) {
+
+    }
+
+    private static readonly WIDTH:number = 640;
+    private static readonly HEIGHT:number = 480;
+}

ShaderParameters/JavaScript/Resources/Components/UI.ts.asset

@@ -0,0 +1,7 @@
+{
+	"version": 1,
+	"guid": "7c008ed56636d0a7092fc4021ed9966c",
+	"TypeScriptImporter": {
+		"IsComponentFile": false
+	}
+}

ShaderParameters/JavaScript/Resources/Models.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "2b35640ad57640f50456b0ee47bb5985",
+	"FolderImporter": {}
+}

ShaderParameters/JavaScript/Resources/Models/Chest.fbx.asset

@@ -0,0 +1,10 @@
+{
+	"version": 1,
+	"guid": "2788364e8ff6f81f4b566a9d58e3fb5b",
+	"ModelImporter": {
+		"scale": 0.01,
+		"importAnimations": false,
+		"importMaterials": true,
+		"animInfo": []
+	}
+}

ShaderParameters/JavaScript/Resources/Models/Materials.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "6d15165312205087906c1962138a82c8",
+	"FolderImporter": {}
+}

ShaderParameters/JavaScript/Resources/Models/Materials/DefaultMaterial.material

@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<material>
+	<technique name="Techniques/Diff.xml" quality="0" loddistance="0" />
+	<texture unit="diffuse" name="Textures/Chest.png" />
+	<parameter name="UOffset" value="1 0 0 0" />
+	<parameter name="VOffset" value="0 1 0 0" />
+	<parameter name="MatDiffColor" value="0.8 0.8 0.8 1" />
+	<parameter name="MatEmissiveColor" value="0 0 0 1" />
+	<parameter name="MatEnvMapColor" value="1 1 1" />
+	<parameter name="MatSpecColor" value="0.5 0.5 0.5 16" />
+	<cull value="ccw" />
+	<shadowcull value="ccw" />
+	<fill value="solid" />
+	<depthbias constant="0" slopescaled="0" />
+</material>

ShaderParameters/JavaScript/Resources/Models/Materials/DefaultMaterial.material.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "6bb46d88946b588488094d72eb22c309",
+	"MaterialImporter": {}
+}

ShaderParameters/JavaScript/Resources/PostProcess.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "bf75bda8f15c5cca3a7fb82fcaad9436",
+	"FolderImporter": {}
+}

ShaderParameters/JavaScript/Resources/PostProcess/MyBlur.xml

@@ -0,0 +1,31 @@
+<renderpath>
+    <rendertarget name="blurh" tag="Blur" sizedivisor="2 2" format="rgba" filter="true" />
+    <rendertarget name="blurv" tag="Blur" sizedivisor="2 2" format="rgba" filter="true" />
+    <command type="quad" tag="Blur1" vs="Blur" ps="Blur" psdefines="BLUR3" output="blurh">
+        <parameter name="BlurDir" value="1.0 0.0" />
+        <parameter name="BlurRadius" value="2.0" />
+        <parameter name="BlurSigma" value="2.0" />
+        <texture unit="diffuse" name="viewport" />
+    </command>
+    <command type="quad" tag="Blur2" vs="Blur" ps="Blur" psdefines="BLUR3" output="blurv">
+        <parameter name="BlurDir" value="0.0 1.0" />
+        <parameter name="BlurRadius" value="2.0" />
+        <parameter name="BlurSigma" value="2.0" />
+        <texture unit="diffuse" name="blurh" />
+    </command>
+    <command type="quad" tag="Blur3" vs="Blur" ps="Blur" psdefines="BLUR3" output="blurh">
+        <parameter name="BlurDir" value="1.0 0.0" />
+        <parameter name="BlurRadius" value="1.0" />
+        <parameter name="BlurSigma" value="2.0" />
+        <texture unit="diffuse" name="blurv" />
+    </command>
+    <command type="quad" tag="Blur4" vs="Blur" ps="Blur" psdefines="BLUR3" output="blurv">
+        <parameter name="BlurDir" value="0.0 1.0" />
+        <parameter name="BlurRadius" value="1.0" />
+        <parameter name="BlurSigma" value="2.0" />
+        <texture unit="diffuse" name="blurh" />
+    </command>
+    <command type="quad" tag="Blur" vs="CopyFramebuffer" ps="CopyFramebuffer" output="viewport">
+        <texture unit="diffuse" name="blurv" />
+    </command>
+</renderpath>

ShaderParameters/JavaScript/Resources/PostProcess/MyBlur.xml.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "f58a92c686440793fd18c20ee6a4c8d0",
+	"TextImporter": {}
+}

ShaderParameters/JavaScript/Resources/Scenes.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "ff42d1755bd4283ed870d3edb57ee403",
+	"FolderImporter": {}
+}

ShaderParameters/JavaScript/Resources/Scenes/Scene.scene

@@ -0,0 +1,71 @@
+<?xml version="1.0"?>
+<scene id="1">
+	<attribute name="Name" value="" />
+	<attribute name="Time Scale" value="1" />
+	<attribute name="Smoothing Constant" value="50" />
+	<attribute name="Snap Threshold" value="5" />
+	<attribute name="Elapsed Time" value="0" />
+	<attribute name="Next Replicated Node ID" value="364" />
+	<attribute name="Next Replicated Component ID" value="1977" />
+	<attribute name="Next Local Node ID" value="16778496" />
+	<attribute name="Next Local Component ID" value="16777216" />
+	<attribute name="Variables" />
+	<attribute name="Variable Names" value="" />
+	<component type="PhysicsWorld" id="1" />
+	<component type="Octree" id="2" />
+	<component type="DebugRenderer" id="3" />
+	<node id="2">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="Zone" />
+		<attribute name="Position" value="0 0 0" />
+		<attribute name="Rotation" value="1 0 0 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="Zone" id="4">
+			<attribute name="Bounding Box Min" value="-10000 -10000 -10000" />
+			<attribute name="Bounding Box Max" value="10000 10000 10000" />
+			<attribute name="Ambient Color" value="0.4 0.4 0.4 1" />
+		</component>
+	</node>
+	<node id="3">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="GlobalLight" />
+		<attribute name="Position" value="0 0 0" />
+		<attribute name="Rotation" value="0.888074 0.325058 -0.325058 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="Light" id="5">
+			<attribute name="Light Type" value="Directional" />
+			<attribute name="Cast Shadows" value="true" />
+			<attribute name="CSM Splits" value="10 20 50 0" />
+			<attribute name="View Size Quantize" value="1" />
+			<attribute name="View Size Minimum" value="5" />
+			<attribute name="Depth Constant Bias" value="0.00025" />
+			<attribute name="Depth Slope Bias" value="0.001" />
+		</component>
+	</node>
+	<node id="361">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="Camera" />
+		<attribute name="Position" value="0 0 -2" />
+		<attribute name="Rotation" value="1 0 0 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="Camera" id="1973" />
+	</node>
+	<node id="363">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="Chest" />
+		<attribute name="Position" value="0 -0.374877 2" />
+		<attribute name="Rotation" value="1 0 0 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="StaticModel" id="1975">
+			<attribute name="Model" value="Model;2788364e8ff6f81f4b566a9d58e3fb5b.mdl" />
+			<attribute name="Material" value="Material;Models/Materials/DefaultMaterial.material" />
+		</component>
+		<component type="JSComponent" id="1976">
+			<attribute name="ComponentFile" value="JSComponentFile;Components/Spinner.js" />
+		</component>
+	</node>
+</scene>

ShaderParameters/JavaScript/Resources/Scenes/Scene.scene.asset

@@ -0,0 +1,8 @@
+{
+	"version": 1,
+	"guid": "f2131f0ab15b85ecce8097ef6ba87f78",
+	"SceneImporter": {
+		"sceneCamRotation": "1 0 0 0",
+		"sceneCamPosition": "0 0 0"
+	}
+}

ShaderParameters/JavaScript/Resources/Scenes/UIScene.scene

@@ -0,0 +1,55 @@
+<?xml version="1.0"?>
+<scene id="1">
+	<attribute name="Name" value="" />
+	<attribute name="Time Scale" value="1" />
+	<attribute name="Smoothing Constant" value="50" />
+	<attribute name="Snap Threshold" value="5" />
+	<attribute name="Elapsed Time" value="0" />
+	<attribute name="Next Replicated Node ID" value="364" />
+	<attribute name="Next Replicated Component ID" value="1976" />
+	<attribute name="Next Local Node ID" value="16778496" />
+	<attribute name="Next Local Component ID" value="16777216" />
+	<attribute name="Variables" />
+	<attribute name="Variable Names" value="" />
+	<component type="PhysicsWorld" id="1" />
+	<component type="Octree" id="2" />
+	<component type="DebugRenderer" id="3">
+		<attribute name="Line Antialias" value="true" />
+	</component>
+	<node id="2">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="Zone" />
+		<attribute name="Tags" />
+		<attribute name="Position" value="0 0 0" />
+		<attribute name="Rotation" value="1 0 0 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="Zone" id="4">
+			<attribute name="Bounding Box Min" value="-10000 -10000 -10000" />
+			<attribute name="Bounding Box Max" value="10000 10000 10000" />
+			<attribute name="Ambient Color" value="0.4 0.4 0.4 1" />
+		</component>
+	</node>
+	<node id="361">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="Camera" />
+		<attribute name="Tags" />
+		<attribute name="Position" value="0 0 -5" />
+		<attribute name="Rotation" value="1 0 0 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="Camera" id="1973" />
+	</node>
+	<node id="363">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="Node" />
+		<attribute name="Tags" />
+		<attribute name="Position" value="0 0 0" />
+		<attribute name="Rotation" value="0.999641 -0.00249073 -0.0139065 0.0227522" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="JSComponent" id="1975">
+			<attribute name="ComponentFile" value="JSComponentFile;Components/UI.js" />
+		</component>
+	</node>
+</scene>

ShaderParameters/JavaScript/Resources/Scenes/UIScene.scene.asset

@@ -0,0 +1,8 @@
+{
+	"version": 1,
+	"guid": "af44b40ee6e3347349842b63255679d9",
+	"SceneImporter": {
+		"sceneCamRotation": "1 0 0 0",
+		"sceneCamPosition": "0 0 0"
+	}
+}

ShaderParameters/JavaScript/Resources/Scripts.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "cd1ffe274b28b9600d41d48d72a91508",
+	"FolderImporter": {}
+}

ShaderParameters/JavaScript/Resources/Scripts/main.js

@@ -0,0 +1,2 @@
+// This script is the main entry point of the game
+var scene = Atomic.player.loadScene("Scenes/UIScene.scene");

ShaderParameters/JavaScript/Resources/Scripts/main.js.asset

@@ -0,0 +1,7 @@
+{
+	"version": 1,
+	"guid": "53e450b65c4d43c6ff8e804e7d396181",
+	"JavascriptImporter": {
+		"IsComponentFile": false
+	}
+}

ShaderParameters/JavaScript/Resources/Scripts/main.ts

@@ -0,0 +1,4 @@
+// This script is the main entry point of the game
+
+var scene = Atomic.player.loadScene("Scenes/UIScene.scene");
+

ShaderParameters/JavaScript/Resources/Scripts/main.ts.asset

@@ -0,0 +1,7 @@
+{
+	"version": 1,
+	"guid": "a38211bce827f9cef477e9dee982e3ae",
+	"TypeScriptImporter": {
+		"IsComponentFile": false
+	}
+}

ShaderParameters/JavaScript/Resources/Textures.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "1b4fbbc949a2e6c5788bd4465535a84f",
+	"FolderImporter": {}
+}

ShaderParameters/JavaScript/Resources/Textures/Chest.png.asset

@@ -0,0 +1,7 @@
+{
+	"version": 1,
+	"guid": "69db094e46935ba562de09509441e3cc",
+	"TextureImporter": {
+		"compressionSize": 0
+	}
+}