Skip to content

Instantly share code, notes, and snippets.

@jelster
Created October 3, 2021 15:08
Show Gist options
  • Save jelster/cec975e881bd06b00c95463545d6e851 to your computer and use it in GitHub Desktop.
Save jelster/cec975e881bd06b00c95463545d6e851 to your computer and use it in GitHub Desktop.
BabylonJS Node Material Editor Fragment Shader reusable frame
{
"editorData": {
"locations": [
{
"blockId": 3545,
"x": 1600,
"y": 1400
},
{
"blockId": 3548,
"x": 3000,
"y": 1250
},
{
"blockId": 3555,
"x": 1500,
"y": 600
},
{
"blockId": 3556,
"x": 1400,
"y": 850
},
{
"blockId": 3554,
"x": 1750,
"y": 650
},
{
"blockId": 3558,
"x": 1500,
"y": 1000
},
{
"blockId": 3557,
"x": 1750,
"y": 900
},
{
"blockId": 3553,
"x": 2000,
"y": 700
},
{
"blockId": 3560,
"x": 1400,
"y": 1300
},
{
"blockId": 3561,
"x": 1750,
"y": 1150
},
{
"blockId": 3559,
"x": 2000,
"y": 1050
},
{
"blockId": 3552,
"x": 2250,
"y": 850
},
{
"blockId": 3563,
"x": 1400,
"y": 1200
},
{
"blockId": 3562,
"x": 2250,
"y": 1050
},
{
"blockId": 3564,
"x": 2250,
"y": 1200
},
{
"blockId": 3551,
"x": 2500,
"y": 1050
},
{
"blockId": 3550,
"x": 2750,
"y": 1050
},
{
"blockId": 3567,
"x": 2250,
"y": 1350
},
{
"blockId": 3568,
"x": 2250,
"y": 1500
},
{
"blockId": 3569,
"x": 2250,
"y": 1650
},
{
"blockId": 3566,
"x": 2500,
"y": 1550
},
{
"blockId": 3565,
"x": 2750,
"y": 1550
},
{
"blockId": 3549,
"x": 3000,
"y": 1400
},
{
"blockId": 3547,
"x": 3250,
"y": 1300
},
{
"blockId": 3572,
"x": 2250,
"y": 800
}
],
"frames": [
{
"x": 1350,
"y": 500,
"width": 2284.16,
"height": 1458.09,
"color": [
0.11764705882352941,
0.26666666666666666,
0.11764705882352941
],
"name": "CircleShape",
"isCollapsed": true,
"blocks": [
3545,
3548,
3555,
3556,
3554,
3558,
3557,
3553,
3560,
3561,
3559,
3552,
3563,
3562,
3564,
3551,
3550,
3567,
3568,
3569,
3566,
3565,
3549,
3547,
3572
]
}
]
},
"blocks": [
{
"customType": "BABYLON.InputBlock",
"id": 3545,
"name": "One",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 1,
"inputs": [],
"outputs": [
{
"name": "output"
}
],
"type": 1,
"mode": 0,
"animationType": 0,
"min": 0,
"max": 0,
"isBoolean": false,
"matrixMode": 0,
"isConstant": true,
"groupInInspector": "",
"convertToGammaSpace": false,
"convertToLinearSpace": false,
"valueType": "number",
"value": 1
},
{
"customType": "BABYLON.InputBlock",
"id": 3548,
"name": "lineColor",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": true,
"target": 1,
"inputs": [],
"outputs": [
{
"name": "output"
}
],
"type": 32,
"mode": 0,
"animationType": 0,
"min": 0,
"max": 0,
"isBoolean": false,
"matrixMode": 0,
"isConstant": false,
"groupInInspector": "",
"convertToGammaSpace": false,
"convertToLinearSpace": false,
"valueType": "BABYLON.Color3",
"value": [
1,
1,
1
]
},
{
"customType": "BABYLON.RemapBlock",
"id": 3555,
"name": "mappedUV",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "input",
"displayName": "screenPosition",
"inputName": "input",
"targetBlockId": 3544,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": 0
},
{
"name": "sourceMin",
"displayName": "sourceMin"
},
{
"name": "sourceMax",
"displayName": "sourceMax"
},
{
"name": "targetMin",
"displayName": "targetMin"
},
{
"name": "targetMax",
"displayName": "targetMax"
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
],
"sourceRange": [
-1,
1
],
"targetRange": [
0,
1
]
},
{
"customType": "BABYLON.InputBlock",
"id": 3556,
"name": "textureSize",
"comments": "",
"visibleInInspector": true,
"visibleOnFrame": true,
"target": 1,
"inputs": [],
"outputs": [
{
"name": "output"
}
],
"type": 4,
"mode": 0,
"animationType": 0,
"min": 0,
"max": 0,
"isBoolean": false,
"matrixMode": 0,
"isConstant": false,
"groupInInspector": "",
"convertToGammaSpace": false,
"convertToLinearSpace": false,
"valueType": "BABYLON.Vector2",
"value": [
512,
512
]
},
{
"customType": "BABYLON.MultiplyBlock",
"id": 3554,
"name": "textureCoords",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "left",
"displayName": "left",
"inputName": "left",
"targetBlockId": 3555,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "right",
"displayName": "right",
"inputName": "right",
"targetBlockId": 3556,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.InputBlock",
"id": 3558,
"name": "Vec2Two",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 1,
"inputs": [],
"outputs": [
{
"name": "output"
}
],
"type": 4,
"mode": 0,
"animationType": 0,
"min": 0,
"max": 0,
"isBoolean": false,
"matrixMode": 0,
"isConstant": true,
"groupInInspector": "",
"convertToGammaSpace": false,
"convertToLinearSpace": false,
"valueType": "BABYLON.Vector2",
"value": [
2,
2
]
},
{
"customType": "BABYLON.DivideBlock",
"id": 3557,
"name": "halfTextureSize",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "left",
"displayName": "left",
"inputName": "left",
"targetBlockId": 3556,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "right",
"displayName": "right",
"inputName": "right",
"targetBlockId": 3558,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.DistanceBlock",
"id": 3553,
"name": "Distance",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "left",
"displayName": "left",
"inputName": "left",
"targetBlockId": 3554,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "right",
"displayName": "right",
"inputName": "right",
"targetBlockId": 3557,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.InputBlock",
"id": 3560,
"name": "lineWidth",
"comments": "",
"visibleInInspector": true,
"visibleOnFrame": true,
"target": 1,
"inputs": [],
"outputs": [
{
"name": "output"
}
],
"type": 1,
"mode": 0,
"animationType": 0,
"min": 0,
"max": 0,
"isBoolean": false,
"matrixMode": 0,
"isConstant": false,
"groupInInspector": "",
"convertToGammaSpace": false,
"convertToLinearSpace": false,
"valueType": "number",
"value": 1
},
{
"customType": "BABYLON.InputBlock",
"id": 3561,
"name": "Two",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 1,
"inputs": [],
"outputs": [
{
"name": "output"
}
],
"type": 1,
"mode": 0,
"animationType": 0,
"min": 0,
"max": 0,
"isBoolean": false,
"matrixMode": 0,
"isConstant": true,
"groupInInspector": "",
"convertToGammaSpace": false,
"convertToLinearSpace": false,
"valueType": "number",
"value": 2
},
{
"customType": "BABYLON.DivideBlock",
"id": 3559,
"name": "HalfWidth",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "left",
"displayName": "left",
"inputName": "left",
"targetBlockId": 3560,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "right",
"displayName": "right",
"inputName": "right",
"targetBlockId": 3561,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.SubtractBlock",
"id": 3552,
"name": "r - ",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "left",
"displayName": "left",
"inputName": "left",
"targetBlockId": 3553,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "right",
"displayName": "right",
"inputName": "right",
"targetBlockId": 3559,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.InputBlock",
"id": 3563,
"name": "radius",
"comments": "",
"visibleInInspector": true,
"visibleOnFrame": true,
"target": 1,
"inputs": [],
"outputs": [
{
"name": "output"
}
],
"type": 1,
"mode": 0,
"animationType": 0,
"min": 0,
"max": 0,
"isBoolean": false,
"matrixMode": 0,
"isConstant": false,
"groupInInspector": "",
"convertToGammaSpace": false,
"convertToLinearSpace": false,
"valueType": "number",
"value": 100
},
{
"customType": "BABYLON.SubtractBlock",
"id": 3562,
"name": "Subtract",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "left",
"displayName": "left",
"inputName": "left",
"targetBlockId": 3563,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "right",
"displayName": "right",
"inputName": "right",
"targetBlockId": 3545,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.AddBlock",
"id": 3564,
"name": "Add",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "left",
"displayName": "left",
"inputName": "left",
"targetBlockId": 3563,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "right",
"displayName": "right",
"inputName": "right",
"targetBlockId": 3545,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.SmoothStepBlock",
"id": 3551,
"name": "Smooth step",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "value",
"displayName": "value",
"inputName": "value",
"targetBlockId": 3552,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "edge0",
"displayName": "edge0",
"inputName": "edge0",
"targetBlockId": 3562,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "edge1",
"displayName": "edge1",
"inputName": "edge1",
"targetBlockId": 3564,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.OneMinusBlock",
"id": 3550,
"name": "One minus",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "input",
"displayName": "input",
"inputName": "input",
"targetBlockId": 3551,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.AddBlock",
"id": 3567,
"name": "r +",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "left",
"displayName": "left",
"inputName": "left",
"targetBlockId": 3553,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "right",
"displayName": "right",
"inputName": "right",
"targetBlockId": 3559,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.SubtractBlock",
"id": 3568,
"name": "Subtract",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "left",
"displayName": "left",
"inputName": "left",
"targetBlockId": 3563,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "right",
"displayName": "right",
"inputName": "right",
"targetBlockId": 3545,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.AddBlock",
"id": 3569,
"name": "Add",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "left",
"displayName": "left",
"inputName": "left",
"targetBlockId": 3563,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "right",
"displayName": "right",
"inputName": "right",
"targetBlockId": 3545,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.SmoothStepBlock",
"id": 3566,
"name": "Smooth step",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "value",
"displayName": "value",
"inputName": "value",
"targetBlockId": 3567,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "edge0",
"displayName": "edge0",
"inputName": "edge0",
"targetBlockId": 3568,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "edge1",
"displayName": "edge1",
"inputName": "edge1",
"targetBlockId": 3569,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.OneMinusBlock",
"id": 3565,
"name": "One minus",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "input",
"displayName": "input",
"inputName": "input",
"targetBlockId": 3566,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.SubtractBlock",
"id": 3549,
"name": "Subtract",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "left",
"displayName": "left",
"inputName": "left",
"targetBlockId": 3550,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "right",
"displayName": "right",
"inputName": "right",
"targetBlockId": 3565,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
},
{
"customType": "BABYLON.ScaleBlock",
"id": 3547,
"name": "Scale",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "input",
"displayName": "input",
"inputName": "input",
"targetBlockId": 3548,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
},
{
"name": "factor",
"displayName": "factor",
"inputName": "factor",
"targetBlockId": 3549,
"targetConnectionName": "output",
"isExposedOnFrame": true,
"exposedPortPosition": -1
}
],
"outputs": [
{
"name": "output",
"displayName": "finalCircleColor",
"isExposedOnFrame": true,
"exposedPortPosition": 0
}
]
},
{
"customType": "BABYLON.SubtractBlock",
"id": 3572,
"name": "Subtract",
"comments": "",
"visibleInInspector": false,
"visibleOnFrame": false,
"target": 4,
"inputs": [
{
"name": "left",
"displayName": "left"
},
{
"name": "right",
"displayName": "right"
}
],
"outputs": [
{
"name": "output",
"displayName": "output"
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment