nodeListComponent.tsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. import * as React from "react";
  2. import { GlobalState } from '../../globalState';
  3. import { LineContainerComponent } from '../../sharedComponents/lineContainerComponent';
  4. import { DraggableLineComponent } from '../../sharedComponents/draggableLineComponent';
  5. require("./nodeList.scss");
  6. interface INodeListComponentProps {
  7. globalState: GlobalState;
  8. }
  9. export class NodeListComponent extends React.Component<INodeListComponentProps, {filter: string}> {
  10. private static _Tooltips:{[key: string]: string} = {
  11. "BonesBlock": "Provides a world matrix for each vertex, based on skeletal (bone/joint) animation. mesh.matricesIndices and mesh.matricesWeights are the vertex to bone assignments and weighting, and assume no more than 4 bones influencing any given vertex. If a vertex is influenced by more than 4 bones, then mesh.matricesIndicesExtra and mesh.matricesWeightsExtra can be used for up to 8 bones of influence per vertex",
  12. "MorphTargetsBlock": "Provides the final positions, normals, tangents, and uvs based on morph targets in a mesh",
  13. "AddBlock": "Adds the left and right inputs together. Left and right inputs have to be of the same type",
  14. "DistanceBlock": "Provides a distance vector based on the left and right input vectors",
  15. "DivideBlock": "Divides the left input by the right input",
  16. "LengthBlock": "Outputs the length of an input vector",
  17. "MaxBlock": "Outputs the largest value between the left and right inputs",
  18. "MinBlock": "Outputs the smallest value between the left and right inputs",
  19. "MultiplyBlock": "Multiplies the left and right inputs together",
  20. "NegateBlock": "Multiplies the input by -1",
  21. "OneMinusBlock": "Subtracts the input value from 1 (1 - input)",
  22. "RandomNumberBlock": "Provides a random number based on an input seed",
  23. "ReciprocalBlock": "Outputs the reciprocal value(s) vased on the input value(s)",
  24. "ScaleBlock": "Multiplies the input value(s) by the factor",
  25. "SubtractBlock": "Subtracts the right input from the left input",
  26. "PosterizeBlock": "Reduces the number of colors in an image to the value of input steps",
  27. "ReplaceColorBlock": "Replaces a reference color in input value with a different replacement color. Distance is the tolerance variation of the color",
  28. "ColorMergerBlock": "Combines individual color channels into color Vectors",
  29. "ColorSplitterBlock": "Separates color Vectors into individual color channels",
  30. "VectorMergerBlock": "Combines up to 4 input values into Vectors",
  31. "VectorSplitterBlock": "Separates Vectors into individual elements",
  32. "Color3": "A Vector3 representing combined color values (red, green, and blue)",
  33. "Color4": "A Vector4 representing combined color and alpha values (red, green, blue, and alpha)",
  34. "DeltaTimeBlock": "A Float representing the time value that's passed since the last frame has rendered",
  35. "Float": "A Float for a single floating point value",
  36. "TextureBlock": "A container node for a texture (image or url)",
  37. "TimeBlock": "A Float of a constantly increasing floating point value, starting when the scene is loaded",
  38. "Vector2": "A Vector2 representing two values",
  39. "Vector3": "A Vector3 representing three values",
  40. "Vector4": "A Vector4 representing four values",
  41. "LerpBlock": "Provides linear interpolated value(s) between the left and right inputs, based on the gradient input",
  42. "SmoothStepBlock": "Outputs a value based on a the input value's position on a curve between the two edge values",
  43. "Matrix": "A container for a vector transformation",
  44. "ProjectionMatrixBlock": "A matrix moving from 3D space to screen space",
  45. "ViewMatrixBlock": "A matrix moving from 3D space to camera space",
  46. "ViewProjectionMatrixBlock": "A matrix moving from 3D space to camera space, and ending in screen space",
  47. "WorldMatrixBlock": "A matrix moving from local space to world space",
  48. "WorldViewProjectionMatrixBlock": "A matrix moving from local space to world space, then to camera space, and ending in screen space",
  49. "ColorBlock": "A Color4 representing the color of each vertex of the attached mesh",
  50. "InstancesBlock": "Provides the world matrix for each instance. This is used to apply materials to instances as well as original meshes",
  51. "MatrixIndicesBlock": "A Vector4 representing the vertex to bone skinning assignments",
  52. "MatricesWeightsBlock": "A Vector4 representing the vertex to bone skinning weights",
  53. "NormalBlock": "A Vector3 representing the normal of each vertex of the attached mesh",
  54. "PositionBlock": "A Vector3 representing the position of each vertex of the attached mesh",
  55. "TangentBlock": "A Vector3 representing the tangent of each vertex of the attached mesh",
  56. "UVBlock": "A Vector2 representing the UV coordinates of each vertex of the attached mesh",
  57. "DiscardBlock": "A final output node that will not output a pixel below the cutoff value",
  58. "FragmentOutputBlock": "The final node for outputing the color of each pixel. This node must be included in every node material",
  59. "VertexOutputBlock": "The final node for outputing the position of each vertex. This node must be included in every node material",
  60. "ClampBlock": "Ignores all values of the input outside of the Minimum and Maximum property values",
  61. "NormalizeBlock": "Remaps the length of a vector or color to 1",
  62. "RemapBlock": "Remaps all input values between sourceMin and sourceMax, to be between targetMin and targetMax. source and target inputs can be static or variable inputs",
  63. "CeilingBlock": "Outputs the highest value of the input",
  64. "FloorBlock": "Outputs the lowest value of the input",
  65. "RoundBlock": "Outputs the nearest whole number based on the input value",
  66. "StepBlock": "Outputs 1 for any input value above the edge input, outputs 0 for any input value below the edge input",
  67. "CameraPositionBlock": "A Vector3 position of the active scene camera",
  68. "FogBlock": "Applies fog to a scene. Outputs fog with increasing value based on distance from the camera",
  69. "FogColorBlock": "A Color3 for the fog color",
  70. "ImageProcessingBlock": "Provides access to all of the Babylon image processing properties",
  71. "LightBlock": "Returns the individual color values (red, green, and blue) of the diffuse or specular colors of the combined OR individual lighting within the scene",
  72. "LightInformationBlock": "Provides the direction, color and intensity of a selected light based on its world position",
  73. "PerturbNormalBlock": "Creates a new normal direction based on a normal map, the world position, and world normal",
  74. "ReflectionTextureBlock": "Creates a reflection of the input texture",
  75. "ViewDirectionBlock": "Outputs the direction vector of where the camera is aimed",
  76. "AbsBlock": "Outputs the absolute value of the input value",
  77. "ArcCosBlock": "Outputs the inverse of the cosine value based on the input value",
  78. "ArcSinBlock": "Outputs the inverse of the sine value based on the input value",
  79. "ArcTan2Block": "Outputs the inverse of the tangent value based on the input value",
  80. "ArcTanBlock": "Outputs the inverse of the tangent value based on the input value",
  81. "CosBlock": "Outputs the cosine value based on the input value",
  82. "DegreesToRadiansBlock": "Converts the input value (degrees) to radians",
  83. "Exp2Block": "Outputs the input value multiplied by itself 1 time. (Exponent of 2)",
  84. "ExpBlock": "Outputs the input value multiplied by itself 9 time. (Exponent of 10)",
  85. "FractBlock": "Everything after the period",
  86. "LogBlock": "The logarithm value based on the input value",
  87. "PowBlock": "Outputs the input value multiplied by itself the number of times equal to the power input (Exponent of power)",
  88. "RadiansToDegreesBlock": "Converts the input value (radians) to degrees",
  89. "SawToothWaveBlock": "Outputs a sawtooth pattern value between -1 and 1 based on the input value",
  90. "SignBlock": "returns 1 if 10 or -1 if -10",
  91. "SinBlock": "Outputs the the sine value based on the input value",
  92. "SqrtBlock": "Outputs the the square root of the input value",
  93. "SquareWaveBlock": "Outputs a stepped pattern value between -1 and 1 based on the input value",
  94. "TanBlock": "Outputs the the tangent value based on the input value",
  95. "TriangleWaveBlock": "Outputs a sawtooth pattern value between 0 and 1 based on the input value",
  96. "CrossBlock": "Outputs a vector that is perpendicular to two input vectors",
  97. "DotBlock": "Outputs the cos of the angle between two vectors",
  98. "FresnelBlock": "Outputs the grazing angle of the surface of the mesh, relative to a camera. Angle can be influenced by the bias and power inputs",
  99. "TransformBlock": "Transforms a input vector based on an input matrix"
  100. }
  101. constructor(props: INodeListComponentProps) {
  102. super(props);
  103. this.state = { filter: "" };
  104. }
  105. filterContent(filter: string) {
  106. this.setState({ filter: filter });
  107. }
  108. render() {
  109. // Block types used to create the menu from
  110. const allBlocks = {
  111. Animation: ["BonesBlock", "MorphTargetsBlock"],
  112. Basic_Math: ["AddBlock", "DivideBlock", "MultiplyBlock", "ScaleBlock", "SubtractBlock", "OneMinusBlock", "MaxBlock", "MinBlock", "LengthBlock", "DistanceBlock", "NegateBlock", "RandomNumberBlock", "ReciprocalBlock"],
  113. Color_Management: ["ReplaceColorBlock", "PosterizeBlock", "GradientBlock"],
  114. Conversion_Blocks: ["ColorMergerBlock", "ColorSplitterBlock", "VectorMergerBlock", "VectorSplitterBlock"],
  115. Inputs: ["Float", "Vector2", "Vector3", "Vector4", "Color3", "Color4", "TextureBlock", "ReflectionTextureBlock", "TimeBlock", "DeltaTimeBlock"],
  116. Interpolation: ["LerpBlock", "StepBlock", "SmoothStepBlock", "NLerpBlock"],
  117. Matrices: ["Matrix", "WorldMatrixBlock", "WorldViewMatrixBlock", "WorldViewProjectionMatrixBlock", "ViewMatrixBlock", "ViewProjectionMatrixBlock", "ProjectionMatrixBlock"],
  118. Mesh: ["InstancesBlock", "PositionBlock", "UVBlock", "ColorBlock", "NormalBlock", "TangentBlock", "MatrixIndicesBlock", "MatrixWeightsBlock", "WorldPositionBlock", "WorldNormalBlock", "FrontFacingBlock"],
  119. Noises: ["SimplexPerlin3DBlock", "WorleyNoise3DBlock"],
  120. Output_Blocks: ["VertexOutputBlock", "FragmentOutputBlock", "DiscardBlock"],
  121. Range: ["ClampBlock", "RemapBlock", "NormalizeBlock"],
  122. Round: ["RoundBlock", "CeilingBlock", "FloorBlock"],
  123. Scene: ["FogBlock", "CameraPositionBlock", "FogColorBlock", "ImageProcessingBlock", "LightBlock", "LightInformationBlock", "ViewDirectionBlock", "PerturbNormalBlock", "NormalBlendBlock"],
  124. Trigonometry: ["CosBlock", "SinBlock", "AbsBlock", "ExpBlock", "Exp2Block", "SqrtBlock", "PowBlock", "LogBlock", "ArcCosBlock", "ArcSinBlock", "TanBlock", "ArcTanBlock", "FractBlock", "SignBlock", "ArcTan2Block", "DegreesToRadiansBlock", "RadiansToDegreesBlock", "SawToothWaveBlock", "TriangleWaveBlock", "SquareWaveBlock"],
  125. Vector_Math: ["CrossBlock", "DotBlock", "TransformBlock", "FresnelBlock", "Rotate2dBlock", "DerivativeBlock"],
  126. }
  127. // Create node menu
  128. var blockMenu = []
  129. for (var key in allBlocks) {
  130. var blockList = (allBlocks as any)[key].filter((b: string) => !this.state.filter || b.toLowerCase().indexOf(this.state.filter.toLowerCase()) !== -1)
  131. .sort((a: string, b: string) => a.localeCompare(b))
  132. .map((block: any, i: number) => {
  133. let tooltip = NodeListComponent._Tooltips[block] || "";
  134. return <DraggableLineComponent key={block} data={block} tooltip={tooltip}/>
  135. });
  136. if (blockList.length) {
  137. blockMenu.push(
  138. <LineContainerComponent key={key + " blocks"} title={key.replace("_", " ")} closed={false}>
  139. {blockList}
  140. </LineContainerComponent>
  141. );
  142. }
  143. }
  144. return (
  145. <div id="nodeList">
  146. <div className="panes">
  147. <div className="pane">
  148. <div className="filter">
  149. <input type="text" placeholder="Filter" onChange={(evt) => this.filterContent(evt.target.value)} />
  150. </div>
  151. <div className="list-container">
  152. {blockMenu}
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. );
  158. }
  159. }