Skip to content
Permalink
Browse files

Merge pull request #6334 from TrevorDev/nodeEditorFHL

Node editor
  • Loading branch information...
deltakosh committed May 13, 2019
2 parents 040da1c + d7f425f commit ea8a810bc385c5c5f26163c6833749a80e223a16
Showing with 8,146 additions and 235 deletions.
  1. +1,388 −1 Playground/babylon.d.txt
  2. +55 −2 Tools/Config/config.json
  3. +37 −38 bower.json
  4. +27 −0 dist/preview release/nodeEditor/package.json
  5. +1 −0 dist/preview release/nodeEditor/readme-es6.md
  6. +1 −0 dist/preview release/nodeEditor/readme.md
  7. +1 −0 dist/preview release/what's new.md
  8. +2 −2 inspector/README.md
  9. +46 −33 inspector/src/components/actionTabs/actionTabsComponent.tsx
  10. +4 −4 inspector/src/components/actionTabs/lineContainerComponent.tsx
  11. +17 −5 inspector/src/components/actionTabs/lines/textureLineComponent.tsx
  12. 0 inspector/src/index.css
  13. +0 −2 inspector/src/index.ts
  14. +25 −20 inspector/src/inspector.ts
  15. BIN inspector/test/environment.dds
  16. BIN inspector/test/explosion.wav
  17. +0 −91 inspector/test/index.js
  18. BIN inspector/test/jump.wav
  19. BIN inspector/test/test_1.dds
  20. +1 −0 nodeEditor/README-ES6.md
  21. +18 −0 nodeEditor/README.md
  22. +34 −0 nodeEditor/src/components/customDiragramNodes/generic/genericNodeFactory.tsx
  23. +50 −0 nodeEditor/src/components/customDiragramNodes/generic/genericNodeModel.ts
  24. +162 −0 nodeEditor/src/components/customDiragramNodes/generic/genericNodeWidget.tsx
  25. +73 −0 nodeEditor/src/components/customDiragramNodes/generic/genericPortModel.ts
  26. +385 −0 nodeEditor/src/components/graphEditor.tsx
  27. +892 −0 nodeEditor/src/components/main.scss
  28. +6 −0 nodeEditor/src/globalState.ts
  29. +1 −0 nodeEditor/src/index.ts
  30. +9 −0 nodeEditor/src/legacy/legacy.ts
  31. +57 −0 nodeEditor/src/nodeEditor.ts
  32. +21 −0 nodeEditor/src/sharedComponents/buttonLineComponent.tsx
  33. +33 −0 nodeEditor/src/sharedComponents/fileButtonLineComponent.tsx
  34. +120 −0 nodeEditor/src/sharedComponents/lineContainerComponent.tsx
  35. +69 −0 nodeEditor/src/sharedComponents/numericInputComponent.tsx
  36. +70 −0 nodeEditor/src/sharedComponents/popup.ts
  37. +6 −0 nodeEditor/src/sharedComponents/propertyChangedEvent.ts
  38. +202 −0 nodeEditor/src/sharedComponents/textureLineComponent.tsx
  39. +114 −0 nodeEditor/src/sharedComponents/vector2LineComponent.tsx
  40. +124 −0 nodeEditor/src/sharedComponents/vector3LineComponent.tsx
  41. +28 −0 nodeEditor/tsconfig.json
  42. +34 −0 nodeEditor/webpack.config.js
  43. +2 −1 package.json
  44. +2 −2 src/Loading/sceneLoader.ts
  45. +143 −0 src/Materials/Node/Blocks/Dual/fogBlock.ts
  46. +2 −0 src/Materials/Node/Blocks/Dual/index.ts
  47. +51 −0 src/Materials/Node/Blocks/Fragment/alphaTestBlock.ts
  48. +54 −0 src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts
  49. +134 −0 src/Materials/Node/Blocks/Fragment/imageProcessingBlock.ts
  50. +9 −0 src/Materials/Node/Blocks/Fragment/index.ts
  51. +67 −0 src/Materials/Node/Blocks/Fragment/rgbMergerBlock.ts
  52. +59 −0 src/Materials/Node/Blocks/Fragment/rgbSplitterBlock.ts
  53. +88 −0 src/Materials/Node/Blocks/Fragment/rgbaMergerBlock.ts
  54. +65 −0 src/Materials/Node/Blocks/Fragment/rgbaSplitterBlock.ts
  55. +194 −0 src/Materials/Node/Blocks/Fragment/textureBlock.ts
  56. +170 −0 src/Materials/Node/Blocks/Vertex/bonesBlock.ts
  57. +4 −0 src/Materials/Node/Blocks/Vertex/index.ts
  58. +133 −0 src/Materials/Node/Blocks/Vertex/instancesBlock.ts
  59. +211 −0 src/Materials/Node/Blocks/Vertex/morphTargetsBlock.ts
  60. +46 −0 src/Materials/Node/Blocks/Vertex/vertexOutputBlock.ts
  61. +52 −0 src/Materials/Node/Blocks/addBlock.ts
  62. +50 −0 src/Materials/Node/Blocks/clampBlock.ts
  63. +10 −0 src/Materials/Node/Blocks/index.ts
  64. +54 −0 src/Materials/Node/Blocks/matrixMultiplicationBlock.ts
  65. +52 −0 src/Materials/Node/Blocks/multiplyBlock.ts
  66. +66 −0 src/Materials/Node/Blocks/vector2TransformBlock.ts
  67. +61 −0 src/Materials/Node/Blocks/vector3TransformBlock.ts
  68. +65 −0 src/Materials/Node/Blocks/vector4TransformBlock.ts
  69. +1 −0 src/Materials/Node/Optimizers/index.ts
  70. +15 −0 src/Materials/Node/Optimizers/nodeMaterialOptimizer.ts
  71. +8 −0 src/Materials/Node/index.ts
  72. +721 −0 src/Materials/Node/nodeMaterial.ts
  73. +420 −0 src/Materials/Node/nodeMaterialBlock.ts
  74. +342 −0 src/Materials/Node/nodeMaterialBlockConnectionPoint.ts
  75. +35 −0 src/Materials/Node/nodeMaterialBlockConnectionPointTypes.ts
  76. +11 −0 src/Materials/Node/nodeMaterialBlockTargets.ts
  77. +389 −0 src/Materials/Node/nodeMaterialBuildState.ts
  78. +137 −0 src/Materials/Node/nodeMaterialBuildStateSharedData.ts
  79. +19 −0 src/Materials/Node/nodeMaterialWellKnownValues.ts
  80. +14 −0 src/Materials/effect.ts
  81. +2 −1 src/Materials/index.ts
  82. +8 −0 src/Materials/material.ts
  83. +4 −1 src/Materials/materialDefines.ts
  84. +56 −28 src/Materials/materialHelper.ts
  85. +4 −1 src/Materials/shaderMaterial.ts
  86. +3 −3 src/Materials/standardMaterial.ts

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -46,7 +46,8 @@
"loaders",
"serializers",
"gui",
"inspector"
"inspector",
"nodeEditor"
],
"es6modules": [
"core",
@@ -57,7 +58,8 @@
"serializers",
"gui",
"inspector",
"viewer"
"viewer",
"nodeEditor"
],
"lintModules": [
"core",
@@ -581,6 +583,57 @@
}
}
},
"nodeEditor": {
"libraries": [
{
"output": "babylon.nodeEditor.js",
"entry": "./legacy/legacy.ts"
}
],
"build": {
"ignoreInTestMode": true,
"mainFolder": "./nodeEditor/",
"uncheckedLintImports": [
"react",
"react-dom",
"re-resizable",
"glTF"
],
"umd": {
"packageName": "babylonjs-node-editor",
"webpackRoot": "NODEEDITOR",
"processDeclaration": {
"filename": "babylon.nodeEditor.module.d.ts",
"moduleName": "NODEEDITOR",
"importsToRemove": [],
"classMap": {
"babylonjs": "BABYLON",
"react": "React",
"@babylonjs/core": "BABYLON",
"@fortawesome": false,
"react-contextmenu": false
}
}
},
"es6": {
"webpackBuild": true,
"buildDependencies": [
"node_modules/re-resizable/lib/index.es5.js",
"Tools/**/*"
],
"packageName": "@babylonjs/node-editor",
"readme": "dist/preview release/nodeEditor/readme-es6.md",
"packagesFiles": [
"babylon.nodeEditor.max.js",
"babylon.nodeEditor.max.js.map",
"babylon.nodeEditor.module.d.ts",
"readme.md"
],
"typings": "babylon.nodeEditor.module.d.ts",
"index": "babylon.nodeEditor.max.js"
}
}
},
"viewer": {
"libraries": [
{
@@ -1,39 +1,38 @@
{
"name": "babylonjs",
"description": "Babylon.js is a complete JavaScript framework for building 3D games with HTML 5 and WebGL",
"main": "./dist/babylon.2.5.js",
"homepage": "https://www.babylonjs.com",
"repository": {
"type": "git",
"url": "git://github.com/BabylonJS/Babylon.js.git"
},
"authors": [
"David Catuhe",
"David Rousset"
],
"keywords": [
"3D",
"WebGL",
"WebAudio",
"Shaders",
"Realtime"
],
"license": "Apache-2.0",
"ignore": [
"**/.*",
"node_modules",
"Babylon",
"Exporters",
"Loaders",
"Previous releases",
"/Tools",
"gulpfile.js",
"package.json",
"babylon.2.1*.*",
"*.md",
"*.yml",
"cannon.js",
"Oimo.js",
"poly2tri.js"
]
}
"name": "babylonjs",
"description": "Babylon.js is a complete JavaScript framework for building 3D games with HTML 5 and WebGL",
"main": "./dist/babylon.js",
"homepage": "https://www.babylonjs.com",
"repository": {
"type": "git",
"url": "git://github.com/BabylonJS/Babylon.js.git"
},
"authors": [
"David Catuhe"
],
"keywords": [
"3D",
"WebGL",
"WebAudio",
"Shaders",
"Realtime"
],
"license": "Apache-2.0",
"ignore": [
"**/.*",
"node_modules",
"Babylon",
"Exporters",
"Loaders",
"Previous releases",
"/Tools",
"gulpfile.js",
"package.json",
"babylon.2.1*.*",
"*.md",
"*.yml",
"cannon.js",
"Oimo.js",
"poly2tri.js"
]
}
@@ -0,0 +1,27 @@
{
"author": {
"name": "David CATUHE"
},
"name": "babylonjs-node-editor",
"description": "The Babylon.js node material editor.",
"version": "4.1.0-alpha.0",
"repository": {
"type": "git",
"url": "https://github.com/BabylonJS/Babylon.js.git"
},
"license": "Apache-2.0",
"dependencies": {
"babylonjs": "4.1.0-alpha.0"
},
"files": [
"babylon.nodeEditor.max.js.map",
"babylon.nodeEditor.max.js",
"babylon.nodeEditor.js",
"babylon.nodeEditor.module.d.ts",
"readme.md",
"package.json"
],
"engines": {
"node": "*"
}
}
@@ -0,0 +1 @@
Node Editor es6
@@ -0,0 +1 @@
Node Editor
@@ -11,6 +11,7 @@
- Added support for `ShadowGenerator` ([Deltakosh](https://github.com/deltakosh/))
- Added support for scene normalization ([Deltakosh](https://github.com/deltakosh/))
- Added support for texture creation and assignments per material ([Deltakosh](https://github.com/deltakosh/))
- Node material editor ([Deltakosh](https://github.com/deltakosh/)/[TrevorDev](https://github.com/TrevorDev))

### Tools
- Added `Color3.toHSV()`, `Color3.toHSVToRef()` and `Color3.HSVtoRGBToRef()` ([Deltakosh](https://github.com/deltakosh/))
@@ -9,13 +9,13 @@ Call the method `show` of the scene debugLayer:
```
scene.debugLayer.show();
```
This method will retrieve dynamically the library `inspector.js`, download it and add
This method will retrieve dynamically the library `babylon.inspector.bundle.js`, download it and add
it to the html page.

### Offline method
If you don't have access to internet, the inspector should be imported manually in your HTML page :
```
<script src="babylon.inspector.js" />
<script src="babylon.inspector.bundle.js" />
```
Then, call the method `show` of the scene debugLayer:
```
@@ -15,15 +15,15 @@ import { GlobalState } from "../../components/globalState";
require("./actionTabs.scss");

interface IActionTabsComponentProps {
scene: Scene,
scene?: Scene,
noCommands?: boolean,
noHeader?: boolean,
noExpand?: boolean,
noClose?: boolean,
popupMode?: boolean,
onPopup?: () => void,
onClose?: () => void,
globalState: GlobalState
globalState?: GlobalState
}

export class ActionTabsComponent extends React.Component<IActionTabsComponentProps, { selectedEntity: any, selectedIndex: number }> {
@@ -36,53 +36,66 @@ export class ActionTabsComponent extends React.Component<IActionTabsComponentPro

let initialIndex = 0;

const validationResutls = this.props.globalState.validationResults;
if (validationResutls) {
if (validationResutls.issues.numErrors || validationResutls.issues.numWarnings) {
initialIndex = 3;
if(this.props.globalState){
const validationResutls = this.props.globalState.validationResults;
if (validationResutls) {
if (validationResutls.issues.numErrors || validationResutls.issues.numWarnings) {
initialIndex = 3;
}
}
}


this.state = { selectedEntity: null, selectedIndex: initialIndex }
}

componentWillMount() {
this._onSelectionChangeObserver = this.props.globalState.onSelectionChangedObservable.add((entity) => {
this.setState({ selectedEntity: entity, selectedIndex: 0 });
});

this._onTabChangedObserver = this.props.globalState.onTabChangedObservable.add(index => {
this.setState({ selectedIndex: index });
});
if(this.props.globalState){
this._onSelectionChangeObserver = this.props.globalState.onSelectionChangedObservable.add((entity) => {
this.setState({ selectedEntity: entity, selectedIndex: 0 });
});

this._onTabChangedObserver = this.props.globalState.onTabChangedObservable.add(index => {
this.setState({ selectedIndex: index });
});
}
}

componentWillUnmount() {
if (this._onSelectionChangeObserver) {
this.props.globalState.onSelectionChangedObservable.remove(this._onSelectionChangeObserver);
}
if(this.props.globalState){
if (this._onSelectionChangeObserver) {
this.props.globalState.onSelectionChangedObservable.remove(this._onSelectionChangeObserver);
}

if (this._onTabChangedObserver) {
this.props.globalState.onTabChangedObservable.remove(this._onTabChangedObserver);
if (this._onTabChangedObserver) {
this.props.globalState.onTabChangedObservable.remove(this._onTabChangedObserver);
}
}
}

changeSelectedTab(index: number) {
this.props.globalState.onTabChangedObservable.notifyObservers(index);
if(this.props.globalState){
this.props.globalState.onTabChangedObservable.notifyObservers(index);
}
}

renderContent() {
return (
<TabsComponent selectedIndex={this.state.selectedIndex} onSelectedIndexChange={(value) => this.changeSelectedTab(value)}>
<PropertyGridTabComponent
title="Properties" icon={faFileAlt} scene={this.props.scene} selectedEntity={this.state.selectedEntity}
globalState={this.props.globalState}
onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable}
onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />
<DebugTabComponent title="Debug" icon={faBug} scene={this.props.scene} globalState={this.props.globalState} />
<StatisticsTabComponent title="Statistics" icon={faChartBar} scene={this.props.scene} globalState={this.props.globalState} />
<ToolsTabComponent title="Tools" icon={faWrench} scene={this.props.scene} globalState={this.props.globalState} />
</TabsComponent>
)
if(this.props.globalState && this.props.scene){
return (
<TabsComponent selectedIndex={this.state.selectedIndex} onSelectedIndexChange={(value) => this.changeSelectedTab(value)}>
<PropertyGridTabComponent
title="Properties" icon={faFileAlt} scene={this.props.scene} selectedEntity={this.state.selectedEntity}
globalState={this.props.globalState}
onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable}
onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />
<DebugTabComponent title="Debug" icon={faBug} scene={this.props.scene} globalState={this.props.globalState} />
<StatisticsTabComponent title="Statistics" icon={faChartBar} scene={this.props.scene} globalState={this.props.globalState} />
<ToolsTabComponent title="Tools" icon={faWrench} scene={this.props.scene} globalState={this.props.globalState} />
</TabsComponent>
)
}else{
return null;
}
}

onClose() {
@@ -105,7 +118,7 @@ export class ActionTabsComponent extends React.Component<IActionTabsComponentPro
<div id="actionTabs">
{
!this.props.noHeader &&
<HeaderComponent title="INSPECTOR" handleBack={true} noClose={this.props.noClose} noExpand={this.props.noExpand} noCommands={this.props.noCommands} onClose={() => this.onClose()} onPopup={() => this.onPopup()} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} />
<HeaderComponent title="INSPECTOR" handleBack={true} noClose={this.props.noClose} noExpand={this.props.noExpand} noCommands={this.props.noCommands} onClose={() => this.onClose()} onPopup={() => this.onPopup()} onSelectionChangedObservable={this.props.globalState ? this.props.globalState.onSelectionChangedObservable : undefined} />
}
{this.renderContent()}
</div>
@@ -128,7 +141,7 @@ export class ActionTabsComponent extends React.Component<IActionTabsComponentPro
<Resizable id="actionTabs" minWidth={300} maxWidth={600} size={{ height: "100%" }} minHeight="100%" enable={{ top: false, right: false, bottom: false, left: true, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }}>
{
!this.props.noHeader &&
<HeaderComponent title="INSPECTOR" handleBack={true} noClose={this.props.noClose} noExpand={this.props.noExpand} noCommands={this.props.noCommands} onClose={() => this.onClose()} onPopup={() => this.onPopup()} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} />
<HeaderComponent title="INSPECTOR" handleBack={true} noClose={this.props.noClose} noExpand={this.props.noExpand} noCommands={this.props.noCommands} onClose={() => this.onClose()} onPopup={() => this.onPopup()} onSelectionChangedObservable={this.props.globalState ? this.props.globalState.onSelectionChangedObservable : undefined} />
}
{this.renderContent()}
</Resizable>
@@ -4,7 +4,7 @@ import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
import { GlobalState } from '../../components/globalState';

interface ILineContainerComponentProps {
globalState: GlobalState;
globalState?: GlobalState;
title: string;
children: any[] | any;
closed?: boolean;
@@ -55,13 +55,13 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
}

componentDidMount() {
if (!this.props.globalState.selectedLineContainerTitle) {
if (this.props.globalState && !this.props.globalState.selectedLineContainerTitle) {
return;
}

if (this.props.globalState.selectedLineContainerTitle === this.props.title) {
if (this.props.globalState && this.props.globalState.selectedLineContainerTitle === this.props.title) {
setTimeout(() => {
this.props.globalState.selectedLineContainerTitle = "";
this.props.globalState!.selectedLineContainerTitle = "";
});

this.setState({ isExpanded: true, isHighlighted: true });
Oops, something went wrong.

0 comments on commit ea8a810

Please sign in to comment.
You can’t perform that action at this time.