From 91d082cace6a6e6a0091ae99efaf2691e1d3bd15 Mon Sep 17 00:00:00 2001 From: tamat Date: Mon, 2 Sep 2019 23:33:59 +0200 Subject: [PATCH] fixes in replicated nodes --- src/litegraph.js | 29 ++++--- src/nodes/geometry.js | 117 ++++++++++++++++++++------ src/nodes/gltextures.js | 29 ++++++- src/nodes/math.js | 10 +-- src/nodes/math3d.js | 176 ---------------------------------------- 5 files changed, 140 insertions(+), 221 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index 5a5b8709b..609a2f677 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -34,6 +34,11 @@ DEFAULT_SHADOW_COLOR: "rgba(0,0,0,0.5)", DEFAULT_GROUP_FONT: 24, + WIDGET_BGCOLOR: "#222", + WIDGET_OUTLINE_COLOR: "#666", + WIDGET_TEXT_COLOR: "#DDD", + WIDGET_SECONDARY_TEXT_COLOR: "#999", + LINK_COLOR: "#9A9", EVENT_LINK_COLOR: "#A86", CONNECTING_LINK_COLOR: "#AFA", @@ -8041,8 +8046,10 @@ LGraphNode.prototype.executeAction = function(action) var show_text = this.ds.scale > 0.5; ctx.save(); ctx.globalAlpha = this.editor_alpha; - var outline_color = "#666"; - var background_color = "#222"; + var outline_color = LiteGraph.WIDGET_OUTLINE_COLOR; + var background_color = LiteGraph.WIDGET_BGCOLOR; + var text_color = LiteGraph.WIDGET_TEXT_COLOR; + var secondary_text_color = LiteGraph.WIDGET_SECONDARY_TEXT_COLOR; var margin = 15; for (var i = 0; i < widgets.length; ++i) { @@ -8067,7 +8074,7 @@ LGraphNode.prototype.executeAction = function(action) ctx.strokeRect(margin, y, width - margin * 2, H); if (show_text) { ctx.textAlign = "center"; - ctx.fillStyle = "#AAA"; + ctx.fillStyle = text_color; ctx.fillText(w.name, width * 0.5, y + H * 0.7); } break; @@ -8090,11 +8097,11 @@ LGraphNode.prototype.executeAction = function(action) ); ctx.fill(); if (show_text) { - ctx.fillStyle = "#999"; + ctx.fillStyle = secondary_text_color; if (w.name != null) { ctx.fillText(w.name, margin * 2, y + H * 0.7); } - ctx.fillStyle = w.value ? "#DDD" : "#888"; + ctx.fillStyle = w.value ? text_color : secondary_text_color; ctx.textAlign = "right"; ctx.fillText( w.value @@ -8125,7 +8132,7 @@ LGraphNode.prototype.executeAction = function(action) } if (show_text) { ctx.textAlign = "center"; - ctx.fillStyle = "#DDD"; + ctx.fillStyle = text_color; ctx.fillText( w.name + " " + Number(w.value).toFixed(3), width * 0.5, @@ -8143,7 +8150,7 @@ LGraphNode.prototype.executeAction = function(action) ctx.fill(); ctx.stroke(); if (show_text) { - ctx.fillStyle = "#AAA"; + ctx.fillStyle = text_color; ctx.beginPath(); ctx.moveTo(margin + 16, posY + 5); ctx.lineTo(margin + 6, posY + H * 0.5); @@ -8152,9 +8159,9 @@ LGraphNode.prototype.executeAction = function(action) ctx.lineTo(width - margin - 6, posY + H * 0.5); ctx.lineTo(width - margin - 16, posY + H - 5); ctx.fill(); - ctx.fillStyle = "#999"; + ctx.fillStyle = secondary_text_color; ctx.fillText(w.name, margin * 2 + 5, y + H * 0.7); - ctx.fillStyle = "#DDD"; + ctx.fillStyle = text_color; ctx.textAlign = "right"; if (w.type == "number") { ctx.fillText( @@ -8185,11 +8192,11 @@ LGraphNode.prototype.executeAction = function(action) ctx.fill(); ctx.stroke(); if (show_text) { - ctx.fillStyle = "#999"; + ctx.fillStyle = secondary_text_color; if (w.name != null) { ctx.fillText(w.name, margin * 2, y + H * 0.7); } - ctx.fillStyle = "#DDD"; + ctx.fillStyle = text_color; ctx.textAlign = "right"; ctx.fillText(w.value, width - margin * 2, y + H * 0.7); } diff --git a/src/nodes/geometry.js b/src/nodes/geometry.js index c8e877533..517d00b09 100644 --- a/src/nodes/geometry.js +++ b/src/nodes/geometry.js @@ -253,12 +253,13 @@ LiteGraph.registerNodeType( "geometry/toGeometry", LGraphToGeometry ); - function LGraphGeometryQuantize() { + function LGraphGeometryEval() { this.addInput("in", "geometry"); this.addOutput("out", "geometry"); this.properties = { - grid_size: 1 + code: "V[1] += 0.01 * Math.sin(I + T*0.001);", + execute_every_frame: false }; this.geometry = null; @@ -267,49 +268,110 @@ this.must_update = true; this.vertices = null; + this.func = null; } - LGraphGeometryQuantize.title = "quantize"; - LGraphGeometryQuantize.desc = "quantize vertices"; + LGraphGeometryEval.title = "geoeval"; + LGraphGeometryEval.desc = "eval code"; - LGraphGeometryQuantize.prototype.onExecute = function() { + LGraphGeometryEval.widgets_info = { + code: { widget: "code" } + }; + + LGraphGeometryEval.prototype.onConfigure = function(o) + { + this.compileCode(); + } + + LGraphGeometryEval.prototype.compileCode = function() + { + if(!this.properties.code) + return; + + try + { + this.func = new Function("V","I","T", this.properties.code); + this.boxcolor = "#AFA"; + this.must_update = true; + } + catch (err) + { + this.boxcolor = "red"; + } + } + + LGraphGeometryEval.prototype.onPropertyChanged = function(name, value) + { + if(name == "code") + { + this.properties.code = value; + this.compileCode(); + } + } + + LGraphGeometryEval.prototype.onExecute = function() { var geometry = this.getInputData(0); if(!geometry) return; - if( this.geometry_id != geometry._id || this.version != geometry._version || this.must_update ) + if(!this.func) + { + this.setOutputData(0,geometry); + return; + } + + if( this.geometry_id != geometry._id || this.version != geometry._version || this.must_update || this.properties.execute_every_frame ) { this.must_update = false; this.geometry_id = geometry._id; - this.version = geometry._version; + if(this.properties.execute_every_frame) + this.version++; + else + this.version = geometry._version; + var func = this.func; + var T = getTime(); - //copy - this.geometry = {}; + //clone + if(!this.geometry) + this.geometry = {}; for(var i in geometry) - this.geometry[i] = geometry[i]; - this.geometry._id = geometry._id; - this.geometry._version = geometry._version + 1; - - var grid_size = this.properties.grid_size; - if(grid_size != 0) { - var vertices = this.vertices; - if(!vertices || this.vertices.length != this.geometry.vertices.length) - vertices = this.vertices = new Float32Array( this.geometry.vertices ); - for(var i = 0; i < vertices.length; i+=3) - { - vertices[i] = Math.round(vertices[i]/grid_size) * grid_size; - vertices[i+1] = Math.round(vertices[i+1]/grid_size) * grid_size; - vertices[i+2] = Math.round(vertices[i+2]/grid_size) * grid_size; - } - this.geometry.vertices = vertices; + if(geometry[i] == null) + continue; + if( geometry[i].constructor == Float32Array ) + this.geometry[i] = new Float32Array( geometry[i] ); + else + this.geometry[i] = geometry[i]; } + this.geometry._id = geometry._id; + if(this.properties.execute_every_frame) + this.geometry._version = this.version; + else + this.geometry._version = geometry._version + 1; + + var V = vec3.create(); + var vertices = this.vertices; + if(!vertices || this.vertices.length != geometry.vertices.length) + vertices = this.vertices = new Float32Array( geometry.vertices ); + else + vertices.set( geometry.vertices ); + for(var i = 0; i < vertices.length; i+=3) + { + V[0] = vertices[i]; + V[1] = vertices[i+1]; + V[2] = vertices[i+2]; + func(V,i/3,T); + vertices[i] = V[0]; + vertices[i+1] = V[1]; + vertices[i+2] = V[2]; + } + this.geometry.vertices = vertices; } this.setOutputData(0,this.geometry); } - LiteGraph.registerNodeType( "geometry/quantize", LGraphGeometryQuantize ); + LiteGraph.registerNodeType( "geometry/eval", LGraphGeometryEval ); /* function LGraphGeometryDisplace() { @@ -807,6 +869,8 @@ function LGraphGeometryDisplace() { }\ '; + //based on https://inconvergent.net/2019/depth-of-field/ + /* function LGraphRenderGeometryDOF() { this.addInput("in", "geometry"); this.addInput("mat4", "mat4"); @@ -1008,6 +1072,7 @@ function LGraphGeometryDisplace() { gl_FragColor = color;\n\ }\ '; + */ diff --git a/src/nodes/gltextures.js b/src/nodes/gltextures.js index 16157aca8..99d0614b6 100755 --- a/src/nodes/gltextures.js +++ b/src/nodes/gltextures.js @@ -433,7 +433,7 @@ function LGraphTextureSave() { this.addInput("Texture", "Texture"); this.addOutput("", "Texture"); - this.properties = { name: "" }; + this.properties = { name: "", generate_mipmaps: false }; } LGraphTextureSave.title = "Save"; @@ -450,6 +450,13 @@ return; } + if (this.properties.generate_mipmaps) { + tex.bind(0); + tex.setParameter( gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR ); + gl.generateMipmap(tex.texture_type); + tex.unbind(0); + } + if (this.properties.name) { //for cases where we want to perform something when storing it if (LGraphTexture.storeTexture) { @@ -1050,8 +1057,18 @@ this.addOutput("out", "Texture"); this.properties = { factor: 0.01, + scale: [1,1], + offset: [0,0], precision: LGraphTexture.DEFAULT }; + + this._uniforms = { + u_texture: 0, + u_textureB: 1, + u_factor: 1, + u_scale: vec2.create(), + u_offset: vec2.create() + }; } LGraphTextureWarp.widgets_info = { @@ -1120,6 +1137,10 @@ } else { factor = parseFloat(this.properties.factor); } + var uniforms = this._uniforms; + uniforms.u_factor = factor; + uniforms.u_scale.set( this.properties.scale ); + uniforms.u_offset.set( this.properties.offset ); this._tex.drawTo(function() { gl.disable(gl.DEPTH_TEST); @@ -1133,7 +1154,7 @@ } var mesh = Mesh.getScreenQuad(); shader - .uniforms({ u_texture: 0, u_textureB: 1, u_factor: factor }) + .uniforms( uniforms ) .draw(mesh); }); @@ -1147,10 +1168,12 @@ uniform sampler2D u_textureB;\n\ varying vec2 v_coord;\n\ uniform float u_factor;\n\ + uniform vec2 u_scale;\n\ + uniform vec2 u_offset;\n\ \n\ void main() {\n\ vec2 uv = v_coord;\n\ - uv += ( texture2D(u_textureB, uv).rg - vec2(0.5)) * u_factor;\n\ + uv += ( texture2D(u_textureB, uv).rg - vec2(0.5)) * u_factor * u_scale + u_offset;\n\ gl_FragColor = texture2D(u_texture, uv);\n\ }\n\ "; diff --git a/src/nodes/math.js b/src/nodes/math.js index 8581fcf1b..2c3b7825f 100755 --- a/src/nodes/math.js +++ b/src/nodes/math.js @@ -1071,16 +1071,16 @@ LiteGraph.registerNodeType("math/formula", MathFormula); - function Math3DVec2ToXYZ() { + function Math3DVec2ToXY() { this.addInput("vec2", "vec2"); this.addOutput("x", "number"); this.addOutput("y", "number"); } - Math3DVec2ToXYZ.title = "Vec2->XY"; - Math3DVec2ToXYZ.desc = "vector 2 to components"; + Math3DVec2ToXY.title = "Vec2->XY"; + Math3DVec2ToXY.desc = "vector 2 to components"; - Math3DVec2ToXYZ.prototype.onExecute = function() { + Math3DVec2ToXY.prototype.onExecute = function() { var v = this.getInputData(0); if (v == null) { return; @@ -1090,7 +1090,7 @@ this.setOutputData(1, v[1]); }; - LiteGraph.registerNodeType("math3d/vec2-to-xyz", Math3DVec2ToXYZ); + LiteGraph.registerNodeType("math3d/vec2-to-xy", Math3DVec2ToXY); function Math3DXYToVec2() { this.addInputs([["x", "number"], ["y", "number"]]); diff --git a/src/nodes/math3d.js b/src/nodes/math3d.js index be9395f8a..27d139ac5 100644 --- a/src/nodes/math3d.js +++ b/src/nodes/math3d.js @@ -97,182 +97,6 @@ LiteGraph.registerNodeType("math3d/operation", Math3DOperation); - function Math3DVec2ToXYZ() { - this.addInput("vec2", "vec2"); - this.addOutput("x", "number"); - this.addOutput("y", "number"); - } - - Math3DVec2ToXYZ.title = "Vec2->XY"; - Math3DVec2ToXYZ.desc = "vector 2 to components"; - - Math3DVec2ToXYZ.prototype.onExecute = function() { - var v = this.getInputData(0); - if (v == null) { - return; - } - - this.setOutputData(0, v[0]); - this.setOutputData(1, v[1]); - }; - - LiteGraph.registerNodeType("math3d/vec2-to-xyz", Math3DVec2ToXYZ); - - function Math3DXYToVec2() { - this.addInputs([["x", "number"], ["y", "number"]]); - this.addOutput("vec2", "vec2"); - this.properties = { x: 0, y: 0 }; - this._data = new Float32Array(2); - } - - Math3DXYToVec2.title = "XY->Vec2"; - Math3DXYToVec2.desc = "components to vector2"; - - Math3DXYToVec2.prototype.onExecute = function() { - var x = this.getInputData(0); - if (x == null) { - x = this.properties.x; - } - var y = this.getInputData(1); - if (y == null) { - y = this.properties.y; - } - - var data = this._data; - data[0] = x; - data[1] = y; - - this.setOutputData(0, data); - }; - - LiteGraph.registerNodeType("math3d/xy-to-vec2", Math3DXYToVec2); - - function Math3DVec3ToXYZ() { - this.addInput("vec3", "vec3"); - this.addOutput("x", "number"); - this.addOutput("y", "number"); - this.addOutput("z", "number"); - } - - Math3DVec3ToXYZ.title = "Vec3->XYZ"; - Math3DVec3ToXYZ.desc = "vector 3 to components"; - - Math3DVec3ToXYZ.prototype.onExecute = function() { - var v = this.getInputData(0); - if (v == null) { - return; - } - - this.setOutputData(0, v[0]); - this.setOutputData(1, v[1]); - this.setOutputData(2, v[2]); - }; - - LiteGraph.registerNodeType("math3d/vec3-to-xyz", Math3DVec3ToXYZ); - - function Math3DXYZToVec3() { - this.addInputs([["x", "number"], ["y", "number"], ["z", "number"]]); - this.addOutput("vec3", "vec3"); - this.properties = { x: 0, y: 0, z: 0 }; - this._data = new Float32Array(3); - } - - Math3DXYZToVec3.title = "XYZ->Vec3"; - Math3DXYZToVec3.desc = "components to vector3"; - - Math3DXYZToVec3.prototype.onExecute = function() { - var x = this.getInputData(0); - if (x == null) { - x = this.properties.x; - } - var y = this.getInputData(1); - if (y == null) { - y = this.properties.y; - } - var z = this.getInputData(2); - if (z == null) { - z = this.properties.z; - } - - var data = this._data; - data[0] = x; - data[1] = y; - data[2] = z; - - this.setOutputData(0, data); - }; - - LiteGraph.registerNodeType("math3d/xyz-to-vec3", Math3DXYZToVec3); - - function Math3DVec4ToXYZW() { - this.addInput("vec4", "vec4"); - this.addOutput("x", "number"); - this.addOutput("y", "number"); - this.addOutput("z", "number"); - this.addOutput("w", "number"); - } - - Math3DVec4ToXYZW.title = "Vec4->XYZW"; - Math3DVec4ToXYZW.desc = "vector 4 to components"; - - Math3DVec4ToXYZW.prototype.onExecute = function() { - var v = this.getInputData(0); - if (v == null) { - return; - } - - this.setOutputData(0, v[0]); - this.setOutputData(1, v[1]); - this.setOutputData(2, v[2]); - this.setOutputData(3, v[3]); - }; - - LiteGraph.registerNodeType("math3d/vec4-to-xyzw", Math3DVec4ToXYZW); - - function Math3DXYZWToVec4() { - this.addInputs([ - ["x", "number"], - ["y", "number"], - ["z", "number"], - ["w", "number"] - ]); - this.addOutput("vec4", "vec4"); - this.properties = { x: 0, y: 0, z: 0, w: 0 }; - this._data = new Float32Array(4); - } - - Math3DXYZWToVec4.title = "XYZW->Vec4"; - Math3DXYZWToVec4.desc = "components to vector4"; - - Math3DXYZWToVec4.prototype.onExecute = function() { - var x = this.getInputData(0); - if (x == null) { - x = this.properties.x; - } - var y = this.getInputData(1); - if (y == null) { - y = this.properties.y; - } - var z = this.getInputData(2); - if (z == null) { - z = this.properties.z; - } - var w = this.getInputData(3); - if (w == null) { - w = this.properties.w; - } - - var data = this._data; - data[0] = x; - data[1] = y; - data[2] = z; - data[3] = w; - - this.setOutputData(0, data); - }; - - LiteGraph.registerNodeType("math3d/xyzw-to-vec4", Math3DXYZWToVec4); - function Math3DVec3Scale() { this.addInput("in", "vec3"); this.addInput("f", "number");