Associated with #6012 (multiple outputs for TextureBlock)

nodeEditor/src/components/diagram/diagram.scss

@@ -87,8 +87,9 @@
 
     .preview {
         border-bottom-left-radius: 16px;
-        border-bottom-right-radius: 16px;
-        padding-top: 2px;
+        border: black 4px solid;
+        border-left: 0px;
+        border-bottom: 0px;
     }
 
     .inputs {
@@ -147,4 +148,31 @@
             }
         }
     }
+
+    &.texture-block {
+        display: grid;
+        grid-template-rows: 30px auto 1fr;
+        grid-template-columns: calc(100% - 60px) 60px;
+
+        .inputs {
+            grid-column: 1;
+            grid-row: 2;
+        }
+
+        .outputs {
+            grid-column: 2;
+            grid-row: 2 / span 2;            
+        }
+
+        .textureLine {
+            height: 140px;
+            grid-column: 1;
+            grid-row: 3;     
+
+            canvas {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
 }

nodeEditor/src/components/diagram/texture/textureNodeWidget.tsx

@@ -41,7 +41,7 @@ export class TextureNodeWidget extends React.Component<ITextureNodeWidgetProps>
         var inputPorts = PortHelper.GenerateInputPorts(this.props.node, ["uv"]);
 
         return (
-            <div className={"diagramBlock"}>
+            <div className={"diagramBlock texture-block"}>
                 <div className="header">
                     {this.props.node!.block!.name}
                 </div>
@@ -53,7 +53,7 @@ export class TextureNodeWidget extends React.Component<ITextureNodeWidgetProps>
                 </div>
                 {
                     this.props.node && this.props.node.texture &&
-                    <TextureLineComponent ref="textureView" width={200} height={180} texture={this.props.node.texture} hideChannelSelect={true} />
+                    <TextureLineComponent ref="textureView" width={136} height={136} texture={this.props.node.texture} hideChannelSelect={true} />
                 }
             </div>
         );

src/Materials/Node/Blocks/Dual/textureBlock.ts

@@ -37,7 +37,12 @@ export class TextureBlock extends NodeMaterialBlock {
 
         this.registerInput("uv", NodeMaterialBlockConnectionPointTypes.Vector2, false, NodeMaterialBlockTargets.Vertex);
 
-        this.registerOutput("color", NodeMaterialBlockConnectionPointTypes.Color4, NodeMaterialBlockTargets.Fragment);
+        this.registerOutput("rgba", NodeMaterialBlockConnectionPointTypes.Color4, NodeMaterialBlockTargets.Fragment);
+        this.registerOutput("rgb", NodeMaterialBlockConnectionPointTypes.Color3, NodeMaterialBlockTargets.Fragment);
+        this.registerOutput("r", NodeMaterialBlockConnectionPointTypes.Float, NodeMaterialBlockTargets.Fragment);
+        this.registerOutput("g", NodeMaterialBlockConnectionPointTypes.Float, NodeMaterialBlockTargets.Fragment);
+        this.registerOutput("b", NodeMaterialBlockConnectionPointTypes.Float, NodeMaterialBlockTargets.Fragment);
+        this.registerOutput("a", NodeMaterialBlockConnectionPointTypes.Float, NodeMaterialBlockTargets.Fragment);
     }
 
     /**
@@ -148,6 +153,17 @@ export class TextureBlock extends NodeMaterialBlock {
         state.compilationString += `#endif\r\n`;
     }
 
+    private _writeOutput(state: NodeMaterialBuildState, output: NodeMaterialConnectionPoint, swizzle: string) {
+        let uvInput = this.uv;
+        const complement = ` * ${this._textureInfoName}`;
+
+        state.compilationString += `#ifdef ${this._defineName}\r\n`;
+        state.compilationString += `${this._declareOutput(output, state)} = texture2D(${this._samplerName}, ${this._transformedUVName}).${swizzle}${complement};\r\n`;
+        state.compilationString += `#else\r\n`;
+        state.compilationString += `${this._declareOutput(output, state)} = texture2D(${this._samplerName}, ${"vMain" + uvInput.associatedVariableName}).${swizzle}${complement};\r\n`;
+        state.compilationString += `#endif\r\n`;
+    }
+
     protected _buildBlock(state: NodeMaterialBuildState) {
         super._buildBlock(state);
 
@@ -170,15 +186,11 @@ export class TextureBlock extends NodeMaterialBlock {
 
         state._emitUniformFromString(this._textureInfoName, "float");
 
-        let uvInput = this.uv;
-        let output = this._outputs[0];
-        const complement = ` * ${this._textureInfoName}`;
-
-        state.compilationString += `#ifdef ${this._defineName}\r\n`;
-        state.compilationString += `vec4 ${output.associatedVariableName} = texture2D(${this._samplerName}, ${this._transformedUVName})${complement};\r\n`;
-        state.compilationString += `#else\r\n`;
-        state.compilationString += `vec4 ${output.associatedVariableName} = texture2D(${this._samplerName}, ${"vMain" + uvInput.associatedVariableName})${complement};\r\n`;
-        state.compilationString += `#endif\r\n`;
+        for (var output of this._outputs) {
+            if (output.connectedBlocks.length) {
+                this._writeOutput(state, output, output.name);
+            }
+        }
 
         return this;
     }

src/Materials/Node/Blocks/Vertex/bonesBlock.ts

@@ -182,7 +182,12 @@ export class BonesBlock extends NodeMaterialBlock {
         let output = this._outputs[0];
         let worldInput = this.world;
 
-        state.compilationString += this._declareOutput(output, state) + ` = ${worldInput.associatedVariableName} * ${influenceVariablename};`;
+        state.compilationString += `#if NUM_BONE_INFLUENCERS>0\r\n`;
+        state.compilationString += this._declareOutput(output, state) + ` = ${worldInput.associatedVariableName} * ${influenceVariablename};\r\n`;
+        state.compilationString += `#else\r\n`;
+        state.compilationString += this._declareOutput(output, state) + ` = ${worldInput.associatedVariableName};\r\n`;
+        state.compilationString += `#endif\r\n`;
+
         return this;
     }
 }