ShaderGraph : introduce param

bin/style.css

@@ -1030,6 +1030,27 @@ input[type=checkbox]:checked:after {
   visibility: visible;
 }
 /* Shader Editor */
+.shader-view .tabs {
+  z-index: 1;
+  background: #222222;
+}
+.shader-view .tabs .tab {
+  height: 100%;
+}
+.shader-view .tabs .tab .hide-block {
+  height: 70%;
+}
+.shader-view .tabs .tab .hide-block .hide-scene-tree {
+  height: 100%;
+}
+.shader-view .tabs .tab .options-block {
+  height: 25%;
+}
+.shader-view .tabs .tab .options-block > * {
+  display: block;
+  margin-bottom: 10px;
+  width: 100%;
+}
 .shader-view #add-menu {
   position: absolute;
   width: 400px;
@@ -1117,11 +1138,11 @@ input[type=checkbox]:checked:after {
 }
 .shader-view .heaps-scene #status-bar {
   position: absolute;
-  width: 100%;
+  width: 84%;
   min-height: 20px;
   background-color: #111;
   border: 1px solid #444;
-  right: -1px;
+  left: -1px;
   bottom: -1px;
 }
 .shader-view .heaps-scene #status-bar span {

bin/style.less

@@ -1146,6 +1146,27 @@ input[type=checkbox] {
 
 /* Shader Editor */
 .shader-view {
+	.tabs {
+		z-index: 1;
+    	background: #222222;
+		.tab {
+			height: 100%;
+			.hide-block {
+				height: 70%;
+				.hide-scene-tree {
+					height: 100%;
+				}
+			}
+			.options-block {
+				height: 25%;
+				& > * {
+					display: block;
+					margin-bottom: 10px;
+					width: 100%;
+				}
+			}
+		}
+	}
 	#add-menu {
 		position: absolute;
 		width: 400px;
@@ -1249,13 +1270,13 @@ input[type=checkbox] {
 		#status-bar {
 			position: absolute;
 
-			width: 100%;
+			width: 84%;
 			min-height: 20px;
 
 			background-color: #111;
 			border: 1px solid #444;
 
-			right: -1px;
+			left: -1px;
 			bottom: -1px;
 
 			span {

hide/view/ShaderEditor.hx

@@ -88,11 +88,15 @@ class ShaderEditor extends FileView {
 					<div class="tabs">
 						<span>Parameters</span>
 						<div class="tab expand" name="Scene" icon="sitemap">
-							<div class="hide-block" style="height:50%">
+							<div class="hide-block" >
 								<div class="hide-scene-tree hide-list">
 								</div>
 							</div>
-							<div class="hide-scroll"></div>
+							<div class="options-block hide-block">
+								<input id="addParameter" type="button" value="Add parameter" />
+								<input id="compileShader" type="button" value="Compile shader" />
+								<input id="saveShader" type="button" value="Save" />
+							</div>
 						</div>
 					</div>
 				</div>
@@ -242,6 +246,14 @@ class ShaderEditor extends FileView {
 			}
 		});
 
+		element.find("#compileShader").on("click", function() {
+			compileShader();
+		});
+
+		element.find("#saveShader").on("click", function() {
+			save();
+		});
+
 		editorMatrix.on("change", "input, select", function(ev) {
 			try {
 				shaderGraph.nodeUpdated(ev.target.closest(".box").id);
@@ -318,6 +330,7 @@ class ShaderEditor extends FileView {
 		currentSign = haxe.crypto.Md5.encode(content);
 		sys.io.File.saveContent(getPath(), content);
 		super.save();
+		info("Shader saved");
 	}
 
 	function update(dt : Float) {
@@ -332,7 +345,6 @@ class ShaderEditor extends FileView {
 			lightDirection = this.light.getDirection();
 		}
 
-
 		obj = sceneEditor.scene.loadModel("fx/Common/PrimitiveShapes/Sphere.fbx", true);
 		sceneEditor.scene.s3d.addChild(obj);
 
@@ -341,6 +353,10 @@ class ShaderEditor extends FileView {
 		compileShader();
 	}
 
+	function addParameter() {
+
+	}
+
 	function compileShader() {
 		var saveShader : Shader = null;
 		if (shaderGenerated != null)

hide/view/shadereditor/Box.hx

@@ -128,7 +128,7 @@ class Box {
 		var height = getNodesHeight();
 		element.find(".nodes").height(height);
 		element.find(".outline").attr("height", getHeight()+2);
-		if (inputs.length > 1 || outputs.length > 1 || propsHeight == 0) {
+		if (inputs.length >= 1 && outputs.length >= 1) {
 			element.find(".nodes-separator").attr("y2", HEADER_HEIGHT + height);
 			element.find(".nodes-separator").show();
 		} else {

hrt/shgraph/ShaderFunction.hx

@@ -25,7 +25,7 @@ class ShaderFunction extends ShaderNode {
 
 		return {
 					p : null,
-					t : TVec(3,VFloat),
+					t : output.type,
 					e : TBinop(OpAssign, {
 						e: TVar(output),
 						p: null,

hrt/shgraph/ShaderGraph.hx

@@ -8,7 +8,7 @@ private typedef Node = {
 	comment : String,
 	id : Int,
 	type : String,
-	?parameters : Dynamic,
+	?properties : Dynamic,
 	?instance : ShaderNode,
 	?outputs: Array<Node>,
 	?indegree : Int
@@ -21,12 +21,20 @@ private typedef Edge = {
 	nameInput : String
 };
 
+private typedef Parameter = {
+	name : String,
+	type : Type,
+	defaultValue : Dynamic,
+	?variable : TVar
+};
+
 class ShaderGraph {
 
 	var current_node_id = 0;
 	var filepath : String;
 	var nodes : Map<Int, Node> = [];
 	var allVariables : Array<TVar> = [];
+	public var parametersAvailable : Array<Parameter> = [];
 
 	public function new(filepath : String) {
 		if (filepath == null) return;
@@ -48,7 +56,7 @@ class ShaderGraph {
 		for (n in nodes) {
 			n.outputs = [];
 			n.instance = std.Type.createInstance(std.Type.resolveClass(n.type), []);
-			n.instance.loadProperties(n.parameters);
+			n.instance.loadProperties(n.properties);
 			n.instance.setId(n.id);
 			this.nodes.set(n.id, n);
 		}
@@ -160,6 +168,29 @@ class ShaderGraph {
 		return counter != nbNodes;
 	}
 
+	function generateParameter(name : String, type : Type) : TVar {
+		return {
+				parent: null,
+				id: 0,
+				kind:Param,
+				name: name,
+				type: type
+			};
+	}
+
+	public function addParameter(name : String, type : Type, defaultValue : Dynamic) {
+		parametersAvailable.push({name : name, type : type, defaultValue : defaultValue, variable : generateParameter(name, type)});
+	}
+
+	public function removeParameter(name : String) {
+		for (p in parametersAvailable) {
+			if (p.name == name) {
+				parametersAvailable.remove(p);
+				return;
+			}
+		}
+	}
+
 	function buildNodeVar(nodeVar : NodeVar) : Array<TExpr>{
 		var node = nodeVar.node;
 		if (node == null)
@@ -247,9 +278,12 @@ class ShaderGraph {
 
 		var json = haxe.Json.stringify({
 			nodes: [
-				for (n in nodes) { x : n.x, y : n.y, comment: n.comment, id: n.id, type: n.type, parameters : n.instance.savePropertiesNode() }
+				for (n in nodes) { x : n.x, y : n.y, comment: n.comment, id: n.id, type: n.type, properties : n.instance.savePropertiesNode() }
 			],
-			edges: edgesJson
+			edges: edgesJson,
+			parameters: [
+				for (p in parametersAvailable) { name : p.name, type : p.type }
+			]
 		});
 
 		return json;

hrt/shgraph/ShaderInput.hx

@@ -13,7 +13,7 @@ class ShaderInput extends ShaderNode {
 
 	@output() var output = SType.Variant;
 
-	@param("Variable") public var variable : TVar;
+	@prop("Variable") public var variable : TVar;
 
 	override public function getOutput(key : String) : TVar {
 		return variable;

hrt/shgraph/ShaderOutput.hx

@@ -14,7 +14,7 @@ class ShaderOutput extends ShaderNode {
 
 	@input("input") var input = SType.Variant;
 
-	@param("Variable") public var variable : TVar;
+	@prop("Variable") public var variable : TVar;
 
 	var components = [X, Y, Z, W];
 

hrt/shgraph/ShaderParam.hx

@@ -13,30 +13,21 @@ class ShaderParam extends ShaderNode {
 
 	@output() var output = SType.Variant;
 
-	@param("Variable") public var variable : TVar;
+	@prop() public var parameterName : String;
+
+	private var variable : TVar;
 
 	override public function getOutput(key : String) : TVar {
 		return variable;
 	}
 
-	override public function build(key : String) : TExpr {
-		return null;
-	}
-
 	override public function loadProperties(props : Dynamic) {
-		var paramVariable : String = Reflect.field(props, "variable");
-
-		for (c in ShaderNode.availableVariables) {
-			if (c.name == paramVariable) {
-				this.variable = c;
-				return;
-			}
-		}
+		parameterName = Reflect.field(props, "parameterName");
 	}
 
 	override public function saveProperties() : Dynamic {
 		var parameters = {
-			variable: variable.name
+			parameterName: parameterName
 		};
 
 		return parameters;
@@ -46,23 +37,11 @@ class ShaderParam extends ShaderNode {
 	override public function getPropertiesHTML(width : Float) : Array<Element> {
 		var elements = super.getPropertiesHTML(width);
 		var element = new Element('<div style="width: 110px; height: 30px"></div>');
-		element.append(new Element('<select id="variable"></select>'));
+		element.append(new Element('<select class="variable"></select>'));
 
-		if (this.variable == null) {
-			this.variable = ShaderNode.availableVariables[0];
-		}
 		var input = element.children("select");
-		var indexOption = 0;
-		for (c in ShaderNode.availableVariables) {
-			input.append(new Element('<option value="${indexOption}">${c.name}</option>'));
-			if (this.variable.name == c.name) {
-				input.val(indexOption);
-			}
-			indexOption++;
-		}
 		input.on("change", function(e) {
-			var value = input.val();
-			this.variable = ShaderNode.availableVariables[value];
+			this.variable = input.val();
 		});
 
 

hrt/shgraph/nodes/Sampler.hx

@@ -17,7 +17,7 @@ class Sampler extends ShaderFunction {
 	}
 
 	override public function computeOutputs() {
-		addOutput("rgba", TVec(4, VFloat));
+		addOutput("output", TVec(4, VFloat));
 	}
 
 }

hrt/shgraph/nodes/Texture.hx

@@ -11,12 +11,18 @@ class Texture extends ShaderNode {
 
 	@output("texture") var texture = SType.Sampler;
 
+	@prop("Variable") public var variable : TVar;
+
 	@prop() var fileTexture : String;
 
 	override public function computeOutputs() {
 		addOutput("rgba", TSampler2D);
 	}
 
+	override public function getOutput(key : String) : TVar {
+		return variable;
+	}
+
 	override public function build(key : String) : TExpr {
 		return null;
 	}