diff --git a/build/litegraph.js b/build/litegraph.js index 0bf2668f4..c9ab62214 100644 --- a/build/litegraph.js +++ b/build/litegraph.js @@ -20,6 +20,7 @@ var LiteGraph = { NODE_COLLAPSED_RADIUS: 10, NODE_COLLAPSED_WIDTH: 80, CANVAS_GRID_SIZE: 10, + NODE_TITLE_COLOR: "#222", NODE_DEFAULT_COLOR: "#999", NODE_DEFAULT_BGCOLOR: "#444", NODE_DEFAULT_BOXCOLOR: "#AEF", @@ -28,6 +29,8 @@ var LiteGraph = { DEFAULT_POSITION: [100,100],//default node position node_images_path: "", + proxy: null, //used to redirect calls + debug: false, throw_errors: true, registered_node_types: {}, @@ -89,6 +92,7 @@ var LiteGraph = { node.type = type; if(!node.title) node.title = title; + if(!node.properties) node.properties = {}; if(!node.flags) node.flags = {}; if(!node.size) node.size = node.computeSize(); if(!node.pos) node.pos = LiteGraph.DEFAULT_POSITION.concat(); @@ -794,8 +798,11 @@ LGraph.prototype.getGlobalInputData = function(name) } //rename the global input -LGraph.prototype.renameGlobalInput = function(old_name, name, data) +LGraph.prototype.renameGlobalInput = function(old_name, name) { + if(name == old_name) + return; + if(!this.global_inputs[old_name]) return false; @@ -815,6 +822,19 @@ LGraph.prototype.renameGlobalInput = function(old_name, name, data) this.onGlobalsChange(); } +LGraph.prototype.changeGlobalInputType = function(name, type) +{ + if(!this.global_inputs[name]) + return false; + + if(this.global_inputs[name].type == type) + return; + + this.global_inputs[name].type = type; + if(this.onGlobalInputTypeChanged) + this.onGlobalInputTypeChanged(name, type); +} + LGraph.prototype.removeGlobalInput = function(name) { if(!this.global_inputs[name]) @@ -862,7 +882,7 @@ LGraph.prototype.getGlobalOutputData = function(name) //rename the global output -LGraph.prototype.renameGlobalOutput = function(old_name, name, data) +LGraph.prototype.renameGlobalOutput = function(old_name, name) { if(!this.global_outputs[old_name]) return false; @@ -883,6 +903,19 @@ LGraph.prototype.renameGlobalOutput = function(old_name, name, data) this.onGlobalsChange(); } +LGraph.prototype.changeGlobalOutputType = function(name, type) +{ + if(!this.global_outputs[name]) + return false; + + if(this.global_outputs[name].type == type) + return; + + this.global_outputs[name].type = type; + if(this.onGlobalOutputTypeChanged) + this.onGlobalOutputTypeChanged(name, type); +} + LGraph.prototype.removeGlobalOutput = function(name) { if(!this.global_outputs[name]) @@ -1092,6 +1125,7 @@ LGraph.prototype.onNodeTrace = function(node, msg, color) + onSerialize + onSelected + onDeselected + + onDropFile */ /** @@ -1101,6 +1135,11 @@ LGraph.prototype.onNodeTrace = function(node, msg, color) */ function LGraphNode(title) +{ + this._ctor(); +} + +LGraphNode.prototype._ctor = function( title ) { this.title = title || "Unnamed"; this.size = [LiteGraph.NODE_WIDTH,60]; @@ -1116,6 +1155,7 @@ function LGraphNode(title) this.connections = []; //local data + this.properties = {}; this.data = null; //persistent local data this.flags = { //skip_title_render: true, @@ -1133,6 +1173,14 @@ LGraphNode.prototype.configure = function(info) { if(j == "console") continue; + if(j == "properties") + { + //i dont want to clone properties, I want to reuse the old container + for(var k in info.properties) + this.properties[k] = info.properties[k]; + continue; + } + if(info[j] == null) continue; else if (typeof(info[j]) == 'object') //object @@ -1224,46 +1272,9 @@ LGraphNode.prototype.clone = function() delete data["id"]; node.configure(data); - /* - node.size = this.size.concat(); - if(this.inputs) - for(var i = 0, l = this.inputs.length; i < l; ++i) - { - if(node.findInputSlot( this.inputs[i].name ) == -1) - node.addInput( this.inputs[i].name, this.inputs[i].type ); - } - - if(this.outputs) - for(var i = 0, l = this.outputs.length; i < l; ++i) - { - if(node.findOutputSlot( this.outputs[i].name ) == -1) - node.addOutput( this.outputs[i].name, this.outputs[i].type ); - } - */ - return node; } -//reduced version of objectivize: NOT FINISHED -/* -LGraphNode.prototype.reducedObjectivize = function() -{ - var o = this.objectivize(); - - var type = LiteGraph.getNodeType(o.type); - - if(type.title == o.title) - delete o["title"]; - - if(type.size && compareObjects(o.size,type.size)) - delete o["size"]; - - if(type.properties && compareObjects(o.properties, type.properties)) - delete o["properties"]; - - return o; -} -*/ /** * serialize and stringify @@ -1471,7 +1482,7 @@ LGraphNode.prototype.removeOutput = function(slot) * @method addInput * @param {string} name * @param {string} type string defining the input type ("vec3","number",...) -* @param {Object} extra_info this can be used to have special properties of an input (special color, position, etc) +* @param {Object} extra_info this can be used to have special properties of an input (label, color, position, etc) */ LGraphNode.prototype.addInput = function(name,type,extra_info) { @@ -1497,7 +1508,7 @@ LGraphNode.prototype.addInputs = function(array) for(var i in array) { var info = array[i]; - var o = {name:info[0],type:info[1],link:null}; + var o = {name:info[0], type:info[1], link:null}; if(array[2]) for(var j in info[2]) o[j] = info[2][j]; @@ -1548,7 +1559,7 @@ LGraphNode.prototype.addConnection = function(name,type,pos,direction) LGraphNode.prototype.computeSize = function(minHeight) { var rows = Math.max( this.inputs ? this.inputs.length : 1, this.outputs ? this.outputs.length : 1); - var size = [0,0]; + var size = new Float32Array([0,0]); size[1] = rows * 14 + 6; if(!this.inputs || this.inputs.length == 0 || !this.outputs || this.outputs.length == 0) size[0] = LiteGraph.NODE_WIDTH * 0.5; @@ -1682,8 +1693,8 @@ LGraphNode.prototype.connect = function(slot, node, target_slot) output.links = []; output.links.push({id:node.id, slot: -1}); } - else if(output.type == 0 || //generic output - node.inputs[target_slot].type == 0 || //generic input + else if( !output.type || //generic output + !node.inputs[target_slot].type || //generic input output.type == node.inputs[target_slot].type) //same type { //info: link structure => [ 0:link_id, 1:start_node_id, 2:start_slot, 3:end_node_id, 4:end_slot ] @@ -2006,7 +2017,7 @@ LGraphNode.prototype.localToScreen = function(x,y, graphcanvas) * @param {HTMLCanvas} canvas the canvas where you want to render (it accepts a selector in string format or the canvas itself) * @param {LGraph} graph [optional] */ -function LGraphCanvas(canvas, graph) +function LGraphCanvas(canvas, graph, skip_render) { //if(graph === undefined) // throw ("No graph assigned"); @@ -2017,6 +2028,9 @@ function LGraphCanvas(canvas, graph) if(!canvas) throw("no canvas found"); + this.max_zoom = 10; + this.min_zoom = 0.1; + //link canvas and graph if(graph) graph.attachCanvas(this); @@ -2024,7 +2038,8 @@ function LGraphCanvas(canvas, graph) this.setCanvas(canvas); this.clear(); - this.startRendering(); + if(!skip_render) + this.startRendering(); } LGraphCanvas.link_type_colors = {'number':"#AAC",'node':"#DCA"}; @@ -2174,8 +2189,8 @@ LGraphCanvas.prototype.setCanvas = function(canvas) this.canvas = canvas; //this.canvas.tabindex = "1000"; - this.canvas.className += " lgraphcanvas"; - this.canvas.data = this; + canvas.className += " lgraphcanvas"; + canvas.data = this; //bg canvas: used for non changing stuff this.bgcanvas = null; @@ -2186,47 +2201,123 @@ LGraphCanvas.prototype.setCanvas = function(canvas) this.bgcanvas.height = this.canvas.height; } - if(this.canvas.getContext == null) + if(canvas.getContext == null) { throw("This browser doesnt support Canvas"); } - this.ctx = this.canvas.getContext("2d"); - this.bgctx = this.bgcanvas.getContext("2d"); + var ctx = this.ctx = canvas.getContext("2d"); + if(ctx == null) + { + console.warn("This canvas seems to be WebGL, enabling WebGL renderer"); + this.enableWebGL(); + } //input: (move and up could be unbinded) this._mousemove_callback = this.processMouseMove.bind(this); this._mouseup_callback = this.processMouseUp.bind(this); - this.canvas.addEventListener("mousedown", this.processMouseDown.bind(this), true ); //down do not need to store the binded - this.canvas.addEventListener("mousemove", this._mousemove_callback); + canvas.addEventListener("mousedown", this.processMouseDown.bind(this), true ); //down do not need to store the binded + canvas.addEventListener("mousemove", this._mousemove_callback); - this.canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; }); + canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; }); - - this.canvas.addEventListener("mousewheel", this.processMouseWheel.bind(this), false); - this.canvas.addEventListener("DOMMouseScroll", this.processMouseWheel.bind(this), false); + canvas.addEventListener("mousewheel", this.processMouseWheel.bind(this), false); + canvas.addEventListener("DOMMouseScroll", this.processMouseWheel.bind(this), false); //touch events //if( 'touchstart' in document.documentElement ) { //alert("doo"); - this.canvas.addEventListener("touchstart", this.touchHandler, true); - this.canvas.addEventListener("touchmove", this.touchHandler, true); - this.canvas.addEventListener("touchend", this.touchHandler, true); - this.canvas.addEventListener("touchcancel", this.touchHandler, true); + canvas.addEventListener("touchstart", this.touchHandler, true); + canvas.addEventListener("touchmove", this.touchHandler, true); + canvas.addEventListener("touchend", this.touchHandler, true); + canvas.addEventListener("touchcancel", this.touchHandler, true); } //this.canvas.onselectstart = function () { return false; }; - this.canvas.addEventListener("keydown", function(e) { + canvas.addEventListener("keydown", function(e) { that.processKeyDown(e); }); - this.canvas.addEventListener("keyup", function(e) { + canvas.addEventListener("keyup", function(e) { that.processKeyUp(e); }); + + //droping files + canvas.ondragover = function () { console.log('hover'); return false; }; + canvas.ondragend = function () { console.log('out'); return false; }; + canvas.ondrop = function (e) { + e.preventDefault(); + that.adjustMouseEvent(e); + + var pos = [e.canvasX,e.canvasY]; + var node = that.graph.getNodeOnPos(pos[0],pos[1]); + if(!node) + return; + + if(!node.onDropFile) + return; + + var file = e.dataTransfer.files[0]; + var filename = file.name; + var ext = LGraphCanvas.getFileExtension( filename ); + //console.log(file); + + //prepare reader + var reader = new FileReader(); + reader.onload = function (event) { + //console.log(event.target); + var data = event.target.result; + node.onDropFile( data, filename, file ); + }; + + //read data + var type = file.type.split("/")[0]; + if(type == "text") + reader.readAsText(file); + else if (type == "image") + reader.readAsDataURL(file); + else + reader.readAsArrayBuffer(file); + + return false; + }; } +LGraphCanvas.getFileExtension = function (url) +{ + var question = url.indexOf("?"); + if(question != -1) + url = url.substr(0,question); + var point = url.lastIndexOf("."); + if(point == -1) + return ""; + return url.substr(point+1).toLowerCase(); +} + +//this file allows to render the canvas using WebGL instead of Canvas2D +//this is useful if you plant to render 3D objects inside your nodes +LGraphCanvas.prototype.enableWebGL = function() +{ + if(typeof(GL) === undefined) + throw("litegl.js must be included to use a WebGL canvas"); + if(typeof(enableWebGLCanvas) === undefined) + throw("webglCanvas.js must be included to use this feature"); + + this.gl = this.ctx = enableWebGLCanvas(this.canvas); + this.ctx.webgl = true; + this.bgcanvas = this.canvas; + this.bgctx = this.gl; + + /* + GL.create({ canvas: this.bgcanvas }); + this.bgctx = enableWebGLCanvas( this.bgcanvas ); + window.gl = this.gl; + */ +} + + /* LGraphCanvas.prototype.UIinit = function() { @@ -2325,14 +2416,6 @@ LGraphCanvas.prototype.startRendering = function() if(this.is_rendering) window.requestAnimationFrame( renderFrame.bind(this) ); } - - - /* - this.rendering_timer_id = setInterval( function() { - //trace("Frame: " + new Date().getTime() ); - that.draw(); - }, 1000/50); - */ } /** @@ -2440,6 +2523,13 @@ LGraphCanvas.prototype.processMouseDown = function(e) } } + //Search for corner + if( !skip_action && isInsideRectangle(e.canvasX, e.canvasY, n.pos[0], n.pos[1] - LiteGraph.NODE_TITLE_HEIGHT ,LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT )) + { + n.collapse(); + skip_action = true; + } + //it wasnt clicked on the links boxes if(!skip_action) { @@ -2581,7 +2671,7 @@ LGraphCanvas.prototype.processMouseMove = function(e) if(slot != -1 && n.inputs[slot]) { var slot_type = n.inputs[slot].type; - if(slot_type == this.connecting_output.type || slot_type == "*" || this.connecting_output.type == "*") + if(slot_type == this.connecting_output.type || !slot_type || !this.connecting_output.type ) this._highlight_input = pos; } else @@ -2693,6 +2783,13 @@ LGraphCanvas.prototype.processMouseUp = function(e) { this.connecting_node.connect(this.connecting_slot, node, slot); } + else + { //not on top of an input + var input = node.getInputInfo(0); + //simple connect + if(input && !input.link && input.type == this.connecting_output.type) + this.connecting_node.connect(this.connecting_slot, node, 0); + } } } @@ -2975,10 +3072,10 @@ LGraphCanvas.prototype.setZoom = function(value, zooming_center) this.scale = value; - if(this.scale > 4) - this.scale = 4; - else if(this.scale < 0.1) - this.scale = 0.1; + if(this.scale > this.max_zoom) + this.scale = this.max_zoom; + else if(this.scale < this.min_zoom) + this.scale = this.min_zoom; var new_center = this.convertOffsetToCanvas( zooming_center ); var delta_offset = [new_center[0] - center[0], new_center[1] - center[1]]; @@ -3065,7 +3162,7 @@ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas) } if(this.dirty_bgcanvas || force_bgcanvas) - this.drawBgcanvas(); + this.drawBackCanvas(); if(this.dirty_canvas || force_canvas) this.drawFrontCanvas(); @@ -3076,7 +3173,15 @@ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas) LGraphCanvas.prototype.drawFrontCanvas = function() { + if(!this.ctx) + this.ctx = this.bgcanvas.getContext("2d"); var ctx = this.ctx; + if(!ctx) //maybe is using webgl... + return; + + if(ctx.start) + ctx.start(); + var canvas = this.canvas; //reset in case of error @@ -3097,7 +3202,14 @@ LGraphCanvas.prototype.drawFrontCanvas = function() ctx.clearRect(0,0,canvas.width, canvas.height); //draw bg canvas - ctx.drawImage(this.bgcanvas,0,0); + if(this.bgcanvas == this.canvas) + this.drawBackCanvas(); + else + ctx.drawImage(this.bgcanvas,0,0); + + //rendering + if(this.onRender) + this.onRender(canvas, ctx); //info widget if(this.show_info) @@ -3182,17 +3294,23 @@ LGraphCanvas.prototype.drawFrontCanvas = function() //this.dirty_area = null; } + if(ctx.finish) //this is a function I use in webgl renderer + ctx.finish(); + this.dirty_canvas = false; } -LGraphCanvas.prototype.drawBgcanvas = function() +LGraphCanvas.prototype.drawBackCanvas = function() { var canvas = this.bgcanvas; + if(!this.bgctx) + this.bgctx = this.bgcanvas.getContext("2d"); var ctx = this.bgctx; - + if(ctx.start) + ctx.start(); //clear - canvas.width = canvas.width; + ctx.clearRect(0,0,canvas.width, canvas.height); //reset in case of error ctx.restore(); @@ -3209,7 +3327,7 @@ LGraphCanvas.prototype.drawBgcanvas = function() if(this.background_image && this.scale > 0.5) { ctx.globalAlpha = (1.0 - 0.5 / this.scale) * this.editor_alpha; - ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false + ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false; if(!this._bg_img || this._bg_img.name != this.background_image) { this._bg_img = new Image(); @@ -3238,8 +3356,12 @@ LGraphCanvas.prototype.drawBgcanvas = function() } ctx.globalAlpha = 1.0; + ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = true; } + if(this.onBackgroundRender) + this.onBackgroundRender(canvas, ctx); + //DEBUG: show clipping area //ctx.fillStyle = "red"; //ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - this.visible_area[0] - 20, this.visible_area[3] - this.visible_area[1] - 20); @@ -3268,6 +3390,9 @@ LGraphCanvas.prototype.drawBgcanvas = function() ctx.restore(); } + if(ctx.finish) + ctx.finish(); + this.dirty_bgcanvas = false; this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas } @@ -3340,7 +3465,10 @@ LGraphCanvas.prototype.drawNode = function(node, ctx ) var shape = node.shape || "box"; var size = new Float32Array(node.size); if(node.flags.collapsed) - size.set([LiteGraph.NODE_COLLAPSED_WIDTH, 0]); + { + size[0] = LiteGraph.NODE_COLLAPSED_WIDTH; + size[1] = 0; + } //Start clipping if(node.flags.clip_area) @@ -3493,27 +3621,30 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo var shape = node.shape || "box"; if(shape == "box") { + ctx.beginPath(); + ctx.rect(0,no_title ? 0 : -title_height, size[0]+1, no_title ? size[1] : size[1] + title_height); + ctx.fill(); + ctx.shadowColor = "transparent"; + if(selected) { ctx.strokeStyle = "#CCC"; - ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) ); + ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) - 1); ctx.strokeStyle = fgcolor; } - - ctx.beginPath(); - ctx.rect(0,no_title ? 0.5 : -title_height + 0.5,size[0]+1, no_title ? size[1] : size[1] + title_height); } else if (node.shape == "round") { ctx.roundRect(0,no_title ? 0 : -title_height,size[0], no_title ? size[1] : size[1] + title_height, 10); + ctx.fill(); } else if (node.shape == "circle") { ctx.beginPath(); ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2); + ctx.fill(); } - ctx.fill(); ctx.shadowColor = "transparent"; //ctx.stroke(); @@ -3537,15 +3668,16 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo if(shape == "box") { ctx.beginPath(); - ctx.fillRect(0,-title_height,size[0]+1,title_height); - ctx.stroke(); + ctx.rect(0, -title_height, size[0]+1, title_height); + ctx.fill() + //ctx.stroke(); } else if (shape == "round") { ctx.roundRect(0,-title_height,size[0], title_height,10,0); //ctx.fillRect(0,8,size[0],NODE_TITLE_HEIGHT - 12); ctx.fill(); - ctx.stroke(); + //ctx.stroke(); } //box @@ -3561,9 +3693,9 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo //title text ctx.font = this.title_text_font; var title = node.getTitle(); - if(title && this.scale > 0.8) + if(title && this.scale > 0.5) { - ctx.fillStyle = "#222"; + ctx.fillStyle = LiteGraph.NODE_TITLE_COLOR; ctx.fillText( title, 16, 13 - title_height ); } } @@ -4067,15 +4199,18 @@ LGraphCanvas.prototype.getCanvasMenuOptions = function() //{content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll } ]; - if(this._graph_stack) + if(this._graph_stack && this._graph_stack.length > 0) options = [{content:"Close subgraph", callback: this.closeSubgraph.bind(this) },null].concat(options); } if(this.getExtraMenuOptions) { var extra = this.getExtraMenuOptions(this); - extra.push(null); - options = extra.concat( options ); + if(extra) + { + extra.push(null); + options = extra.concat( options ); + } } return options; @@ -4102,8 +4237,11 @@ LGraphCanvas.prototype.getNodeMenuOptions = function(node) if(node.getExtraMenuOptions) { var extra = node.getExtraMenuOptions(this); - extra.push(null); - options = extra.concat( options ); + if(extra) + { + extra.push(null); + options = extra.concat( options ); + } } if( node.clonable !== false ) @@ -4427,14 +4565,35 @@ LiteGraph.closeAllContextualMenus = function() result[i].parentNode.removeChild( result[i] ); } -LiteGraph.extendClass = function(origin, target) +LiteGraph.extendClass = function ( target, origin ) { for(var i in origin) //copy class properties + { + if(target.hasOwnProperty(i)) + continue; target[i] = origin[i]; + } + if(origin.prototype) //copy prototype properties - for(var i in origin.prototype) - target.prototype[i] = origin.prototype[i]; -} + for(var i in origin.prototype) //only enumerables + { + if(!origin.prototype.hasOwnProperty(i)) + continue; + + if(target.prototype.hasOwnProperty(i)) //avoid overwritting existing ones + continue; + + //copy getters + if(origin.prototype.__lookupGetter__(i)) + target.prototype.__defineGetter__(i, origin.prototype.__lookupGetter__(i)); + else + target.prototype[i] = origin.prototype[i]; + + //and setters + if(origin.prototype.__lookupSetter__(i)) + target.prototype.__defineSetter__(i, origin.prototype.__lookupSetter__(i)); + } +} /* LiteGraph.createNodetypeWrapper = function( class_object ) @@ -4459,78 +4618,27 @@ if( !window["requestAnimationFrame"] ) (function(){ -//Input for a subgraph -function GlobalInput() -{ - this.title = "Input"; - - //random name to avoid problems with other outputs when added - var genname = "input_" + (Math.random()*1000).toFixed(); - this.properties = { name: genname, type: "number" }; - this.addOutput("value",0); -} - -GlobalInput.title = "Input"; -GlobalInput.desc = "Input of the graph"; - -GlobalInput.prototype.onAdded = function() -{ - this.graph.addGlobalInput( this.properties.name, this.properties.type ); -} - -GlobalInput.prototype.onExecute = function() -{ - var name = this.properties.name; - - //read from global input - var data = this.graph.global_inputs[name]; - if(!data) return; - - //put through output - this.setOutputData(0,data.value); -} - -LiteGraph.registerNodeType("graph/input", GlobalInput); - - -//Output for a subgraph -function GlobalOutput() -{ - this.title = "Output"; - - //random name to avoid problems with other outputs when added - var genname = "output_" + (Math.random()*1000).toFixed(); - this.properties = { name: genname, type: "number" }; - this.addInput("value","number"); -} - -GlobalOutput.title = "Ouput"; -GlobalOutput.desc = "Output of the graph"; - -GlobalOutput.prototype.onAdded = function() -{ - var name = this.graph.addGlobalOutput( this.properties.name, this.properties.type ); -} - -GlobalOutput.prototype.onExecute = function() -{ - this.graph.setGlobalOutputData( this.properties.name, this.getInputData(0) ); -} - -LiteGraph.registerNodeType("graph/output", GlobalOutput); - - //Subgraph: a node that contains a graph function Subgraph() { var that = this; + this.size = [120,60]; + + //create inner graph this.subgraph = new LGraph(); this.subgraph._subgraph_node = this; this.subgraph._is_subgraph = true; - this.subgraph.onGlobalInputAdded = this.onSubgraphNewGlobalInput.bind(this); - this.subgraph.onGlobalOutputAdded = this.onSubgraphNewGlobalOutput.bind(this); - this.bgcolor = "#FA3"; + this.subgraph.onGlobalInputAdded = this.onSubgraphNewGlobalInput.bind(this); + this.subgraph.onGlobalInputRenamed = this.onSubgraphRenamedGlobalInput.bind(this); + this.subgraph.onGlobalInputTypeChanged = this.onSubgraphTypeChangeGlobalInput.bind(this); + + this.subgraph.onGlobalOutputAdded = this.onSubgraphNewGlobalOutput.bind(this); + this.subgraph.onGlobalOutputRenamed = this.onSubgraphRenamedGlobalOutput.bind(this); + this.subgraph.onGlobalOutputTypeChanged = this.onSubgraphTypeChangeGlobalOutput.bind(this); + + + this.bgcolor = "#940"; } Subgraph.title = "Subgraph"; @@ -4538,14 +4646,55 @@ Subgraph.desc = "Graph inside a node"; Subgraph.prototype.onSubgraphNewGlobalInput = function(name, type) { + //add input to the node this.addInput(name, type); } +Subgraph.prototype.onSubgraphRenamedGlobalInput = function(oldname, name) +{ + var slot = this.findInputSlot( oldname ); + if(slot == -1) + return; + var info = this.getInputInfo(slot); + info.name = name; +} + +Subgraph.prototype.onSubgraphTypeChangeGlobalInput = function(name, type) +{ + var slot = this.findInputSlot( name ); + if(slot == -1) + return; + var info = this.getInputInfo(slot); + info.type = type; +} + + Subgraph.prototype.onSubgraphNewGlobalOutput = function(name, type) { + //add output to the node this.addOutput(name, type); } + +Subgraph.prototype.onSubgraphRenamedGlobalOutput = function(oldname, name) +{ + var slot = this.findOutputSlot( oldname ); + if(slot == -1) + return; + var info = this.getOutputInfo(slot); + info.name = name; +} + +Subgraph.prototype.onSubgraphTypeChangeGlobalOutput = function(name, type) +{ + var slot = this.findOutputSlot( name ); + if(slot == -1) + return; + var info = this.getOutputInfo(slot); + info.type = type; +} + + Subgraph.prototype.getExtraMenuOptions = function(graphcanvas) { var that = this; @@ -4593,10 +4742,147 @@ Subgraph.prototype.serialize = function() return data; } +Subgraph.prototype.clone = function() +{ + var node = LiteGraph.createNode(this.type); + var data = this.serialize(); + delete data["id"]; + delete data["inputs"]; + delete data["outputs"]; + node.configure(data); + return node; +} + LiteGraph.registerNodeType("graph/subgraph", Subgraph); +//Input for a subgraph +function GlobalInput() +{ + + //random name to avoid problems with other outputs when added + var input_name = "input_" + (Math.random()*1000).toFixed(); + + this.addOutput(input_name, null ); + + this.properties = {name: input_name, type: null }; + + var that = this; + + Object.defineProperty(this.properties, "name", { + get: function() { + return input_name; + }, + set: function(v) { + if(v == "") + return; + + var info = that.getOutputInfo(0); + if(info.name == v) + return; + info.name = v; + if(that.graph) + that.graph.renameGlobalInput(input_name, v); + input_name = v; + }, + enumerable: true + }); + + Object.defineProperty(this.properties, "type", { + get: function() { return that.outputs[0].type; }, + set: function(v) { + that.outputs[0].type = v; + if(that.graph) + that.graph.changeGlobalInputType(input_name, that.outputs[0].type); + }, + enumerable: true + }); +} + +GlobalInput.title = "Input"; +GlobalInput.desc = "Input of the graph"; + +//When added to graph tell the graph this is a new global input +GlobalInput.prototype.onAdded = function() +{ + this.graph.addGlobalInput( this.properties.name, this.properties.type ); +} + +GlobalInput.prototype.onExecute = function() +{ + var name = this.properties.name; + + //read from global input + var data = this.graph.global_inputs[name]; + if(!data) return; + + //put through output + this.setOutputData(0,data.value); +} + +LiteGraph.registerNodeType("graph/input", GlobalInput); + + + +//Output for a subgraph +function GlobalOutput() +{ + //random name to avoid problems with other outputs when added + var output_name = "output_" + (Math.random()*1000).toFixed(); + + this.addInput(output_name, null); + + this.properties = {name: output_name, type: null }; + + var that = this; + + Object.defineProperty(this.properties, "name", { + get: function() { + return output_name; + }, + set: function(v) { + if(v == "") + return; + + var info = that.getInputInfo(0); + if(info.name == v) + return; + info.name = v; + if(that.graph) + that.graph.renameGlobalOutput(output_name, v); + output_name = v; + }, + enumerable: true + }); + + Object.defineProperty(this.properties, "type", { + get: function() { return that.inputs[0].type; }, + set: function(v) { + that.inputs[0].type = v; + if(that.graph) + that.graph.changeGlobalInputType( output_name, that.inputs[0].type ); + }, + enumerable: true + }); +} + +GlobalOutput.title = "Ouput"; +GlobalOutput.desc = "Output of the graph"; + +GlobalOutput.prototype.onAdded = function() +{ + var name = this.graph.addGlobalOutput( this.properties.name, this.properties.type ); +} + +GlobalOutput.prototype.onExecute = function() +{ + this.graph.setGlobalOutputData( this.properties.name, this.getInputData(0) ); +} + +LiteGraph.registerNodeType("graph/output", GlobalOutput); + + //Constant function Constant() @@ -6112,6 +6398,105 @@ if(window.glMatrix) (function(){ + + +function GraphicsImage() +{ + this.inputs = []; + this.addOutput("frame","image"); + this.properties = {"url":""}; +} + +GraphicsImage.title = "Image"; +GraphicsImage.desc = "Image loader"; +GraphicsImage.widgets = [{name:"load",text:"Load",type:"button"}]; + + +GraphicsImage.prototype.onAdded = function() +{ + if(this.properties["url"] != "" && this.img == null) + { + this.loadImage(this.properties["url"]); + } +} + +GraphicsImage.prototype.onDrawBackground = function(ctx) +{ + if(this.img && this.size[0] > 5 && this.size[1] > 5) + ctx.drawImage(this.img, 0,0,this.size[0],this.size[1]); +} + + +GraphicsImage.prototype.onExecute = function() +{ + if(!this.img) + this.boxcolor = "#000"; + if(this.img && this.img.width) + this.setOutputData(0,this.img); + else + this.setOutputData(0,null); + if(this.img && this.img.dirty) + this.img.dirty = false; +} + +GraphicsImage.prototype.onPropertyChange = function(name,value) +{ + this.properties[name] = value; + if (name == "url" && value != "") + this.loadImage(value); + + return true; +} + +GraphicsImage.prototype.onDropFile = function(file, filename) +{ + var img = new Image(); + img.src = file; + this.img = img; +} + +GraphicsImage.prototype.loadImage = function(url) +{ + if(url == "") + { + this.img = null; + return; + } + + this.trace("loading image..."); + this.img = document.createElement("img"); + + var url = name; + if(url.substr(0,7) == "http://") + { + if(LiteGraph.proxy) //proxy external files + url = LiteGraph.proxy + url.substr(7); + } + + this.img.src = url; + this.boxcolor = "#F95"; + var that = this; + this.img.onload = function() + { + that.trace("Image loaded, size: " + that.img.width + "x" + that.img.height ); + this.dirty = true; + that.boxcolor = "#9F9"; + that.setDirtyCanvas(true); + } +} + +GraphicsImage.prototype.onWidget = function(e,widget) +{ + if(widget.name == "load") + { + this.loadImage(this.properties["url"]); + } +} + +LiteGraph.registerNodeType("graphics/image", GraphicsImage); + + + function ColorPalette() { this.addInput("f","number"); @@ -6374,81 +6759,6 @@ ImageFade.prototype.onExecute = function() LiteGraph.registerNodeType("graphics/imagefade", ImageFade); -function GraphicsImage() -{ - this.inputs = []; - this.addOutput("frame","image"); - this.properties = {"url":""}; -} - -GraphicsImage.title = "Image"; -GraphicsImage.desc = "Image loader"; -GraphicsImage.widgets = [{name:"load",text:"Load",type:"button"}]; - - -GraphicsImage.prototype.onAdded = function() -{ - if(this.properties["url"] != "" && this.img == null) - { - this.loadImage(this.properties["url"]); - } -} - - -GraphicsImage.prototype.onExecute = function() -{ - if(!this.img) - this.boxcolor = "#000"; - if(this.img && this.img.width) - this.setOutputData(0,this.img); - else - this.setOutputData(0,null); - if(this.img.dirty) - this.img.dirty = false; -} - -GraphicsImage.prototype.onPropertyChange = function(name,value) -{ - this.properties[name] = value; - if (name == "url" && value != "") - this.loadImage(value); - - return true; -} - -GraphicsImage.prototype.loadImage = function(url) -{ - if(url == "") - { - this.img = null; - return; - } - - this.trace("loading image..."); - this.img = document.createElement("img"); - this.img.src = "miniproxy.php?url=" + url; - this.boxcolor = "#F95"; - var that = this; - this.img.onload = function() - { - that.trace("Image loaded, size: " + that.img.width + "x" + that.img.height ); - this.dirty = true; - that.boxcolor = "#9F9"; - that.setDirtyCanvas(true); - } -} - -GraphicsImage.prototype.onWidget = function(e,widget) -{ - if(widget.name == "load") - { - this.loadImage(this.properties["url"]); - } -} - -LiteGraph.registerNodeType("graphics/image", GraphicsImage); - - function ImageCrop() { @@ -6754,3 +7064,2047 @@ LiteGraph.registerNodeType("graphics/webcam", ImageWebcam ); })(); +//Works with Litegl.js to create WebGL nodes +if(typeof(LiteGraph) != "undefined") +{ + function LGraphTexture() + { + this.addOutput("Texture","Texture"); + this.properties = {name:""}; + this.size = [LGraphTexture.image_preview_size, LGraphTexture.image_preview_size]; + } + + LGraphTexture.title = "Texture"; + LGraphTexture.desc = "Texture"; + LGraphTexture.widgets_info = {"name": { widget:"texture"} }; + + //REPLACE THIS TO INTEGRATE WITH YOUR FRAMEWORK + LGraphTexture.textures_container = {}; //where to seek for the textures, if not specified it uses gl.textures + LGraphTexture.loadTextureCallback = null; //function in charge of loading textures when not present in the container + LGraphTexture.image_preview_size = 256; + + //flags to choose output texture type + LGraphTexture.PASS_THROUGH = 1; //do not apply FX + LGraphTexture.COPY = 2; //create new texture with the same properties as the origin texture + LGraphTexture.LOW = 3; //create new texture with low precision (byte) + LGraphTexture.HIGH = 4; //create new texture with high precision (half-float) + LGraphTexture.REUSE = 5; //reuse input texture + LGraphTexture.DEFAULT = 2; + + LGraphTexture.MODE_VALUES = { + "pass through": LGraphTexture.PASS_THROUGH, + "copy": LGraphTexture.COPY, + "low": LGraphTexture.LOW, + "high": LGraphTexture.HIGH, + "reuse": LGraphTexture.REUSE, + "default": LGraphTexture.DEFAULT + }; + + LGraphTexture.getTexture = function(name) + { + var container = LGraphTexture.textures_container || gl.textures; + + if(!container) + throw("Cannot load texture, container of textures not found"); + + var tex = container[ name ]; + if(!tex && name && name[0] != ":") + { + //texture must be loaded + if(LGraphTexture.loadTextureCallback) + { + var loader = LGraphTexture.loadTextureCallback; + if(loader) + loader( name ); + return null; + } + else + { + var url = name; + if(url.substr(0,7) == "http://") + { + if(LiteGraph.proxy) //proxy external files + url = LiteGraph.proxy + url.substr(7); + } + tex = container[ name ] = GL.Texture.fromURL(url, {}); + } + } + + return tex; + } + + //used to compute the appropiate output texture + LGraphTexture.getTargetTexture = function( origin, target, mode ) + { + if(!origin) + throw("LGraphTexture.getTargetTexture expects a reference texture"); + + var tex_type = null; + + switch(mode) + { + case LGraphTexture.LOW: tex_type = gl.UNSIGNED_BYTE; break; + case LGraphTexture.HIGH: tex_type = gl.HIGH_PRECISION_FORMAT; break; + case LGraphTexture.REUSE: return origin; break; + case LGraphTexture.COPY: + default: tex_type = origin ? origin.type : gl.UNSIGNED_BYTE; break; + } + + if(!target || target.width != origin.width || target.height != origin.height || target.type != tex_type ) + target = new GL.Texture( origin.width, origin.height, { type: tex_type, format: gl.RGBA, filter: gl.LINEAR }); + + return target; + } + + LGraphTexture.getNoiseTexture = function() + { + if(this._noise_texture) + return this._noise_texture; + + var noise = new Uint8Array(512*512*4); + for(var i = 0; i < 512*512*4; ++i) + noise[i] = Math.random() * 255; + + var texture = GL.Texture.fromMemory(512,512,noise,{ format: gl.RGBA, wrap: gl.REPEAT, filter: gl.NEAREST }); + this._noise_texture = texture; + return texture; + } + + LGraphTexture.prototype.onDropFile = function(data, filename, file) + { + if(!data) + { + this._drop_texture = null; + this.properties.name = ""; + } + else + { + var texture = null; + if( typeof(data) == "string" ) + texture = GL.Texture.fromURL( data ); + else if( filename.toLowerCase().indexOf(".dds") != -1 ) + texture = GL.Texture.fromDDSInMemory(data); + else + { + var blob = new Blob([file]); + var url = URL.createObjectURL(blob); + texture = GL.Texture.fromURL( url ); + } + + this._drop_texture = texture; + this.properties.name = filename; + } + } + + LGraphTexture.prototype.getExtraMenuOptions = function(graphcanvas) + { + var that = this; + if(!this._drop_texture) + return; + return [ {content:"Clear", callback: + function() { + that._drop_texture = null; + that.properties.name = ""; + } + }]; + } + + LGraphTexture.prototype.onExecute = function() + { + if(this._drop_texture) + { + this.setOutputData(0, this._drop_texture); + return; + } + + if(!this.properties.name) + return; + + var tex = LGraphTexture.getTexture( this.properties.name ); + if(!tex) + return; + + this._last_tex = tex; + this.setOutputData(0, tex); + } + + LGraphTexture.prototype.onDrawBackground = function(ctx) + { + if( this.flags.collapsed || this.size[1] <= 20 ) + return; + + if( this._drop_texture && ctx.webgl ) + { + ctx.drawImage( this._drop_texture, 0,0,this.size[0],this.size[1]); + //this._drop_texture.renderQuad(this.pos[0],this.pos[1],this.size[0],this.size[1]); + return; + } + + + //Different texture? then get it from the GPU + if(this._last_preview_tex != this._last_tex) + { + if(ctx.webgl) + { + this._canvas = this._last_tex; + } + else + { + var tex_canvas = LGraphTexture.generateLowResTexturePreview(this._last_tex); + if(!tex_canvas) + return; + + this._last_preview_tex = this._last_tex; + this._canvas = cloneCanvas(tex_canvas); + } + } + + if(!this._canvas) + return; + + //render to graph canvas + ctx.save(); + if(!ctx.webgl) //reverse image + { + ctx.translate(0,this.size[1]); + ctx.scale(1,-1); + } + ctx.drawImage(this._canvas,0,0,this.size[0],this.size[1]); + ctx.restore(); + } + + + //very slow, used at your own risk + LGraphTexture.generateLowResTexturePreview = function(tex) + { + if(!tex) return null; + + var size = LGraphTexture.image_preview_size; + var temp_tex = tex; + + //Generate low-level version in the GPU to speed up + if(tex.width > size || tex.height > size) + { + temp_tex = this._preview_temp_tex; + if(!this._preview_temp_tex) + { + temp_tex = new GL.Texture(size,size, { minFilter: gl.NEAREST }); + this._preview_temp_tex = temp_tex; + } + + //copy + tex.copyTo(temp_tex); + tex = temp_tex; + } + + //create intermediate canvas with lowquality version + var tex_canvas = this._preview_canvas; + if(!tex_canvas) + { + tex_canvas = createCanvas(size,size); + this._preview_canvas = tex_canvas; + } + + if(temp_tex) + temp_tex.toCanvas(tex_canvas); + return tex_canvas; + } + + LiteGraph.registerNodeType("texture/texture", LGraphTexture ); + window.LGraphTexture = LGraphTexture; + + //************************** + function LGraphTexturePreview() + { + this.addInput("Texture","Texture"); + this.properties = { flipY: false }; + this.size = [LGraphTexture.image_preview_size, LGraphTexture.image_preview_size]; + } + + LGraphTexturePreview.title = "Preview"; + LGraphTexturePreview.desc = "Show a texture in the graph canvas"; + + LGraphTexturePreview.prototype.onDrawBackground = function(ctx) + { + if(this.flags.collapsed) return; + + var tex = this.getInputData(0); + if(!tex) return; + + var tex_canvas = null; + + if(!tex.handle && ctx.webgl) + tex_canvas = tex; + else + tex_canvas = LGraphTexture.generateLowResTexturePreview(tex); + + //render to graph canvas + ctx.save(); + if(this.properties.flipY) + { + ctx.translate(0,this.size[1]); + ctx.scale(1,-1); + } + ctx.drawImage(tex_canvas,0,0,this.size[0],this.size[1]); + ctx.restore(); + } + + LiteGraph.registerNodeType("texture/preview", LGraphTexturePreview ); + window.LGraphTexturePreview = LGraphTexturePreview; + + //************************************** + + function LGraphTextureSave() + { + this.addInput("Texture","Texture"); + this.addOutput("","Texture"); + this.properties = {name:""}; + } + + LGraphTextureSave.title = "Save"; + LGraphTextureSave.desc = "Save a texture in the repository"; + + LGraphTextureSave.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(!tex) return; + + if(this.properties.name) + LGraphTexture.textures_container[ this.properties.name ] = tex; + + this.setOutputData(0, tex); + } + + LiteGraph.registerNodeType("texture/save", LGraphTextureSave ); + window.LGraphTextureSave = LGraphTextureSave; + + //**************************************************** + + function LGraphTextureOperation() + { + this.addInput("Texture","Texture"); + this.addInput("TextureB","Texture"); + this.addInput("value","number"); + this.addOutput("Texture","Texture"); + this.help = "

pixelcode must be vec3

\ +

uvcode must be vec2, is optional

\ +

uv: tex. coords

color: texture

colorB: textureB

time: scene time

value: input value

"; + + this.properties = {value:1, uvcode:"", pixelcode:"color + colorB * value", precision: LGraphTexture.DEFAULT }; + } + + LGraphTextureOperation.widgets_info = { + "uvcode": { widget:"textarea", height: 100 }, + "pixelcode": { widget:"textarea", height: 100 }, + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphTextureOperation.title = "Operation"; + LGraphTextureOperation.desc = "Texture shader operation"; + + LGraphTextureOperation.prototype.onExecute = function() + { + var tex = this.getInputData(0); + + if(this.properties.precision === LGraphTexture.PASS_THROUGH) + { + this.setOutputData(0, tex); + return; + } + + var texB = this.getInputData(1); + + if(!this.properties.uvcode && !this.properties.pixelcode) + return; + + var width = 512; + var height = 512; + var type = gl.UNSIGNED_BYTE; + if(tex) + { + width = tex.width; + height = tex.height; + type = tex.type; + } + else if (texB) + { + width = texB.width; + height = texB.height; + type = texB.type; + } + + if(!tex && !this._tex ) + this._tex = new GL.Texture( width, height, { type: this.precision === LGraphTexture.LOW ? gl.UNSIGNED_BYTE : gl.HIGH_PRECISION_FORMAT, format: gl.RGBA, filter: gl.LINEAR }); + else + this._tex = LGraphTexture.getTargetTexture( tex || this._tex, this._tex, this.properties.precision ); + + /* + if(this.properties.low_precision) + type = gl.UNSIGNED_BYTE; + + if(!this._tex || this._tex.width != width || this._tex.height != height || this._tex.type != type ) + this._tex = new GL.Texture( width, height, { type: type, format: gl.RGBA, filter: gl.LINEAR }); + */ + + var uvcode = ""; + if(this.properties.uvcode) + { + uvcode = "uv = " + this.properties.uvcode; + if(this.properties.uvcode.indexOf(";") != -1) //there are line breaks, means multiline code + uvcode = this.properties.uvcode; + } + + var pixelcode = ""; + if(this.properties.pixelcode) + { + pixelcode = "result = " + this.properties.pixelcode; + if(this.properties.pixelcode.indexOf(";") != -1) //there are line breaks, means multiline code + pixelcode = this.properties.pixelcode; + } + + var shader = this._shader; + + if(!shader || this._shader_code != (uvcode + "|" + pixelcode) ) + { + try + { + this._shader = new GL.Shader(Shader.SCREEN_VERTEX_SHADER, LGraphTextureOperation.pixel_shader, { UV_CODE: uvcode, PIXEL_CODE: pixelcode }); + this.boxcolor = "#00FF00"; + } + catch (err) + { + console.log("Error compiling shader: ", err); + this.boxcolor = "#FF0000"; + return; + } + this._shader_code = (uvcode + "|" + pixelcode); + shader = this._shader; + } + + if(!shader) + { + this.boxcolor = "red"; + return; + } + else + this.boxcolor = "green"; + + var value = this.getInputData(2); + if(value != null) + this.properties.value = value; + else + value = parseFloat( this.properties.value ); + + var time = this.graph.getTime(); + + this._tex.drawTo(function() { + gl.disable( gl.DEPTH_TEST ); + gl.disable( gl.CULL_FACE ); + gl.disable( gl.BLEND ); + if(tex) tex.bind(0); + if(texB) texB.bind(1); + var mesh = Mesh.getScreenQuad(); + shader.uniforms({u_texture:0, u_textureB:1, value: value, texSize:[width,height], time: time}).draw(mesh); + }); + + this.setOutputData(0, this._tex); + } + + LGraphTextureOperation.pixel_shader = "precision highp float;\n\ + \n\ + uniform sampler2D u_texture;\n\ + uniform sampler2D u_textureB;\n\ + varying vec2 v_coord;\n\ + uniform vec2 texSize;\n\ + uniform float time;\n\ + uniform float value;\n\ + \n\ + void main() {\n\ + vec2 uv = v_coord;\n\ + UV_CODE;\n\ + vec3 color = texture2D(u_texture, uv).rgb;\n\ + vec3 colorB = texture2D(u_textureB, uv).rgb;\n\ + vec3 result = color;\n\ + float alpha = 1.0;\n\ + PIXEL_CODE;\n\ + gl_FragColor = vec4(result, alpha);\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/operation", LGraphTextureOperation ); + window.LGraphTextureOperation = LGraphTextureOperation; + + //**************************************************** + + function LGraphTextureShader() + { + this.addOutput("Texture","Texture"); + this.properties = {code:"", width: 512, height: 512}; + + this.properties.code = "\nvoid main() {\n vec2 uv = coord;\n vec3 color = vec3(0.0);\n//your code here\n\ngl_FragColor = vec4(color, 1.0);\n}\n"; + } + + LGraphTextureShader.title = "Shader"; + LGraphTextureShader.desc = "Texture shader"; + LGraphTextureShader.widgets_info = { + "code": { widget:"code" }, + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphTextureShader.prototype.onExecute = function() + { + //replug + if(this._shader_code != this.properties.code) + { + this._shader_code = this.properties.code; + this._shader = new GL.Shader(Shader.SCREEN_VERTEX_SHADER, LGraphTextureShader.pixel_shader + this.properties.code ); + if(!this._shader) { + this.boxcolor = "red"; + return; + } + else + this.boxcolor = "green"; + /* + var uniforms = this._shader.uniformLocations; + //disconnect inputs + if(this.inputs) + for(var i = 0; i < this.inputs.length; i++) + { + var slot = this.inputs[i]; + if(slot.link != null) + this.disconnectInput(i); + } + + for(var i = 0; i < uniforms.length; i++) + { + var type = "number"; + if( this._shader.isSampler[i] ) + type = "texture"; + else + { + var v = gl.getUniform(this._shader.program, i); + type = typeof(v); + if(type == "object" && v.length) + { + switch(v.length) + { + case 1: type = "number"; break; + case 2: type = "vec2"; break; + case 3: type = "vec3"; break; + case 4: type = "vec4"; break; + case 9: type = "mat3"; break; + case 16: type = "mat4"; break; + default: continue; + } + } + } + this.addInput(i,type); + } + */ + } + + if(!this._tex || this._tex.width != this.properties.width || this._tex.height != this.properties.height ) + this._tex = new GL.Texture( this.properties.width, this.properties.height, { format: gl.RGBA, filter: gl.LINEAR }); + var tex = this._tex; + var shader = this._shader; + var time = this.graph.getTime(); + tex.drawTo(function() { + shader.uniforms({texSize: [tex.width, tex.height], time: time}).draw( Mesh.getScreenQuad() ); + }); + + this.setOutputData(0, this._tex); + } + + LGraphTextureShader.pixel_shader = "precision highp float;\n\ + \n\ + varying vec2 v_coord;\n\ + uniform float time;\n\ + "; + + LiteGraph.registerNodeType("texture/shader", LGraphTextureShader ); + window.LGraphTextureShader = LGraphTextureShader; + + // Texture to Viewport ***************************************** + function LGraphTextureToViewport() + { + this.addInput("Texture","Texture"); + this.properties = { additive: false, antialiasing: false, disable_alpha: false }; + this.size[0] = 130; + + if(!LGraphTextureToViewport._shader) + LGraphTextureToViewport._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureToViewport.pixel_shader ); + } + + LGraphTextureToViewport.title = "to Viewport"; + LGraphTextureToViewport.desc = "Texture to viewport"; + + LGraphTextureToViewport.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(!tex) + return; + + if(this.properties.disable_alpha) + gl.disable( gl.BLEND ); + else + { + gl.enable( gl.BLEND ); + if(this.properties.additive) + gl.blendFunc( gl.SRC_ALPHA, gl.ONE ); + else + gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA ); + } + + gl.disable( gl.DEPTH_TEST ); + if(this.properties.antialiasing) + { + var viewport = gl.getViewport(); //gl.getParameter(gl.VIEWPORT); + var mesh = Mesh.getScreenQuad(); + tex.bind(0); + LGraphTextureToViewport._shader.uniforms({u_texture:0, uViewportSize:[tex.width,tex.height], inverseVP: [1/tex.width,1/tex.height] }).draw(mesh); + } + else + tex.toViewport(); + } + + LGraphTextureToViewport.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 uViewportSize;\n\ + uniform vec2 inverseVP;\n\ + #define FXAA_REDUCE_MIN (1.0/ 128.0)\n\ + #define FXAA_REDUCE_MUL (1.0 / 8.0)\n\ + #define FXAA_SPAN_MAX 8.0\n\ + \n\ + /* from mitsuhiko/webgl-meincraft based on the code on geeks3d.com */\n\ + vec4 applyFXAA(sampler2D tex, vec2 fragCoord)\n\ + {\n\ + vec4 color = vec4(0.0);\n\ + /*vec2 inverseVP = vec2(1.0 / uViewportSize.x, 1.0 / uViewportSize.y);*/\n\ + vec3 rgbNW = texture2D(tex, (fragCoord + vec2(-1.0, -1.0)) * inverseVP).xyz;\n\ + vec3 rgbNE = texture2D(tex, (fragCoord + vec2(1.0, -1.0)) * inverseVP).xyz;\n\ + vec3 rgbSW = texture2D(tex, (fragCoord + vec2(-1.0, 1.0)) * inverseVP).xyz;\n\ + vec3 rgbSE = texture2D(tex, (fragCoord + vec2(1.0, 1.0)) * inverseVP).xyz;\n\ + vec3 rgbM = texture2D(tex, fragCoord * inverseVP).xyz;\n\ + vec3 luma = vec3(0.299, 0.587, 0.114);\n\ + float lumaNW = dot(rgbNW, luma);\n\ + float lumaNE = dot(rgbNE, luma);\n\ + float lumaSW = dot(rgbSW, luma);\n\ + float lumaSE = dot(rgbSE, luma);\n\ + float lumaM = dot(rgbM, luma);\n\ + float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));\n\ + float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));\n\ + \n\ + vec2 dir;\n\ + dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));\n\ + dir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE));\n\ + \n\ + float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);\n\ + \n\ + float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);\n\ + dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX), max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX), dir * rcpDirMin)) * inverseVP;\n\ + \n\ + vec3 rgbA = 0.5 * (texture2D(tex, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz + \n\ + texture2D(tex, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);\n\ + vec3 rgbB = rgbA * 0.5 + 0.25 * (texture2D(tex, fragCoord * inverseVP + dir * -0.5).xyz + \n\ + texture2D(tex, fragCoord * inverseVP + dir * 0.5).xyz);\n\ + \n\ + return vec4(rgbA,1.0);\n\ + float lumaB = dot(rgbB, luma);\n\ + if ((lumaB < lumaMin) || (lumaB > lumaMax))\n\ + color = vec4(rgbA, 1.0);\n\ + else\n\ + color = vec4(rgbB, 1.0);\n\ + return color;\n\ + }\n\ + \n\ + void main() {\n\ + gl_FragColor = applyFXAA( u_texture, v_coord * uViewportSize) ;\n\ + }\n\ + "; + + + LiteGraph.registerNodeType("texture/toviewport", LGraphTextureToViewport ); + window.LGraphTextureToViewport = LGraphTextureToViewport; + + + // Texture Copy ***************************************** + function LGraphTextureCopy() + { + this.addInput("Texture","Texture"); + this.addOutput("","Texture"); + this.properties = { size: 0, generate_mipmaps: false, precision: LGraphTexture.DEFAULT }; + } + + LGraphTextureCopy.title = "Copy"; + LGraphTextureCopy.desc = "Copy Texture"; + LGraphTextureCopy.widgets_info = { + size: { widget:"combo", values:[0,32,64,128,256,512,1024,2048]}, + precision: { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphTextureCopy.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(!tex) return; + + var width = tex.width; + var height = tex.height; + + if(this.properties.size != 0) + { + width = this.properties.size; + height = this.properties.size; + } + + var temp = this._temp_texture; + + var type = tex.type; + if(this.properties.precision === LGraphTexture.LOW) + type = gl.UNSIGNED_BYTE; + else if(this.properties.precision === LGraphTexture.HIGH) + type = gl.HIGH_PRECISION_FORMAT; + + if(!temp || temp.width != width || temp.height != height || temp.type != type ) + { + var minFilter = gl.LINEAR; + if( this.properties.generate_mipmaps && isPowerOfTwo(width) && isPowerOfTwo(height) ) + minFilter = gl.LINEAR_MIPMAP_LINEAR; + this._temp_texture = new GL.Texture( width, height, { type: type, format: gl.RGBA, minFilter: minFilter, magFilter: gl.LINEAR }); + } + tex.copyTo(this._temp_texture); + + if(this.properties.generate_mipmaps) + { + this._temp_texture.bind(0); + gl.generateMipmap(this._temp_texture.texture_type); + this._temp_texture.unbind(0); + } + + + this.setOutputData(0,this._temp_texture); + } + + LiteGraph.registerNodeType("texture/copy", LGraphTextureCopy ); + window.LGraphTextureCopy = LGraphTextureCopy; + + + // Texture Copy ***************************************** + function LGraphTextureAverage() + { + this.addInput("Texture","Texture"); + this.addOutput("","Texture"); + this.properties = { low_precision: false }; + } + + LGraphTextureAverage.title = "Average"; + LGraphTextureAverage.desc = "Compute average of a texture and stores it as a texture"; + + LGraphTextureAverage.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(!tex) return; + + if(!LGraphTextureAverage._shader) + { + LGraphTextureAverage._shader = new GL.Shader(Shader.SCREEN_VERTEX_SHADER, LGraphTextureAverage.pixel_shader); + var samples = new Float32Array(32); + for(var i = 0; i < 32; ++i) + samples[i] = Math.random(); + LGraphTextureAverage._shader.uniforms({u_samples_a: samples.subarray(0,16), u_samples_b: samples.subarray(16,32) }); + } + + var temp = this._temp_texture; + var type = this.properties.low_precision ? gl.UNSIGNED_BYTE : tex.type; + if(!temp || temp.type != type ) + this._temp_texture = new GL.Texture( 1, 1, { type: type, format: gl.RGBA, filter: gl.NEAREST }); + + var shader = LGraphTextureAverage._shader; + this._temp_texture.drawTo(function(){ + tex.toViewport(shader,{u_texture:0}); + }); + + this.setOutputData(0,this._temp_texture); + } + + LGraphTextureAverage.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + uniform mat4 u_samples_a;\n\ + uniform mat4 u_samples_b;\n\ + uniform sampler2D u_texture;\n\ + varying vec2 v_coord;\n\ + \n\ + void main() {\n\ + vec4 color = vec4(0.0);\n\ + for(int i = 0; i < 4; ++i)\n\ + for(int j = 0; j < 4; ++j)\n\ + {\n\ + color += texture2D(u_texture, vec2( u_samples_a[i][j], u_samples_b[i][j] ) );\n\ + color += texture2D(u_texture, vec2( 1.0 - u_samples_a[i][j], u_samples_b[i][j] ) );\n\ + }\n\ + gl_FragColor = color * 0.03125;\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/average", LGraphTextureAverage ); + window.LGraphTextureAverage = LGraphTextureAverage; + + // Image To Texture ***************************************** + function LGraphImageToTexture() + { + this.addInput("Image","image"); + this.addOutput("","Texture"); + this.properties = {}; + } + + LGraphImageToTexture.title = "Image to Texture"; + LGraphImageToTexture.desc = "Uploads an image to the GPU"; + //LGraphImageToTexture.widgets_info = { size: { widget:"combo", values:[0,32,64,128,256,512,1024,2048]} }; + + LGraphImageToTexture.prototype.onExecute = function() + { + var img = this.getInputData(0); + if(!img) return; + + var width = img.videoWidth || img.width; + var height = img.videoHeight || img.height; + + //this is in case we are using a webgl canvas already, no need to reupload it + if(img.gltexture) + { + this.setOutputData(0,img.gltexture); + return; + } + + + var temp = this._temp_texture; + if(!temp || temp.width != width || temp.height != height ) + this._temp_texture = new GL.Texture( width, height, { format: gl.RGBA, filter: gl.LINEAR }); + + try + { + this._temp_texture.uploadImage(img); + } + catch(err) + { + console.error("image comes from an unsafe location, cannot be uploaded to webgl"); + return; + } + + this.setOutputData(0,this._temp_texture); + } + + LiteGraph.registerNodeType("texture/imageToTexture", LGraphImageToTexture ); + window.LGraphImageToTexture = LGraphImageToTexture; + + + // Texture LUT ***************************************** + function LGraphTextureLUT() + { + this.addInput("Texture","Texture"); + this.addInput("LUT","Texture"); + this.addInput("Intensity","number"); + this.addOutput("","Texture"); + this.properties = { intensity: 1, precision: LGraphTexture.DEFAULT }; + + if(!LGraphTextureLUT._shader) + LGraphTextureLUT._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureLUT.pixel_shader ); + } + + LGraphTextureLUT.widgets_info = { + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphTextureLUT.title = "LUT"; + LGraphTextureLUT.desc = "Apply LUT to Texture"; + + LGraphTextureLUT.prototype.onExecute = function() + { + var tex = this.getInputData(0); + + if(this.properties.precision === LGraphTexture.PASS_THROUGH ) + { + this.setOutputData(0,tex); + return; + } + + if(!tex) return; + + var lut_tex = this.getInputData(1); + if(!lut_tex) + { + this.setOutputData(0,tex); + return; + } + lut_tex.bind(0); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR ); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE ); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE ); + gl.bindTexture(gl.TEXTURE_2D, null); + + var intensity = this.properties.intensity; + if( this.isInputConnected(2) ) + this.properties.intensity = intensity = this.getInputData(2); + + this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision ); + + var mesh = Mesh.getScreenQuad(); + + this._tex.drawTo(function() { + tex.bind(0); + lut_tex.bind(1); + LGraphTextureLUT._shader.uniforms({u_texture:0, u_textureB:1, u_amount: intensity, uViewportSize:[tex.width,tex.height]}).draw(mesh); + }); + + this.setOutputData(0,this._tex); + } + + LGraphTextureLUT.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform sampler2D u_textureB;\n\ + uniform float u_amount;\n\ + \n\ + void main() {\n\ + lowp vec4 textureColor = clamp( texture2D(u_texture, v_coord), vec4(0.0), vec4(1.0) );\n\ + mediump float blueColor = textureColor.b * 63.0;\n\ + mediump vec2 quad1;\n\ + quad1.y = floor(floor(blueColor) / 8.0);\n\ + quad1.x = floor(blueColor) - (quad1.y * 8.0);\n\ + mediump vec2 quad2;\n\ + quad2.y = floor(ceil(blueColor) / 8.0);\n\ + quad2.x = ceil(blueColor) - (quad2.y * 8.0);\n\ + highp vec2 texPos1;\n\ + texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n\ + texPos1.y = 1.0 - ((quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\ + highp vec2 texPos2;\n\ + texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n\ + texPos2.y = 1.0 - ((quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\ + lowp vec4 newColor1 = texture2D(u_textureB, texPos1);\n\ + lowp vec4 newColor2 = texture2D(u_textureB, texPos2);\n\ + lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));\n\ + gl_FragColor = vec4( mix( textureColor.rgb, newColor.rgb, u_amount), textureColor.w);\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/LUT", LGraphTextureLUT ); + window.LGraphTextureLUT = LGraphTextureLUT; + + // Texture Mix ***************************************** + function LGraphTextureChannels() + { + this.addInput("Texture","Texture"); + + this.addOutput("R","Texture"); + this.addOutput("G","Texture"); + this.addOutput("B","Texture"); + this.addOutput("A","Texture"); + + this.properties = {}; + if(!LGraphTextureChannels._shader) + LGraphTextureChannels._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureChannels.pixel_shader ); + } + + LGraphTextureChannels.title = "Channels"; + LGraphTextureChannels.desc = "Split texture channels"; + + LGraphTextureChannels.prototype.onExecute = function() + { + var texA = this.getInputData(0); + if(!texA) return; + + if(!this._channels) + this._channels = Array(4); + + var connections = 0; + for(var i = 0; i < 4; i++) + { + if(this.isOutputConnected(i)) + { + if(!this._channels[i] || this._channels[i].width != texA.width || this._channels[i].height != texA.height || this._channels[i].type != texA.type) + this._channels[i] = new GL.Texture( texA.width, texA.height, { type: texA.type, format: gl.RGBA, filter: gl.LINEAR }); + connections++; + } + else + this._channels[i] = null; + } + + if(!connections) + return; + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + + var mesh = Mesh.getScreenQuad(); + var shader = LGraphTextureChannels._shader; + var masks = [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]]; + + for(var i = 0; i < 4; i++) + { + if(!this._channels[i]) + continue; + + this._channels[i].drawTo( function() { + texA.bind(0); + shader.uniforms({u_texture:0, u_mask: masks[i]}).draw(mesh); + }); + this.setOutputData(i, this._channels[i]); + } + } + + LGraphTextureChannels.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec4 u_mask;\n\ + \n\ + void main() {\n\ + gl_FragColor = vec4( vec3( length( texture2D(u_texture, v_coord) * u_mask )), 1.0 );\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/channels", LGraphTextureChannels ); + window.LGraphTextureChannels = LGraphTextureChannels; + + // Texture Mix ***************************************** + function LGraphTextureMix() + { + this.addInput("A","Texture"); + this.addInput("B","Texture"); + this.addInput("Mixer","Texture"); + + this.addOutput("Texture","Texture"); + this.properties = { precision: LGraphTexture.DEFAULT }; + + if(!LGraphTextureMix._shader) + LGraphTextureMix._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureMix.pixel_shader ); + } + + LGraphTextureMix.title = "Mix"; + LGraphTextureMix.desc = "Generates a texture mixing two textures"; + + LGraphTextureMix.widgets_info = { + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphTextureMix.prototype.onExecute = function() + { + var texA = this.getInputData(0); + + if(this.properties.precision === LGraphTexture.PASS_THROUGH ) + { + this.setOutputData(0,texA); + return; + } + + var texB = this.getInputData(1); + var texMix = this.getInputData(2); + if(!texA || !texB || !texMix) return; + + this._tex = LGraphTexture.getTargetTexture( texA, this._tex, this.properties.precision ); + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + + var mesh = Mesh.getScreenQuad(); + var shader = LGraphTextureMix._shader; + + this._tex.drawTo( function() { + texA.bind(0); + texB.bind(1); + texMix.bind(2); + shader.uniforms({u_textureA:0,u_textureB:1,u_textureMix:2}).draw(mesh); + }); + + this.setOutputData(0, this._tex); + } + + LGraphTextureMix.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_textureA;\n\ + uniform sampler2D u_textureB;\n\ + uniform sampler2D u_textureMix;\n\ + \n\ + void main() {\n\ + gl_FragColor = mix( texture2D(u_textureA, v_coord), texture2D(u_textureB, v_coord), texture2D(u_textureMix, v_coord) );\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/mix", LGraphTextureMix ); + window.LGraphTextureMix = LGraphTextureMix; + + // Texture Edges detection ***************************************** + function LGraphTextureEdges() + { + this.addInput("Tex.","Texture"); + + this.addOutput("Edges","Texture"); + this.properties = { invert: true, precision: LGraphTexture.DEFAULT }; + + if(!LGraphTextureEdges._shader) + LGraphTextureEdges._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureEdges.pixel_shader ); + } + + LGraphTextureEdges.title = "Edges"; + LGraphTextureEdges.desc = "Detects edges"; + + LGraphTextureEdges.widgets_info = { + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphTextureEdges.prototype.onExecute = function() + { + var tex = this.getInputData(0); + + if(this.properties.precision === LGraphTexture.PASS_THROUGH ) + { + this.setOutputData(0,tex); + return; + } + + if(!tex) return; + + this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision ); + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + + var mesh = Mesh.getScreenQuad(); + var shader = LGraphTextureEdges._shader; + var invert = this.properties.invert; + + this._tex.drawTo( function() { + tex.bind(0); + shader.uniforms({u_texture:0, u_isize:[1/tex.width,1/tex.height], u_invert: invert ? 1 : 0}).draw(mesh); + }); + + this.setOutputData(0, this._tex); + } + + LGraphTextureEdges.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_isize;\n\ + uniform int u_invert;\n\ + \n\ + void main() {\n\ + vec4 center = texture2D(u_texture, v_coord);\n\ + vec4 up = texture2D(u_texture, v_coord + u_isize * vec2(0.0,1.0) );\n\ + vec4 down = texture2D(u_texture, v_coord + u_isize * vec2(0.0,-1.0) );\n\ + vec4 left = texture2D(u_texture, v_coord + u_isize * vec2(1.0,0.0) );\n\ + vec4 right = texture2D(u_texture, v_coord + u_isize * vec2(-1.0,0.0) );\n\ + vec4 diff = abs(center - up) + abs(center - down) + abs(center - left) + abs(center - right);\n\ + if(u_invert == 1)\n\ + diff.xyz = vec3(1.0) - diff.xyz;\n\ + gl_FragColor = vec4( diff.xyz, center.a );\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/edges", LGraphTextureEdges ); + window.LGraphTextureEdges = LGraphTextureEdges; + + // Texture Depth ***************************************** + function LGraphTextureDepthRange() + { + this.addInput("Texture","Texture"); + this.addInput("Distance","number"); + this.addInput("Range","number"); + this.addOutput("Texture","Texture"); + this.properties = { distance:100, range: 50, high_precision: false }; + + if(!LGraphTextureDepthRange._shader) + LGraphTextureDepthRange._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureDepthRange.pixel_shader ); + } + + LGraphTextureDepthRange.title = "Depth Range"; + LGraphTextureDepthRange.desc = "Generates a texture with a depth range"; + + LGraphTextureDepthRange.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(!tex) return; + + var precision = gl.UNSIGNED_BYTE; + if(this.properties.high_precision) + precision = gl.half_float_ext ? gl.HALF_FLOAT_OES : gl.FLOAT; + + if(!this._temp_texture || this._temp_texture.type != precision || + this._temp_texture.width != tex.width || this._temp_texture.height != tex.height) + this._temp_texture = new GL.Texture( tex.width, tex.height, { type: precision, format: gl.RGBA, filter: gl.LINEAR }); + + //iterations + var distance = this.properties.distance; + if( this.isInputConnected(1) ) + { + distance = this.getInputData(1); + this.properties.distance = distance; + } + + var range = this.properties.range; + if( this.isInputConnected(2) ) + { + range = this.getInputData(2); + this.properties.range = range; + } + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + var mesh = Mesh.getScreenQuad(); + var shader = LGraphTextureDepthRange._shader; + var camera = Renderer._current_camera; + + this._temp_texture.drawTo( function() { + tex.bind(0); + shader.uniforms({u_texture:0, u_distance: distance, u_range: range, u_camera_planes: [Renderer._current_camera.near,Renderer._current_camera.far] }) + .draw(mesh); + }); + + this.setOutputData(0, this._temp_texture); + } + + LGraphTextureDepthRange.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_camera_planes;\n\ + uniform float u_distance;\n\ + uniform float u_range;\n\ + \n\ + float LinearDepth()\n\ + {\n\ + float n = u_camera_planes.x;\n\ + float f = u_camera_planes.y;\n\ + return (2.0 * n) / (f + n - texture2D(u_texture, v_coord).x * (f - n));\n\ + }\n\ + \n\ + void main() {\n\ + float diff = abs(LinearDepth() * u_camera_planes.y - u_distance);\n\ + float dof = 1.0;\n\ + if(diff <= u_range)\n\ + dof = diff / u_range;\n\ + gl_FragColor = vec4(dof);\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/depth_range", LGraphTextureDepthRange ); + window.LGraphTextureDepthRange = LGraphTextureDepthRange; + + // Texture Blur ***************************************** + function LGraphTextureBlur() + { + this.addInput("Texture","Texture"); + this.addInput("Iterations","number"); + this.addInput("Intensity","number"); + this.addOutput("Blurred","Texture"); + this.properties = { intensity: 1, iterations: 1, preserve_aspect: false, scale:[1,1] }; + + if(!LGraphTextureBlur._shader) + LGraphTextureBlur._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureBlur.pixel_shader ); + } + + LGraphTextureBlur.title = "Blur"; + LGraphTextureBlur.desc = "Blur a texture"; + + LGraphTextureBlur.max_iterations = 20; + + LGraphTextureBlur.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(!tex) return; + + var temp = this._temp_texture; + + if(!temp || temp.width != tex.width || temp.height != tex.height || temp.type != tex.type ) + { + //we need two textures to do the blurring + this._temp_texture = new GL.Texture( tex.width, tex.height, { type: tex.type, format: gl.RGBA, filter: gl.LINEAR }); + this._final_texture = new GL.Texture( tex.width, tex.height, { type: tex.type, format: gl.RGBA, filter: gl.LINEAR }); + } + + //iterations + var iterations = this.properties.iterations; + if( this.isInputConnected(1) ) + { + iterations = this.getInputData(1); + this.properties.iterations = iterations; + } + iterations = Math.min( Math.floor(iterations), LGraphTextureBlur.max_iterations ); + if(iterations == 0) //skip blurring + { + this.setOutputData(0, tex); + return; + } + + var intensity = this.properties.intensity; + if( this.isInputConnected(2) ) + { + intensity = this.getInputData(2); + this.properties.intensity = intensity; + } + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + var mesh = Mesh.getScreenQuad(); + var shader = LGraphTextureBlur._shader; + var scale = this.properties.scale || [1,1]; + + //blur sometimes needs an aspect correction + var aspect = LiteGraph.aspect; + if(!aspect && window.gl !== undefined) + aspect = gl.canvas.height / gl.canvas.width; + if(window.Renderer !== undefined) + aspect = window.Renderer._current_camera.aspect; + if(!aspect) + aspect = 1; + + //iterate + var start_texture = tex; + var aspect = this.properties.preserve_aspect ? aspect : 1; + for(var i = 0; i < iterations; ++i) + { + this._temp_texture.drawTo( function() { + start_texture.bind(0); + shader.uniforms({u_texture:0, u_intensity: 1, u_offset: [0, 1/start_texture.height * scale[1] ] }) + .draw(mesh); + }); + + this._temp_texture.bind(0); + this._final_texture.drawTo( function() { + shader.uniforms({u_texture:0, u_intensity: intensity, u_offset: [aspect/start_texture.width * scale[0], 0] }) + .draw(mesh); + }); + start_texture = this._final_texture; + } + + this.setOutputData(0, this._final_texture); + } + + LGraphTextureBlur.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_offset;\n\ + uniform float u_intensity;\n\ + void main() {\n\ + vec4 sum = vec4(0.0);\n\ + vec4 center = texture2D(u_texture, v_coord);\n\ + sum += texture2D(u_texture, v_coord + u_offset * -4.0) * 0.05/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * -3.0) * 0.09/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * -2.0) * 0.12/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * -1.0) * 0.15/0.98;\n\ + sum += center * 0.16/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * 4.0) * 0.05/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * 3.0) * 0.09/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * 2.0) * 0.12/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * 1.0) * 0.15/0.98;\n\ + gl_FragColor = u_intensity * sum;\n\ + /*gl_FragColor.a = center.a*/;\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/blur", LGraphTextureBlur ); + window.LGraphTextureBlur = LGraphTextureBlur; + + // Texture Webcam ***************************************** + function LGraphTextureWebcam() + { + this.addOutput("Webcam","Texture"); + this.properties = {}; + } + + LGraphTextureWebcam.title = "Webcam"; + LGraphTextureWebcam.desc = "Webcam texture"; + + + LGraphTextureWebcam.prototype.openStream = function() + { + //Vendor prefixes hell + navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); + window.URL = window.URL || window.webkitURL; + + if (!navigator.getUserMedia) { + //console.log('getUserMedia() is not supported in your browser, use chrome and enable WebRTC from about://flags'); + return; + } + + this._waiting_confirmation = true; + + // Not showing vendor prefixes. + navigator.getUserMedia({video: true}, this.streamReady.bind(this), onFailSoHard); + + var that = this; + function onFailSoHard(e) { + trace('Webcam rejected', e); + that._webcam_stream = false; + that.box_color = "red"; + }; + } + + LGraphTextureWebcam.prototype.streamReady = function(localMediaStream) + { + this._webcam_stream = localMediaStream; + //this._waiting_confirmation = false; + + var video = this._video; + if(!video) + { + video = document.createElement("video"); + video.autoplay = true; + video.src = window.URL.createObjectURL(localMediaStream); + this._video = video; + //document.body.appendChild( video ); //debug + //when video info is loaded (size and so) + video.onloadedmetadata = function(e) { + // Ready to go. Do some stuff. + console.log(e); + }; + } + } + + LGraphTextureWebcam.prototype.onDrawBackground = function(ctx) + { + if(!this.flags.collapsed || this.size[1] <= 20) + return; + + if(!this._video) + return; + + //render to graph canvas + ctx.save(); + if(!ctx.webgl) //reverse image + { + ctx.translate(0,this.size[1]); + ctx.scale(1,-1); + } + ctx.drawImage(this._video, 0, 0, this.size[0], this.size[1]); + ctx.restore(); + } + + LGraphTextureWebcam.prototype.onExecute = function() + { + if(this._webcam_stream == null && !this._waiting_confirmation) + this.openStream(); + + if(!this._video || !this._video.videoWidth) return; + + var width = this._video.videoWidth; + var height = this._video.videoHeight; + + var temp = this._temp_texture; + if(!temp || temp.width != width || temp.height != height ) + this._temp_texture = new GL.Texture( width, height, { format: gl.RGB, filter: gl.LINEAR }); + + this._temp_texture.uploadImage( this._video ); + this.setOutputData(0,this._temp_texture); + } + + LiteGraph.registerNodeType("texture/webcam", LGraphTextureWebcam ); + window.LGraphTextureWebcam = LGraphTextureWebcam; + + + + function LGraphCubemap() + { + this.addOutput("Cubemap","Cubemap"); + this.properties = {name:""}; + this.size = [LGraphTexture.image_preview_size, LGraphTexture.image_preview_size]; + } + + LGraphCubemap.prototype.onDropFile = function(data, filename, file) + { + if(!data) + { + this._drop_texture = null; + this.properties.name = ""; + } + else + { + if( typeof(data) == "string" ) + this._drop_texture = GL.Texture.fromURL(data); + else + this._drop_texture = GL.Texture.fromDDSInMemory(data); + this.properties.name = filename; + } + } + + LGraphCubemap.prototype.onExecute = function() + { + if(this._drop_texture) + { + this.setOutputData(0, this._drop_texture); + return; + } + + if(!this.properties.name) + return; + + var tex = LGraphTexture.getTexture( this.properties.name ); + if(!tex) + return; + + this._last_tex = tex; + this.setOutputData(0, tex); + } + + LGraphCubemap.prototype.onDrawBackground = function(ctx) + { + if( this.flags.collapsed || this.size[1] <= 20) + return; + + if(!ctx.webgl) + return; + + var cube_mesh = gl.meshes["cube"]; + if(!cube_mesh) + cube_mesh = gl.meshes["cube"] = GL.Mesh.cube({size:1}); + + //var view = mat4.lookAt( mat4.create(), [0,0 + } + + LiteGraph.registerNodeType("texture/cubemap", LGraphCubemap ); + window.LGraphCubemap = LGraphCubemap; + + +} //litegl.js defined +//Works with Litegl.js to create WebGL nodes +if(typeof(LiteGraph) != "undefined") +{ + + // Texture Lens ***************************************** + function LGraphFXLens() + { + this.addInput("Texture","Texture"); + this.addInput("Aberration","number"); + this.addInput("Distortion","number"); + this.addInput("Blur","number"); + this.addOutput("Texture","Texture"); + this.properties = { aberration:1.0, distortion: 1.0, blur: 1.0, precision: LGraphTexture.DEFAULT }; + + if(!LGraphFXLens._shader) + LGraphFXLens._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphFXLens.pixel_shader ); + } + + LGraphFXLens.title = "Lens"; + LGraphFXLens.desc = "Camera Lens distortion"; + LGraphFXLens.widgets_info = { + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphFXLens.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(this.properties.precision === LGraphTexture.PASS_THROUGH ) + { + this.setOutputData(0,tex); + return; + } + + if(!tex) return; + + this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision ); + + //iterations + var aberration = this.properties.aberration; + if( this.isInputConnected(1) ) + { + aberration = this.getInputData(1); + this.properties.aberration = aberration; + } + + var distortion = this.properties.distortion; + if( this.isInputConnected(2) ) + { + distortion = this.getInputData(2); + this.properties.distortion = distortion; + } + + var blur = this.properties.blur; + if( this.isInputConnected(3) ) + { + blur = this.getInputData(3); + this.properties.blur = blur; + } + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + var mesh = Mesh.getScreenQuad(); + var shader = LGraphFXLens._shader; + var camera = Renderer._current_camera; + + this._tex.drawTo( function() { + tex.bind(0); + shader.uniforms({u_texture:0, u_aberration: aberration, u_distortion: distortion, u_blur: blur }) + .draw(mesh); + }); + + this.setOutputData(0, this._tex); + } + + LGraphFXLens.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_camera_planes;\n\ + uniform float u_aberration;\n\ + uniform float u_distortion;\n\ + uniform float u_blur;\n\ + \n\ + void main() {\n\ + vec2 coord = v_coord;\n\ + float dist = distance(vec2(0.5), coord);\n\ + vec2 dist_coord = coord - vec2(0.5);\n\ + float percent = 1.0 + ((0.5 - dist) / 0.5) * u_distortion;\n\ + dist_coord *= percent;\n\ + coord = dist_coord + vec2(0.5);\n\ + vec4 color = texture2D(u_texture,coord, u_blur * dist);\n\ + color.r = texture2D(u_texture,vec2(0.5) + dist_coord * (1.0+0.01*u_aberration), u_blur * dist ).r;\n\ + color.b = texture2D(u_texture,vec2(0.5) + dist_coord * (1.0-0.01*u_aberration), u_blur * dist ).b;\n\ + gl_FragColor = color;\n\ + }\n\ + "; + /* + float normalized_tunable_sigmoid(float xs, float k)\n\ + {\n\ + xs = xs * 2.0 - 1.0;\n\ + float signx = sign(xs);\n\ + float absx = abs(xs);\n\ + return signx * ((-k - 1.0)*absx)/(2.0*(-2.0*k*absx+k-1.0)) + 0.5;\n\ + }\n\ + */ + + LiteGraph.registerNodeType("fx/lens", LGraphFXLens ); + window.LGraphFXLens = LGraphFXLens; + + //******************************************************* + + function LGraphFXBokeh() + { + this.addInput("Texture","Texture"); + this.addInput("Blurred","Texture"); + this.addInput("Mask","Texture"); + this.addInput("Threshold","number"); + this.addOutput("Texture","Texture"); + this.properties = { shape: "", size: 10, alpha: 1.0, threshold: 1.0, high_precision: false }; + } + + LGraphFXBokeh.title = "Bokeh"; + LGraphFXBokeh.desc = "applies an Bokeh effect"; + + LGraphFXBokeh.widgets_info = {"shape": { widget:"texture" }}; + + LGraphFXBokeh.prototype.onExecute = function() + { + var tex = this.getInputData(0); + var blurred_tex = this.getInputData(1); + var mask_tex = this.getInputData(2); + if(!tex || !mask_tex || !this.properties.shape) + { + this.setOutputData(0, tex); + return; + } + + if(!blurred_tex) + blurred_tex = tex; + + var shape_tex = LGraphTexture.getTexture( this.properties.shape ); + if(!shape_tex) + return; + + var threshold = this.properties.threshold; + if( this.isInputConnected(3) ) + { + threshold = this.getInputData(3); + this.properties.threshold = threshold; + } + + + var precision = gl.UNSIGNED_BYTE; + if(this.properties.high_precision) + precision = gl.half_float_ext ? gl.HALF_FLOAT_OES : gl.FLOAT; + if(!this._temp_texture || this._temp_texture.type != precision || + this._temp_texture.width != tex.width || this._temp_texture.height != tex.height) + this._temp_texture = new GL.Texture( tex.width, tex.height, { type: precision, format: gl.RGBA, filter: gl.LINEAR }); + + //iterations + var size = this.properties.size; + + var first_shader = LGraphFXBokeh._first_shader; + if(!first_shader) + first_shader = LGraphFXBokeh._first_shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphFXBokeh._first_pixel_shader ); + + var second_shader = LGraphFXBokeh._second_shader; + if(!second_shader) + second_shader = LGraphFXBokeh._second_shader = new GL.Shader( LGraphFXBokeh._second_vertex_shader, LGraphFXBokeh._second_pixel_shader ); + + var points_mesh = this._points_mesh; + if(!points_mesh || points_mesh._width != tex.width || points_mesh._height != tex.height || points_mesh._spacing != 2) + points_mesh = this.createPointsMesh( tex.width, tex.height, 2 ); + + var screen_mesh = Mesh.getScreenQuad(); + + var point_size = this.properties.size; + var min_light = this.properties.min_light; + var alpha = this.properties.alpha; + + gl.disable( gl.DEPTH_TEST ); + gl.disable( gl.BLEND ); + + this._temp_texture.drawTo( function() { + tex.bind(0); + blurred_tex.bind(1); + mask_tex.bind(2); + first_shader.uniforms({u_texture:0, u_texture_blur:1, u_mask: 2, u_texsize: [tex.width, tex.height] }) + .draw(screen_mesh); + }); + + this._temp_texture.drawTo( function() { + //clear because we use blending + //gl.clearColor(0.0,0.0,0.0,1.0); + //gl.clear( gl.COLOR_BUFFER_BIT ); + gl.enable( gl.BLEND ); + gl.blendFunc( gl.ONE, gl.ONE ); + + tex.bind(0); + shape_tex.bind(3); + second_shader.uniforms({u_texture:0, u_mask: 2, u_shape:3, u_alpha: alpha, u_threshold: threshold, u_pointSize: point_size, u_itexsize: [1.0/tex.width, 1.0/tex.height] }) + .draw(points_mesh, gl.POINTS); + }); + + this.setOutputData(0, this._temp_texture); + } + + LGraphFXBokeh.prototype.createPointsMesh = function(width, height, spacing) + { + var nwidth = Math.round(width / spacing); + var nheight = Math.round(height / spacing); + + var vertices = new Float32Array(nwidth * nheight * 2); + + var ny = -1; + var dx = 2/width * spacing; + var dy = 2/height * spacing; + for(var y = 0; y < nheight; ++y ) + { + var nx = -1; + for(var x = 0; x < nwidth; ++x ) + { + var pos = y*nwidth*2 + x*2; + vertices[pos] = nx; + vertices[pos+1] = ny; + nx += dx; + } + ny += dy; + } + + this._points_mesh = GL.Mesh.load({vertices2D: vertices}); + this._points_mesh._width = width; + this._points_mesh._height = height; + this._points_mesh._spacing = spacing; + + return this._points_mesh; + } + + /* + LGraphTextureBokeh._pixel_shader = "precision highp float;\n\ + varying vec2 a_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform sampler2D u_shape;\n\ + \n\ + void main() {\n\ + vec4 color = texture2D( u_texture, gl_PointCoord );\n\ + color *= v_color * u_alpha;\n\ + gl_FragColor = color;\n\ + }\n"; + */ + + LGraphFXBokeh._first_pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform sampler2D u_texture_blur;\n\ + uniform sampler2D u_mask;\n\ + \n\ + void main() {\n\ + vec4 color = texture2D(u_texture, v_coord);\n\ + vec4 blurred_color = texture2D(u_texture_blur, v_coord);\n\ + float mask = texture2D(u_mask, v_coord).x;\n\ + gl_FragColor = mix(color, blurred_color, mask);\n\ + }\n\ + "; + + LGraphFXBokeh._second_vertex_shader = "precision highp float;\n\ + attribute vec2 a_vertex2D;\n\ + varying vec4 v_color;\n\ + uniform sampler2D u_texture;\n\ + uniform sampler2D u_mask;\n\ + uniform vec2 u_itexsize;\n\ + uniform float u_pointSize;\n\ + uniform float u_threshold;\n\ + void main() {\n\ + vec2 coord = a_vertex2D * 0.5 + 0.5;\n\ + v_color = texture2D( u_texture, coord );\n\ + v_color += texture2D( u_texture, coord + vec2(u_itexsize.x, 0.0) );\n\ + v_color += texture2D( u_texture, coord + vec2(0.0, u_itexsize.y));\n\ + v_color += texture2D( u_texture, coord + u_itexsize);\n\ + v_color *= 0.25;\n\ + float mask = texture2D(u_mask, coord).x;\n\ + float luminance = length(v_color) * mask;\n\ + /*luminance /= (u_pointSize*u_pointSize)*0.01 */;\n\ + luminance -= u_threshold;\n\ + if(luminance < 0.0)\n\ + {\n\ + gl_Position.x = -100.0;\n\ + return;\n\ + }\n\ + gl_PointSize = u_pointSize;\n\ + gl_Position = vec4(a_vertex2D,0.0,1.0);\n\ + }\n\ + "; + + LGraphFXBokeh._second_pixel_shader = "precision highp float;\n\ + varying vec4 v_color;\n\ + uniform sampler2D u_shape;\n\ + uniform float u_alpha;\n\ + \n\ + void main() {\n\ + vec4 color = texture2D( u_shape, gl_PointCoord );\n\ + color *= v_color * u_alpha;\n\ + gl_FragColor = color;\n\ + }\n"; + + + LiteGraph.registerNodeType("fx/bokeh", LGraphFXBokeh ); + window.LGraphFXBokeh = LGraphFXBokeh; + + //************************************************ + + function LGraphFXGeneric() + { + this.addInput("Texture","Texture"); + this.addInput("value1","number"); + this.addInput("value2","number"); + this.addOutput("Texture","Texture"); + this.properties = { fx: "halftone", value1: 1, value2: 1, precision: LGraphTexture.DEFAULT }; + } + + LGraphFXGeneric.title = "FX"; + LGraphFXGeneric.desc = "applies an FX from a list"; + + LGraphFXGeneric.widgets_info = { + "fx": { widget:"combo", values:["halftone","pixelate","lowpalette","noise"] }, + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + LGraphFXGeneric.shaders = {}; + + LGraphFXGeneric.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(this.properties.precision === LGraphTexture.PASS_THROUGH ) + { + this.setOutputData(0,tex); + return; + } + + if(!tex) return; + + this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision ); + + //iterations + var value1 = this.properties.value1; + if( this.isInputConnected(1) ) + { + value1 = this.getInputData(1); + this.properties.value1 = value1; + } + + var value2 = this.properties.value2; + if( this.isInputConnected(2) ) + { + value2 = this.getInputData(2); + this.properties.value2 = value2; + } + + var fx = this.properties.fx; + var shader = LGraphFXGeneric.shaders[ fx ]; + if(!shader) + { + var pixel_shader_code = LGraphFXGeneric["pixel_shader_" + fx ]; + if(!pixel_shader_code) + return; + + shader = LGraphFXGeneric.shaders[ fx ] = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, pixel_shader_code ); + } + + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + var mesh = Mesh.getScreenQuad(); + var camera = Renderer._current_camera; + + var noise = null; + if(fx == "noise") + noise = LGraphTexture.getNoiseTexture(); + + this._tex.drawTo( function() { + tex.bind(0); + if(fx == "noise") + noise.bind(1); + + shader.uniforms({u_texture:0, u_noise:1, u_size: [tex.width, tex.height], u_rand:[ Math.random(), Math.random() ], u_value1: value1, u_value2: value2, u_camera_planes: [Renderer._current_camera.near,Renderer._current_camera.far] }) + .draw(mesh); + }); + + this.setOutputData(0, this._tex); + } + + LGraphFXGeneric.pixel_shader_halftone = "precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_camera_planes;\n\ + uniform vec2 u_size;\n\ + uniform float u_value1;\n\ + uniform float u_value2;\n\ + \n\ + float pattern() {\n\ + float s = sin(u_value1 * 3.1415), c = cos(u_value1 * 3.1415);\n\ + vec2 tex = v_coord * u_size.xy;\n\ + vec2 point = vec2(\n\ + c * tex.x - s * tex.y ,\n\ + s * tex.x + c * tex.y \n\ + ) * u_value2;\n\ + return (sin(point.x) * sin(point.y)) * 4.0;\n\ + }\n\ + void main() {\n\ + vec4 color = texture2D(u_texture, v_coord);\n\ + float average = (color.r + color.g + color.b) / 3.0;\n\ + gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);\n\ + }\n"; + + LGraphFXGeneric.pixel_shader_pixelate = "precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_camera_planes;\n\ + uniform vec2 u_size;\n\ + uniform float u_value1;\n\ + uniform float u_value2;\n\ + \n\ + void main() {\n\ + vec2 coord = vec2( floor(v_coord.x * u_value1) / u_value1, floor(v_coord.y * u_value2) / u_value2 );\n\ + vec4 color = texture2D(u_texture, coord);\n\ + gl_FragColor = color;\n\ + }\n"; + + LGraphFXGeneric.pixel_shader_lowpalette = "precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_camera_planes;\n\ + uniform vec2 u_size;\n\ + uniform float u_value1;\n\ + uniform float u_value2;\n\ + \n\ + void main() {\n\ + vec4 color = texture2D(u_texture, v_coord);\n\ + gl_FragColor = floor(color * u_value1) / u_value1;\n\ + }\n"; + + LGraphFXGeneric.pixel_shader_noise = "precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform sampler2D u_noise;\n\ + uniform vec2 u_size;\n\ + uniform float u_value1;\n\ + uniform float u_value2;\n\ + uniform vec2 u_rand;\n\ + \n\ + void main() {\n\ + vec4 color = texture2D(u_texture, v_coord);\n\ + vec3 noise = texture2D(u_noise, v_coord * vec2(u_size.x / 512.0, u_size.y / 512.0) + u_rand).xyz - vec3(0.5);\n\ + gl_FragColor = vec4( color.xyz + noise * u_value1, color.a );\n\ + }\n"; + + + LiteGraph.registerNodeType("fx/generic", LGraphFXGeneric ); + window.LGraphFXGeneric = LGraphFXGeneric; + + + // Vigneting ************************************ + + function LGraphFXVigneting() + { + this.addInput("Tex.","Texture"); + this.addInput("intensity","number"); + + this.addOutput("Texture","Texture"); + this.properties = { intensity: 1, invert: false, precision: LGraphTexture.DEFAULT }; + + if(!LGraphFXVigneting._shader) + LGraphFXVigneting._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphFXVigneting.pixel_shader ); + } + + LGraphFXVigneting.title = "Vigneting"; + LGraphFXVigneting.desc = "Vigneting"; + + LGraphFXVigneting.widgets_info = { + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphFXVigneting.prototype.onExecute = function() + { + var tex = this.getInputData(0); + + if(this.properties.precision === LGraphTexture.PASS_THROUGH ) + { + this.setOutputData(0,tex); + return; + } + + if(!tex) return; + + this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision ); + + var intensity = this.properties.intensity; + if( this.isInputConnected(1) ) + { + intensity = this.getInputData(1); + this.properties.intensity = intensity; + } + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + + var mesh = Mesh.getScreenQuad(); + var shader = LGraphFXVigneting._shader; + var invert = this.properties.invert; + + this._tex.drawTo( function() { + tex.bind(0); + shader.uniforms({u_texture:0, u_intensity: intensity, u_isize:[1/tex.width,1/tex.height], u_invert: invert ? 1 : 0}).draw(mesh); + }); + + this.setOutputData(0, this._tex); + } + + LGraphFXVigneting.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform float u_intensity;\n\ + uniform int u_invert;\n\ + \n\ + void main() {\n\ + float luminance = 1.0 - length( v_coord - vec2(0.5) ) * 1.414;\n\ + vec4 color = texture2D(u_texture, v_coord);\n\ + if(u_invert == 1)\n\ + luminance = 1.0 - luminance;\n\ + luminance = mix(1.0, luminance, u_intensity);\n\ + gl_FragColor = vec4( luminance * color.xyz, color.a);\n\ + }\n\ + "; + + LiteGraph.registerNodeType("fx/vigneting", LGraphFXVigneting ); + window.LGraphFXVigneting = LGraphFXVigneting; +} diff --git a/build/litegraph.min.js b/build/litegraph.min.js index 62b1df1ec..39a5abd66 100644 --- a/build/litegraph.min.js +++ b/build/litegraph.min.js @@ -1,9 +1,9 @@ -var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,NODE_COLLAPSED_WIDTH:80,CANVAS_GRID_SIZE:10,NODE_DEFAULT_COLOR:"#999",NODE_DEFAULT_BGCOLOR:"#444",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",debug:!1,throw_errors:!0,registered_node_types:{},registerNodeType:function(a,b){if(!b.prototype)throw"Cannot register a simple object, it must be a class with a prototype"; -b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=a.lastIndexOf("/");b.category=a.substr(0,c);if(b.prototype)for(var d in LGraphNode.prototype)b.prototype[d]||(b.prototype[d]=LGraphNode.prototype[d]);this.registered_node_types[a]=b},createNode:function(a,b,c){var d=this.registered_node_types[a];if(!d)return LiteGraph.debug&&console.log('GraphNode type "'+a+'" not registered.'),null;b=b||d.title||a;d=new d(name);d.type=a;d.title||(d.title=b);d.flags||(d.flags={});d.size|| -(d.size=d.computeSize());d.pos||(d.pos=LiteGraph.DEFAULT_POSITION.concat());if(c)for(var e in c)d[e]=c[e];return d},getNodeType:function(a){return this.registered_node_types[a]},getNodeTypesInCategory:function(a){var b=[],c;for(c in this.registered_node_types)""==a?null==this.registered_node_types[c].category&&b.push(this.registered_node_types[c]):this.registered_node_types[c].category==a&&b.push(this.registered_node_types[c]);return b},getNodeTypesCategories:function(){var a={"":1},b;for(b in this.registered_node_types)this.registered_node_types[b].category&& -!this.registered_node_types[b].skip_list&&(a[this.registered_node_types[b].category]=1);var c=[];for(b in a)c.push(b);return c},reloadNodes:function(a){var b=document.getElementsByTagName("script"),c=[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0];a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script");f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g; -LiteGraph.debug&&console.log("Error while reloading "+e)}}LiteGraph.debug&&console.log("Nodes reloaded")},cloneObject:function(a,b){if(null==a)return null;var c=JSON.parse(JSON.stringify(a));if(!b)return c;for(var d in c)b[d]=c[d];return b}};LiteGraph.getTime="undefined"!=typeof performance?function(){return performance.now()}:function(){return Date.now()};function LGraph(){LiteGraph.debug&&console.log("Graph created");this.list_of_graphcanvas=null;this.clear()} -LGraph.supported_types=["number","string","boolean"];LGraph.prototype.getSupportedTypes=function(){return this.supported_types||LGraph.supported_types};LGraph.STATUS_STOPPED=1;LGraph.STATUS_RUNNING=2; +var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,NODE_COLLAPSED_WIDTH:80,CANVAS_GRID_SIZE:10,NODE_TITLE_COLOR:"#222",NODE_DEFAULT_COLOR:"#999",NODE_DEFAULT_BGCOLOR:"#444",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",proxy:null,debug:!1,throw_errors:!0,registered_node_types:{},registerNodeType:function(a,b){if(!b.prototype)throw"Cannot register a simple object, it must be a class with a prototype"; +b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=a.lastIndexOf("/");b.category=a.substr(0,c);if(b.prototype)for(var d in LGraphNode.prototype)b.prototype[d]||(b.prototype[d]=LGraphNode.prototype[d]);this.registered_node_types[a]=b},createNode:function(a,b,c){var d=this.registered_node_types[a];if(!d)return LiteGraph.debug&&console.log('GraphNode type "'+a+'" not registered.'),null;b=b||d.title||a;d=new d(name);d.type=a;d.title||(d.title=b);d.properties||(d.properties= +{});d.flags||(d.flags={});d.size||(d.size=d.computeSize());d.pos||(d.pos=LiteGraph.DEFAULT_POSITION.concat());if(c)for(var e in c)d[e]=c[e];return d},getNodeType:function(a){return this.registered_node_types[a]},getNodeTypesInCategory:function(a){var b=[],c;for(c in this.registered_node_types)""==a?null==this.registered_node_types[c].category&&b.push(this.registered_node_types[c]):this.registered_node_types[c].category==a&&b.push(this.registered_node_types[c]);return b},getNodeTypesCategories:function(){var a= +{"":1},b;for(b in this.registered_node_types)this.registered_node_types[b].category&&!this.registered_node_types[b].skip_list&&(a[this.registered_node_types[b].category]=1);var c=[];for(b in a)c.push(b);return c},reloadNodes:function(a){var b=document.getElementsByTagName("script"),c=[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0];a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script"); +f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g;LiteGraph.debug&&console.log("Error while reloading "+e)}}LiteGraph.debug&&console.log("Nodes reloaded")},cloneObject:function(a,b){if(null==a)return null;var c=JSON.parse(JSON.stringify(a));if(!b)return c;for(var d in c)b[d]=c[d];return b}};LiteGraph.getTime="undefined"!=typeof performance?function(){return performance.now()}:function(){return Date.now()}; +function LGraph(){LiteGraph.debug&&console.log("Graph created");this.list_of_graphcanvas=null;this.clear()}LGraph.supported_types=["number","string","boolean"];LGraph.prototype.getSupportedTypes=function(){return this.supported_types||LGraph.supported_types};LGraph.STATUS_STOPPED=1;LGraph.STATUS_RUNNING=2; LGraph.prototype.clear=function(){this.stop();this.status=LGraph.STATUS_STOPPED;this.last_node_id=0;this._nodes=[];this._nodes_by_id={};this.last_link_id=0;this.links={};this.iteration=0;this.config={};this.fixedtime=this.runningtime=this.globaltime=0;this.elapsed_time=this.fixedtime_lapse=0.01;this.starttime=0;this.global_inputs={};this.global_outputs={};this.debug=!0;this.change();this.sendActionToCanvas("clear")}; LGraph.prototype.attachCanvas=function(a){if(a.constructor!=LGraphCanvas)throw"attachCanvas expects a LGraphCanvas instance";a.graph&&a.graph!=this&&a.graph.detachCanvas(a);a.graph=this;this.list_of_graphcanvas||(this.list_of_graphcanvas=[]);this.list_of_graphcanvas.push(a)};LGraph.prototype.detachCanvas=function(a){var b=this.list_of_graphcanvas.indexOf(a);-1!=b&&(a.graph=null,this.list_of_graphcanvas.splice(b,1))}; LGraph.prototype.start=function(a){if(this.status!=LGraph.STATUS_RUNNING){this.status=LGraph.STATUS_RUNNING;if(this.onPlayEvent)this.onPlayEvent();this.sendEventToAllNodes("onStart");this.starttime=LiteGraph.getTime();var b=this;this.execution_timer_id=setInterval(function(){b.runStep(1)},a||1)}}; @@ -18,18 +18,18 @@ LGraph.prototype.remove=function(a){if(null!=this._nodes_by_id[a.id]&&!a.ignore_ null);b=this._nodes.indexOf(a);-1!=b&&this._nodes.splice(b,1);delete this._nodes_by_id[a.id];if(this.onNodeRemoved)this.onNodeRemoved(a);this.setDirtyCanvas(!0,!0);this.change();this.updateExecutionOrder()}};LGraph.prototype.getNodeById=function(a){return null==a?null:this._nodes_by_id[a]};LGraph.prototype.findNodesByType=function(a){var b=[],c;for(c in this._nodes)this._nodes[c].type==a&&b.push(this._nodes[c]);return b}; LGraph.prototype.findNodesByTitle=function(a){var b=[],c;for(c in this._nodes)this._nodes[c].title==a&&b.push(this._nodes[c]);return b};LGraph.prototype.getNodeOnPos=function(a,b,c){c=c||this._nodes;for(var d=c.length-1;0<=d;d--){var e=c[d];if(e.isPointInsideNode(a,b))return e}return null};LGraph.prototype.addGlobalInput=function(a,b,c){this.global_inputs[a]={name:a,type:b,value:c};if(this.onGlobalInputAdded)this.onGlobalInputAdded(a,b);if(this.onGlobalsChange)this.onGlobalsChange()}; LGraph.prototype.setGlobalInputData=function(a,b){var c=this.global_inputs[a];c&&(c.value=b)};LGraph.prototype.getGlobalInputData=function(a){return(a=this.global_inputs[a])?a.value:null}; -LGraph.prototype.renameGlobalInput=function(a,b,c){if(!this.global_inputs[a])return!1;if(this.global_inputs[b])return console.error("there is already one input with that name"),!1;this.global_inputs[b]=this.global_inputs[a];delete this.global_inputs[a];if(this.onGlobalInputRenamed)this.onGlobalInputRenamed(a,b);if(this.onGlobalsChange)this.onGlobalsChange()}; -LGraph.prototype.removeGlobalInput=function(a){if(!this.global_inputs[a])return!1;delete this.global_inputs[a];if(this.onGlobalInputRemoved)this.onGlobalInputRemoved(a);if(this.onGlobalsChange)this.onGlobalsChange();return!0};LGraph.prototype.addGlobalOutput=function(a,b,c){this.global_outputs[a]={name:a,type:b,value:c};if(this.onGlobalOutputAdded)this.onGlobalOutputAdded(a,b);if(this.onGlobalsChange)this.onGlobalsChange()}; -LGraph.prototype.setGlobalOutputData=function(a,b){var c=this.global_outputs[a];c&&(c.value=b)};LGraph.prototype.getGlobalOutputData=function(a){return(a=this.global_outputs[a])?a.value:null}; -LGraph.prototype.renameGlobalOutput=function(a,b,c){if(!this.global_outputs[a])return!1;if(this.global_outputs[b])return console.error("there is already one output with that name"),!1;this.global_outputs[b]=this.global_outputs[a];delete this.global_outputs[a];if(this.onGlobalOutputRenamed)this.onGlobalOutputRenamed(a,b);if(this.onGlobalsChange)this.onGlobalsChange()}; -LGraph.prototype.removeGlobalOutput=function(a){if(!this.global_outputs[a])return!1;delete this.global_outputs[a];if(this.onGlobalOutputRemoved)this.onGlobalOutputRemoved(a);if(this.onGlobalsChange)this.onGlobalsChange();return!0};LGraph.prototype.setInputData=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setValue(b)};LGraph.prototype.getOutputData=function(a){return this.findNodesByName(a).length?m[0].getValue():null}; -LGraph.prototype.triggerInput=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].onTrigger(b)};LGraph.prototype.setCallback=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setTrigger(b)};LGraph.prototype.onConnectionChange=function(){this.updateExecutionOrder()};LGraph.prototype.isLive=function(){for(var a in this.list_of_graphcanvas)if(this.list_of_graphcanvas[a].live_mode)return!0;return!1}; -LGraph.prototype.change=function(){LiteGraph.debug&&console.log("Graph changed");this.sendActionToCanvas("setDirty",[!0,!0]);if(this.on_change)this.on_change(this)};LGraph.prototype.setDirtyCanvas=function(a,b){this.sendActionToCanvas("setDirty",[a,b])}; +LGraph.prototype.renameGlobalInput=function(a,b){if(b!=a){if(!this.global_inputs[a])return!1;if(this.global_inputs[b])return console.error("there is already one input with that name"),!1;this.global_inputs[b]=this.global_inputs[a];delete this.global_inputs[a];if(this.onGlobalInputRenamed)this.onGlobalInputRenamed(a,b);if(this.onGlobalsChange)this.onGlobalsChange()}}; +LGraph.prototype.changeGlobalInputType=function(a,b){if(!this.global_inputs[a])return!1;if(this.global_inputs[a].type!=b&&(this.global_inputs[a].type=b,this.onGlobalInputTypeChanged))this.onGlobalInputTypeChanged(a,b)};LGraph.prototype.removeGlobalInput=function(a){if(!this.global_inputs[a])return!1;delete this.global_inputs[a];if(this.onGlobalInputRemoved)this.onGlobalInputRemoved(a);if(this.onGlobalsChange)this.onGlobalsChange();return!0}; +LGraph.prototype.addGlobalOutput=function(a,b,c){this.global_outputs[a]={name:a,type:b,value:c};if(this.onGlobalOutputAdded)this.onGlobalOutputAdded(a,b);if(this.onGlobalsChange)this.onGlobalsChange()};LGraph.prototype.setGlobalOutputData=function(a,b){var c=this.global_outputs[a];c&&(c.value=b)};LGraph.prototype.getGlobalOutputData=function(a){return(a=this.global_outputs[a])?a.value:null}; +LGraph.prototype.renameGlobalOutput=function(a,b){if(!this.global_outputs[a])return!1;if(this.global_outputs[b])return console.error("there is already one output with that name"),!1;this.global_outputs[b]=this.global_outputs[a];delete this.global_outputs[a];if(this.onGlobalOutputRenamed)this.onGlobalOutputRenamed(a,b);if(this.onGlobalsChange)this.onGlobalsChange()}; +LGraph.prototype.changeGlobalOutputType=function(a,b){if(!this.global_outputs[a])return!1;if(this.global_outputs[a].type!=b&&(this.global_outputs[a].type=b,this.onGlobalOutputTypeChanged))this.onGlobalOutputTypeChanged(a,b)};LGraph.prototype.removeGlobalOutput=function(a){if(!this.global_outputs[a])return!1;delete this.global_outputs[a];if(this.onGlobalOutputRemoved)this.onGlobalOutputRemoved(a);if(this.onGlobalsChange)this.onGlobalsChange();return!0}; +LGraph.prototype.setInputData=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setValue(b)};LGraph.prototype.getOutputData=function(a){return this.findNodesByName(a).length?m[0].getValue():null};LGraph.prototype.triggerInput=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].onTrigger(b)};LGraph.prototype.setCallback=function(a,b){var c=this.findNodesByName(a),d;for(d in c)c[d].setTrigger(b)};LGraph.prototype.onConnectionChange=function(){this.updateExecutionOrder()}; +LGraph.prototype.isLive=function(){for(var a in this.list_of_graphcanvas)if(this.list_of_graphcanvas[a].live_mode)return!0;return!1};LGraph.prototype.change=function(){LiteGraph.debug&&console.log("Graph changed");this.sendActionToCanvas("setDirty",[!0,!0]);if(this.on_change)this.on_change(this)};LGraph.prototype.setDirtyCanvas=function(a,b){this.sendActionToCanvas("setDirty",[a,b])}; LGraph.prototype.serialize=function(){var a=[],b;for(b in this._nodes)a.push(this._nodes[b].serialize());for(b in this.links)this.links[b].data=null;return{iteration:this.iteration,frame:this.frame,last_node_id:this.last_node_id,last_link_id:this.last_link_id,links:LiteGraph.cloneObject(this.links),config:this.config,nodes:a}}; -LGraph.prototype.configure=function(a,b){b||this.clear();var c=a.nodes,d;for(d in a)this[d]=a[d];var e=!1;this._nodes=[];for(d in c){var f=c[d],g=LiteGraph.createNode(f.type,f.title);g?(g.id=f.id,this.add(g,!0),g.configure(f)):(LiteGraph.debug&&console.log("Node not found: "+f.type),e=!0)}this.updateExecutionOrder();this.setDirtyCanvas(!0,!0);return e};LGraph.prototype.onNodeTrace=function(a,b,c){}; -function LGraphNode(a){this.title=a||"Unnamed";this.size=[LiteGraph.NODE_WIDTH,60];this.graph=null;this.pos=[10,10];this.id=-1;this.type=null;this.inputs=[];this.outputs=[];this.connections=[];this.data=null;this.flags={}} -LGraphNode.prototype.configure=function(a){for(var b in a)"console"!=b&&null!=a[b]&&("object"==typeof a[b]?this[b]&&this[b].configure?this[b].configure(a[b]):this[b]=LiteGraph.cloneObject(a[b],this[b]):this[b]=a[b]);for(var c in this.inputs){var d=this.inputs[c];d.link&&d.link.length&&(a=d.link,"object"==typeof a&&(d.link=a[0],this.graph.links[a[0]]={id:a[0],origin_id:a[1],origin_slot:a[2],target_id:a[3],target_slot:a[4]}))}for(c in this.outputs)if(d=this.outputs[c],d.links&&0!=d.links.length)for(b in d.links)a= -d.links[b],"object"==typeof a&&(d.links[b]=a[0])}; +LGraph.prototype.configure=function(a,b){b||this.clear();var c=a.nodes,d;for(d in a)this[d]=a[d];var e=!1;this._nodes=[];for(d in c){var f=c[d],g=LiteGraph.createNode(f.type,f.title);g?(g.id=f.id,this.add(g,!0),g.configure(f)):(LiteGraph.debug&&console.log("Node not found: "+f.type),e=!0)}this.updateExecutionOrder();this.setDirtyCanvas(!0,!0);return e};LGraph.prototype.onNodeTrace=function(a,b,c){};function LGraphNode(a){this._ctor()} +LGraphNode.prototype._ctor=function(a){this.title=a||"Unnamed";this.size=[LiteGraph.NODE_WIDTH,60];this.graph=null;this.pos=[10,10];this.id=-1;this.type=null;this.inputs=[];this.outputs=[];this.connections=[];this.properties={};this.data=null;this.flags={}}; +LGraphNode.prototype.configure=function(a){for(var b in a)if("console"!=b)if("properties"==b)for(var c in a.properties)this.properties[c]=a.properties[c];else null!=a[b]&&("object"==typeof a[b]?this[b]&&this[b].configure?this[b].configure(a[b]):this[b]=LiteGraph.cloneObject(a[b],this[b]):this[b]=a[b]);for(var d in this.inputs)c=this.inputs[d],c.link&&c.link.length&&(a=c.link,"object"==typeof a&&(c.link=a[0],this.graph.links[a[0]]={id:a[0],origin_id:a[1],origin_slot:a[2],target_id:a[3],target_slot:a[4]})); +for(d in this.outputs)if(c=this.outputs[d],c.links&&0!=c.links.length)for(b in c.links)a=c.links[b],"object"==typeof a&&(c.links[b]=a[0])}; LGraphNode.prototype.serialize=function(){var a={id:this.id,title:this.title,type:this.type,pos:this.pos,size:this.size,data:this.data,flags:LiteGraph.cloneObject(this.flags),inputs:this.inputs,outputs:this.outputs};this.properties&&(a.properties=LiteGraph.cloneObject(this.properties));a.type||(a.type=this.constructor.type);this.color&&(a.color=this.color);this.bgcolor&&(a.bgcolor=this.bgcolor);this.boxcolor&&(a.boxcolor=this.boxcolor);this.shape&&(a.shape=this.shape);if(this.onSerialize)this.onSerialize(a); return a};LGraphNode.prototype.clone=function(){var a=LiteGraph.createNode(this.type),b=this.serialize();delete b.id;a.configure(b);return a};LGraphNode.prototype.toString=function(){return JSON.stringify(this.serialize())};LGraphNode.prototype.getTitle=function(){return this.title||this.constructor.title}; LGraphNode.prototype.setOutputData=function(a,b){if(this.outputs&&-1a&&this.pos[1]-cb)return!0;return!1}; LGraphNode.prototype.findInputSlot=function(a){if(!this.inputs)return-1;for(var b=0,c=this.inputs.length;b=this.outputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(b==this)return!1;if(c.constructor===String){if(c=b.findInputSlot(c),-1==c)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+c),!1}else if(!b.inputs||c>=b.inputs.length)return LiteGraph.debug&& -console.log("Connect: Error, slot number not found"),!1;-1!=c&&null!=b.inputs[c].link&&b.disconnectInput(c);var d=this.outputs[a];if(-1==c)null==d.links&&(d.links=[]),d.links.push({id:b.id,slot:-1});else if(0==d.type||0==b.inputs[c].type||d.type==b.inputs[c].type)a={id:this.graph.last_link_id++,origin_id:this.id,origin_slot:a,target_id:b.id,target_slot:c},this.graph.links[a.id]=a,null==d.links&&(d.links=[]),d.links.push(a.id),b.inputs[c].link=a.id,this.setDirtyCanvas(!1,!0),this.graph.onConnectionChange(); -return!0}; +console.log("Connect: Error, slot number not found"),!1;-1!=c&&null!=b.inputs[c].link&&b.disconnectInput(c);var d=this.outputs[a];-1==c?(null==d.links&&(d.links=[]),d.links.push({id:b.id,slot:-1})):d.type&&b.inputs[c].type&&d.type!=b.inputs[c].type||(a={id:this.graph.last_link_id++,origin_id:this.id,origin_slot:a,target_id:b.id,target_slot:c},this.graph.links[a.id]=a,null==d.links&&(d.links=[]),d.links.push(a.id),b.inputs[c].link=a.id,this.setDirtyCanvas(!1,!0),this.graph.onConnectionChange());return!0}; LGraphNode.prototype.disconnectOutput=function(a,b){if(a.constructor===String){if(a=this.findOutputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.outputs||a>=this.outputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;var c=this.outputs[a];if(!c.links||0==c.links.length)return!1;if(b)for(var d=0,e=c.links.length;d=this.inputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(!this.inputs[a])return!1;var b=this.inputs[a].link;this.inputs[a].link=null;b=this.graph.links[b];a=this.graph.getNodeById(b.origin_id);if(!a)return!1;a=a.outputs[b.origin_slot];if(!a||!a.links|| @@ -54,29 +53,30 @@ a?[this.pos[0],this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]:[this.pos[0]+this.si LGraphNode.prototype.trace=function(a){this.console||(this.console=[]);this.console.push(a);this.console.length>LGraphNode.MAX_CONSOLE&&this.console.shift();this.graph.onNodeTrace(this,a)};LGraphNode.prototype.setDirtyCanvas=function(a,b){this.graph&&this.graph.sendActionToCanvas("setDirty",[a,b])};LGraphNode.prototype.loadImage=function(a){var b=new Image;b.src=LiteGraph.node_images_path+a;b.ready=!1;var c=this;b.onload=function(){this.ready=!0;c.setDirtyCanvas(!0)};return b}; LGraphNode.prototype.executeAction=function(a){if(""==a)return!1;if(-1!=a.indexOf(";")||-1!=a.indexOf("}"))return this.trace("Error: Action contains unsafe characters"),!1;var b=a.split("(")[0];if("function"!=typeof this[b])return this.trace("Error: Action not found on node: "+b),!1;try{b=eval,eval=null,(new Function("with(this) { "+a+"}")).call(this),eval=b}catch(c){return this.trace("Error executing action {"+a+"} :"+c),!1}return!0}; LGraphNode.prototype.captureInput=function(a){if(this.graph&&this.graph.list_of_graphcanvas){var b=this.graph.list_of_graphcanvas,c;for(c in b){var d=b[c];if(a||d.node_capturing_input==this)d.node_capturing_input=a?this:null,this.graph.debug&&console.log(this.title+": Capturing input "+(a?"ON":"OFF"))}}};LGraphNode.prototype.collapse=function(){this.flags.collapsed=this.flags.collapsed?!1:!0;this.setDirtyCanvas(!0,!0)}; -LGraphNode.prototype.pin=function(a){this.flags.pinned=void 0===a?!this.flags.pinned:a};LGraphNode.prototype.localToScreen=function(a,b,c){return[(a+this.pos[0])*c.scale+c.offset[0],(b+this.pos[1])*c.scale+c.offset[1]]};function LGraphCanvas(a,b){"string"==typeof a&&(a=document.querySelector(a));if(!a)throw"no canvas found";b&&b.attachCanvas(this);this.setCanvas(a);this.clear();this.startRendering()}LGraphCanvas.link_type_colors={number:"#AAC",node:"#DCA"}; +LGraphNode.prototype.pin=function(a){this.flags.pinned=void 0===a?!this.flags.pinned:a};LGraphNode.prototype.localToScreen=function(a,b,c){return[(a+this.pos[0])*c.scale+c.offset[0],(b+this.pos[1])*c.scale+c.offset[1]]};function LGraphCanvas(a,b,c){"string"==typeof a&&(a=document.querySelector(a));if(!a)throw"no canvas found";this.max_zoom=10;this.min_zoom=0.1;b&&b.attachCanvas(this);this.setCanvas(a);this.clear();c||this.startRendering()}LGraphCanvas.link_type_colors={number:"#AAC",node:"#DCA"}; LGraphCanvas.prototype.clear=function(){this.fps=this.render_time=this.last_draw_time=this.frame=0;this.scale=1;this.offset=[0,0];this.selected_nodes={};this.connecting_node=this.node_capturing_input=this.node_over=this.node_dragged=null;this.highquality_render=!0;this.editor_alpha=1;this.pause_rendering=!1;this.dirty_bgcanvas=this.dirty_canvas=this.render_shadows=!0;this.dirty_area=null;this.render_only_selected=!0;this.live_mode=!1;this.allow_dragnodes=this.allow_dragcanvas=this.show_info=!0;this.node_in_panel= null;this.last_mouse=[0,0];this.last_mouseclick=0;this.title_text_font="bold 14px Arial";this.inner_text_font="normal 12px Arial";this.render_connections_shadows=!1;this.render_connection_arrows=this.render_curved_connections=this.render_connections_border=!0;this.connections_width=4;if(this.onClear)this.onClear()};LGraphCanvas.prototype.setGraph=function(a){this.graph!=a&&(this.clear(),!a&&this.graph?this.graph.detachCanvas(this):(a.attachCanvas(this),this.setDirty(!0,!0)))}; LGraphCanvas.prototype.openSubgraph=function(a){if(!a)throw"graph cannot be null";if(this.graph==a)throw"graph cannot be the same";this.clear();this.graph&&(this._graph_stack||(this._graph_stack=[]),this._graph_stack.push(this.graph));a.attachCanvas(this);this.setDirty(!0,!0)};LGraphCanvas.prototype.closeSubgraph=function(){this._graph_stack&&0!=this._graph_stack.length&&(this._graph_stack.pop().attachCanvas(this),this.setDirty(!0,!0))}; -LGraphCanvas.prototype.setCanvas=function(a){var b=this;"string"==typeof a&&(a=document.getElementById(a));if(null==a)throw"Error creating LiteGraph canvas: Canvas not found";if(a!=this.canvas){this.canvas=a;this.canvas.className+=" lgraphcanvas";this.canvas.data=this;this.bgcanvas=null;this.bgcanvas||(this.bgcanvas=document.createElement("canvas"),this.bgcanvas.width=this.canvas.width,this.bgcanvas.height=this.canvas.height);if(null==this.canvas.getContext)throw"This browser doesnt support Canvas"; -this.ctx=this.canvas.getContext("2d");this.bgctx=this.bgcanvas.getContext("2d");this._mousemove_callback=this.processMouseMove.bind(this);this._mouseup_callback=this.processMouseUp.bind(this);this.canvas.addEventListener("mousedown",this.processMouseDown.bind(this),!0);this.canvas.addEventListener("mousemove",this._mousemove_callback);this.canvas.addEventListener("contextmenu",function(a){a.preventDefault();return!1});this.canvas.addEventListener("mousewheel",this.processMouseWheel.bind(this),!1); -this.canvas.addEventListener("DOMMouseScroll",this.processMouseWheel.bind(this),!1);this.canvas.addEventListener("touchstart",this.touchHandler,!0);this.canvas.addEventListener("touchmove",this.touchHandler,!0);this.canvas.addEventListener("touchend",this.touchHandler,!0);this.canvas.addEventListener("touchcancel",this.touchHandler,!0);this.canvas.addEventListener("keydown",function(a){b.processKeyDown(a)});this.canvas.addEventListener("keyup",function(a){b.processKeyUp(a)})}}; -LGraphCanvas.prototype.setDirty=function(a,b){a&&(this.dirty_canvas=!0);b&&(this.dirty_bgcanvas=!0)};LGraphCanvas.prototype.getCanvasWindow=function(){var a=this.canvas.ownerDocument;return a.defaultView||a.parentWindow};LGraphCanvas.prototype.startRendering=function(){function a(){this.pause_rendering||this.draw();var b=this.getCanvasWindow();this.is_rendering&&b.requestAnimationFrame(a.bind(this))}this.is_rendering||(this.is_rendering=!0,a.call(this))}; -LGraphCanvas.prototype.stopRendering=function(){this.is_rendering=!1}; +LGraphCanvas.prototype.setCanvas=function(a){var b=this;"string"==typeof a&&(a=document.getElementById(a));if(null==a)throw"Error creating LiteGraph canvas: Canvas not found";if(a!=this.canvas){this.canvas=a;a.className+=" lgraphcanvas";a.data=this;this.bgcanvas=null;this.bgcanvas||(this.bgcanvas=document.createElement("canvas"),this.bgcanvas.width=this.canvas.width,this.bgcanvas.height=this.canvas.height);if(null==a.getContext)throw"This browser doesnt support Canvas";null==(this.ctx=a.getContext("2d"))&& +(console.warn("This canvas seems to be WebGL, enabling WebGL renderer"),this.enableWebGL());this._mousemove_callback=this.processMouseMove.bind(this);this._mouseup_callback=this.processMouseUp.bind(this);a.addEventListener("mousedown",this.processMouseDown.bind(this),!0);a.addEventListener("mousemove",this._mousemove_callback);a.addEventListener("contextmenu",function(a){a.preventDefault();return!1});a.addEventListener("mousewheel",this.processMouseWheel.bind(this),!1);a.addEventListener("DOMMouseScroll", +this.processMouseWheel.bind(this),!1);a.addEventListener("touchstart",this.touchHandler,!0);a.addEventListener("touchmove",this.touchHandler,!0);a.addEventListener("touchend",this.touchHandler,!0);a.addEventListener("touchcancel",this.touchHandler,!0);a.addEventListener("keydown",function(a){b.processKeyDown(a)});a.addEventListener("keyup",function(a){b.processKeyUp(a)});a.ondragover=function(){console.log("hover");return!1};a.ondragend=function(){console.log("out");return!1};a.ondrop=function(a){a.preventDefault(); +b.adjustMouseEvent(a);var d=[a.canvasX,a.canvasY],e=b.graph.getNodeOnPos(d[0],d[1]);if(e&&e.onDropFile){var f=a.dataTransfer.files[0],g=f.name;LGraphCanvas.getFileExtension(g);a=new FileReader;a.onload=function(a){e.onDropFile(a.target.result,g,f)};d=f.type.split("/")[0];"text"==d?a.readAsText(f):"image"==d?a.readAsDataURL(f):a.readAsArrayBuffer(f);return!1}}}};LGraphCanvas.getFileExtension=function(a){var b=a.indexOf("?");-1!=b&&(a=a.substr(0,b));b=a.lastIndexOf(".");return-1==b?"":a.substr(b+1).toLowerCase()}; +LGraphCanvas.prototype.enableWebGL=function(){if(void 0===typeof GL)throw"litegl.js must be included to use a WebGL canvas";if(void 0===typeof enableWebGLCanvas)throw"webglCanvas.js must be included to use this feature";this.gl=this.ctx=enableWebGLCanvas(this.canvas);this.ctx.webgl=!0;this.bgcanvas=this.canvas;this.bgctx=this.gl};LGraphCanvas.prototype.setDirty=function(a,b){a&&(this.dirty_canvas=!0);b&&(this.dirty_bgcanvas=!0)}; +LGraphCanvas.prototype.getCanvasWindow=function(){var a=this.canvas.ownerDocument;return a.defaultView||a.parentWindow};LGraphCanvas.prototype.startRendering=function(){function a(){this.pause_rendering||this.draw();var b=this.getCanvasWindow();this.is_rendering&&b.requestAnimationFrame(a.bind(this))}this.is_rendering||(this.is_rendering=!0,a.call(this))};LGraphCanvas.prototype.stopRendering=function(){this.is_rendering=!1}; LGraphCanvas.prototype.processMouseDown=function(a){if(this.graph){this.adjustMouseEvent(a);var b=this.getCanvasWindow();this.canvas.removeEventListener("mousemove",this._mousemove_callback);b.document.addEventListener("mousemove",this._mousemove_callback,!0);b.document.addEventListener("mouseup",this._mouseup_callback,!0);var c=this.graph.getNodeOnPos(a.canvasX,a.canvasY,this.visible_nodes);if(1==a.which){if(!a.shiftKey){var d=[],e;for(e in this.selected_nodes)this.selected_nodes[e]!=c&&d.push(this.selected_nodes[e]); for(e in d)this.processNodeDeselected(d[e])}d=!1;if(c){this.live_mode||c.flags.pinned||this.bringToFront(c);var f=!1;if(!this.connecting_node&&!c.flags.collapsed&&!this.live_mode){if(c.outputs){e=0;for(var g=c.outputs.length;eLiteGraph.getTime()-this.last_mouseclick&&this.selected_nodes[c.id]){if(c.onDblClick)c.onDblClick(a);this.processNodeDblClicked(c);e=!0}c.onMouseDown&&c.onMouseDown(a)? -e=!0:this.live_mode&&(e=d=!0);e||(this.allow_dragnodes&&(this.node_dragged=c),this.selected_nodes[c.id]||this.processNodeSelected(c,a));this.dirty_canvas=!0}}else d=!0;d&&this.allow_dragcanvas&&(this.dragging_canvas=!0)}else 2!=a.which&&3==a.which&&this.processContextualMenu(c,a);this.last_mouse[0]=a.localX;this.last_mouse[1]=a.localY;this.last_mouseclick=LiteGraph.getTime();this.canvas_mouse=[a.canvasX,a.canvasY];this.graph.change();(!b.document.activeElement||"input"!=b.document.activeElement.nodeName.toLowerCase()&& -"textarea"!=b.document.activeElement.nodeName.toLowerCase())&&a.preventDefault();a.stopPropagation();return!1}}; +g;++e)h=c.inputs[e],l=c.getConnectionPos(!0,e),isInsideRectangle(a.canvasX,a.canvasY,l[0]-10,l[1]-5,20,10)&&h.link&&(c.disconnectInput(e),f=this.dirty_bgcanvas=!0);!f&&isInsideRectangle(a.canvasX,a.canvasY,c.pos[0]+c.size[0]-5,c.pos[1]+c.size[1]-5,5,5)&&(this.resizing_node=c,this.canvas.style.cursor="se-resize",f=!0)}!f&&isInsideRectangle(a.canvasX,a.canvasY,c.pos[0],c.pos[1]-LiteGraph.NODE_TITLE_HEIGHT,LiteGraph.NODE_TITLE_HEIGHT,LiteGraph.NODE_TITLE_HEIGHT)&&(c.collapse(),f=!0);if(!f){e=!1;if(300> +LiteGraph.getTime()-this.last_mouseclick&&this.selected_nodes[c.id]){if(c.onDblClick)c.onDblClick(a);this.processNodeDblClicked(c);e=!0}c.onMouseDown&&c.onMouseDown(a)?e=!0:this.live_mode&&(e=d=!0);e||(this.allow_dragnodes&&(this.node_dragged=c),this.selected_nodes[c.id]||this.processNodeSelected(c,a));this.dirty_canvas=!0}}else d=!0;d&&this.allow_dragcanvas&&(this.dragging_canvas=!0)}else 2!=a.which&&3==a.which&&this.processContextualMenu(c,a);this.last_mouse[0]=a.localX;this.last_mouse[1]=a.localY; +this.last_mouseclick=LiteGraph.getTime();this.canvas_mouse=[a.canvasX,a.canvasY];this.graph.change();(!b.document.activeElement||"input"!=b.document.activeElement.nodeName.toLowerCase()&&"textarea"!=b.document.activeElement.nodeName.toLowerCase())&&a.preventDefault();a.stopPropagation();return!1}}; LGraphCanvas.prototype.processMouseMove=function(a){if(this.graph){this.adjustMouseEvent(a);var b=[a.localX,a.localY],c=[b[0]-this.last_mouse[0],b[1]-this.last_mouse[1]];this.last_mouse=b;this.canvas_mouse=[a.canvasX,a.canvasY];if(this.dragging_canvas)this.offset[0]+=c[0]/this.scale,this.offset[1]+=c[1]/this.scale,this.dirty_bgcanvas=this.dirty_canvas=!0;else{this.connecting_node&&(this.dirty_canvas=!0);var b=this.graph.getNodeOnPos(a.canvasX,a.canvasY,this.visible_nodes),d;for(d in this.graph._nodes)if(this.graph._nodes[d].mouseOver&& -b!=this.graph._nodes[d]){this.graph._nodes[d].mouseOver=!1;if(this.node_over&&this.node_over.onMouseLeave)this.node_over.onMouseLeave(a);this.node_over=null;this.dirty_canvas=!0}if(b){if(!b.mouseOver&&(b.mouseOver=!0,this.node_over=b,this.dirty_canvas=!0,b.onMouseEnter))b.onMouseEnter(a);if(b.onMouseMove)b.onMouseMove(a);if(this.connecting_node){var e=this._highlight_input||[0,0],f=this.isOverNodeInput(b,a.canvasX,a.canvasY,e);if(-1!=f&&b.inputs[f]){if(f=b.inputs[f].type,f==this.connecting_output.type|| -"*"==f||"*"==this.connecting_output.type)this._highlight_input=e}else this._highlight_input=null}isInsideRectangle(a.canvasX,a.canvasY,b.pos[0]+b.size[0]-5,b.pos[1]+b.size[1]-5,5,5)?this.canvas.style.cursor="se-resize":this.canvas.style.cursor=null}else this.canvas.style.cursor=null;if(this.node_capturing_input&&this.node_capturing_input!=b&&this.node_capturing_input.onMouseMove)this.node_capturing_input.onMouseMove(a);if(this.node_dragged&&!this.live_mode){for(d in this.selected_nodes)b=this.selected_nodes[d], +b!=this.graph._nodes[d]){this.graph._nodes[d].mouseOver=!1;if(this.node_over&&this.node_over.onMouseLeave)this.node_over.onMouseLeave(a);this.node_over=null;this.dirty_canvas=!0}if(b){if(!b.mouseOver&&(b.mouseOver=!0,this.node_over=b,this.dirty_canvas=!0,b.onMouseEnter))b.onMouseEnter(a);if(b.onMouseMove)b.onMouseMove(a);if(this.connecting_node){var e=this._highlight_input||[0,0],f=this.isOverNodeInput(b,a.canvasX,a.canvasY,e);-1!=f&&b.inputs[f]?(f=b.inputs[f].type,f!=this.connecting_output.type&& +f&&this.connecting_output.type||(this._highlight_input=e)):this._highlight_input=null}isInsideRectangle(a.canvasX,a.canvasY,b.pos[0]+b.size[0]-5,b.pos[1]+b.size[1]-5,5,5)?this.canvas.style.cursor="se-resize":this.canvas.style.cursor=null}else this.canvas.style.cursor=null;if(this.node_capturing_input&&this.node_capturing_input!=b&&this.node_capturing_input.onMouseMove)this.node_capturing_input.onMouseMove(a);if(this.node_dragged&&!this.live_mode){for(d in this.selected_nodes)b=this.selected_nodes[d], b.pos[0]+=c[0]/this.scale,b.pos[1]+=c[1]/this.scale;this.dirty_bgcanvas=this.dirty_canvas=!0}this.resizing_node&&!this.live_mode&&(this.resizing_node.size[0]+=c[0]/this.scale,this.resizing_node.size[1]+=c[1]/this.scale,c=Math.max(this.resizing_node.inputs?this.resizing_node.inputs.length:0,this.resizing_node.outputs?this.resizing_node.outputs.length:0),this.resizing_node.size[1]b&&(c*=1/1.1);this.setZoom(c,[a.localX,a.localY]);this.graph.change();a.preventDefault();return!1}}; LGraphCanvas.prototype.processNodeSelected=function(a,b){a.selected=!0;if(a.onSelected)a.onSelected();b&&b.shiftKey||(this.selected_nodes={});this.selected_nodes[a.id]=a;this.dirty_canvas=!0;if(this.onNodeSelected)this.onNodeSelected(a)};LGraphCanvas.prototype.processNodeDeselected=function(a){a.selected=!1;if(a.onDeselected)a.onDeselected();delete this.selected_nodes[a.id];if(this.onNodeDeselected)this.onNodeDeselected();this.dirty_canvas=!0}; @@ -84,23 +84,26 @@ LGraphCanvas.prototype.processNodeDblClicked=function(a){if(this.onShowNodePanel LGraphCanvas.prototype.selectAllNodes=function(){for(var a in this.graph._nodes){var b=this.graph._nodes[a];if(!b.selected&&b.onSelected)b.onSelected();b.selected=!0;this.selected_nodes[this.graph._nodes[a].id]=b}this.setDirty(!0)};LGraphCanvas.prototype.deselectAllNodes=function(){for(var a in this.selected_nodes){var b=this.selected_nodes;if(b.onDeselected)b.onDeselected();b.selected=!1}this.selected_nodes={};this.setDirty(!0)}; LGraphCanvas.prototype.deleteSelectedNodes=function(){for(var a in this.selected_nodes)this.graph.remove(this.selected_nodes[a]);this.selected_nodes={};this.setDirty(!0)};LGraphCanvas.prototype.centerOnNode=function(a){this.offset[0]=-a.pos[0]-0.5*a.size[0]+0.5*this.canvas.width/this.scale;this.offset[1]=-a.pos[1]-0.5*a.size[1]+0.5*this.canvas.height/this.scale;this.setDirty(!0,!0)}; LGraphCanvas.prototype.adjustMouseEvent=function(a){var b=this.canvas.getBoundingClientRect();a.localX=a.pageX-b.left;a.localY=a.pageY-b.top;a.canvasX=a.localX/this.scale-this.offset[0];a.canvasY=a.localY/this.scale-this.offset[1]}; -LGraphCanvas.prototype.setZoom=function(a,b){b||(b=[0.5*this.canvas.width,0.5*this.canvas.height]);var c=this.convertOffsetToCanvas(b);this.scale=a;4this.scale&&(this.scale=0.1);var d=this.convertOffsetToCanvas(b),c=[d[0]-c[0],d[1]-c[1]];this.offset[0]+=c[0];this.offset[1]+=c[1];this.dirty_bgcanvas=this.dirty_canvas=!0};LGraphCanvas.prototype.convertOffsetToCanvas=function(a){return[a[0]/this.scale-this.offset[0],a[1]/this.scale-this.offset[1]]}; -LGraphCanvas.prototype.convertCanvasToOffset=function(a){return[(a[0]+this.offset[0])*this.scale,(a[1]+this.offset[1])*this.scale]};LGraphCanvas.prototype.convertEventToCanvas=function(a){var b=this.canvas.getClientRects()[0];return this.convertOffsetToCanvas([a.pageX-b.left,a.pageY-b.top])};LGraphCanvas.prototype.bringToFront=function(a){var b=this.graph._nodes.indexOf(a);-1!=b&&(this.graph._nodes.splice(b,1),this.graph._nodes.push(a))}; -LGraphCanvas.prototype.sendToBack=function(a){var b=this.graph._nodes.indexOf(a);-1!=b&&(this.graph._nodes.splice(b,1),this.graph._nodes.unshift(a))};LGraphCanvas.prototype.computeVisibleNodes=function(){var a=[],b;for(b in this.graph._nodes){var c=this.graph._nodes[b];(!this.live_mode||c.onDrawBackground||c.onDrawForeground)&&overlapBounding(this.visible_area,c.getBounding())&&a.push(c)}return a}; -LGraphCanvas.prototype.draw=function(a,b){var c=LiteGraph.getTime();this.render_time=0.001*(c-this.last_draw_time);this.last_draw_time=c;if(this.graph){var c=[-this.offset[0],-this.offset[1]],d=[c[0]+this.canvas.width/this.scale,c[1]+this.canvas.height/this.scale];this.visible_area=new Float32Array([c[0],c[1],d[0],d[1]])}(this.dirty_bgcanvas||b)&&this.drawBgcanvas();(this.dirty_canvas||a)&&this.drawFrontCanvas();this.fps=this.render_time?1/this.render_time:0;this.frame+=1}; -LGraphCanvas.prototype.drawFrontCanvas=function(){var a=this.ctx,b=this.canvas;a.restore();a.setTransform(1,0,0,1,0,0);this.dirty_area&&(a.save(),a.beginPath(),a.rect(this.dirty_area[0],this.dirty_area[1],this.dirty_area[2],this.dirty_area[3]),a.clip());a.clearRect(0,0,b.width,b.height);a.drawImage(this.bgcanvas,0,0);this.show_info&&(a.font="10px Arial",a.fillStyle="#888",this.graph?(a.fillText("T: "+this.graph.globaltime.toFixed(2)+"s",5,13),a.fillText("I: "+this.graph.iteration,5,26),a.fillText("F: "+ -this.frame,5,39),a.fillText("FPS:"+this.fps.toFixed(2),5,52)):a.fillText("No graph selected",5,13));if(this.graph){a.save();a.scale(this.scale,this.scale);a.translate(this.offset[0],this.offset[1]);this.visible_nodes=b=this.computeVisibleNodes();for(var c in b){var d=b[c];a.save();a.translate(d.pos[0],d.pos[1]);this.drawNode(d,a);a.restore()}this.graph.config.links_ontop&&(this.live_mode||this.drawConnections(a));null!=this.connecting_pos&&(a.lineWidth=this.connections_width,this.renderLink(a,this.connecting_pos, -[this.canvas_mouse[0],this.canvas_mouse[1]],"node"==this.connecting_output.type?"#F85":"#AFA"),a.beginPath(),a.arc(this.connecting_pos[0],this.connecting_pos[1],4,0,2*Math.PI),a.fill(),a.fillStyle="#ffcc00",this._highlight_input&&(a.beginPath(),a.arc(this._highlight_input[0],this._highlight_input[1],6,0,2*Math.PI),a.fill()));a.restore()}this.dirty_area&&a.restore();this.dirty_canvas=!1}; -LGraphCanvas.prototype.drawBgcanvas=function(){var a=this.bgcanvas,b=this.bgctx;a.width=a.width;b.restore();b.setTransform(1,0,0,1,0,0);if(this.graph){b.save();b.scale(this.scale,this.scale);b.translate(this.offset[0],this.offset[1]);if(this.background_image&&0.5this.max_zoom?this.scale=this.max_zoom:this.scale"+e+""})}LiteGraph.createContextualMenu(d,{event:b,callback:function(b){a&&(b=LGraphCanvas.node_colors[b.value])&&(a.color=b.color,a.bgcolor=b.bgcolor,a.setDirtyCanvas(!0))},from:c});return!1}; LGraphCanvas.onMenuNodeShapes=function(a,b){LiteGraph.createContextualMenu(["box","round"],{event:b,callback:function(b){a&&(a.shape=b,a.setDirtyCanvas(!0))}});return!1};LGraphCanvas.onMenuNodeRemove=function(a){!1!=a.removable&&(a.graph.remove(a),a.setDirtyCanvas(!0,!0))};LGraphCanvas.onMenuNodeClone=function(a){if(!1!=a.clonable){var b=a.clone();b&&(b.pos=[a.pos[0]+5,a.pos[1]+5],a.graph.add(b),a.setDirtyCanvas(!0,!0))}}; LGraphCanvas.node_colors={red:{color:"#FAA",bgcolor:"#A44"},green:{color:"#AFA",bgcolor:"#4A4"},blue:{color:"#AAF",bgcolor:"#44A"},white:{color:"#FFF",bgcolor:"#AAA"}}; -LGraphCanvas.prototype.getCanvasMenuOptions=function(){var a=null;this.getMenuOptions?a=this.getMenuOptions():(a=[{content:"Add Node",is_menu:!0,callback:LGraphCanvas.onMenuAdd}],this._graph_stack&&(a=[{content:"Close subgraph",callback:this.closeSubgraph.bind(this)},null].concat(a)));if(this.getExtraMenuOptions){var b=this.getExtraMenuOptions(this);b.push(null);a=b.concat(a)}return a}; +LGraphCanvas.prototype.getCanvasMenuOptions=function(){var a=null;this.getMenuOptions?a=this.getMenuOptions():(a=[{content:"Add Node",is_menu:!0,callback:LGraphCanvas.onMenuAdd}],this._graph_stack&&0a&&db?!0:!1}function growBounding(a,b,c){ba[2]&&(a[2]=b);ca[3]&&(a[3]=c)} @@ -130,14 +133,18 @@ LiteGraph.createContextualMenu=function(a,b,c){function d(a){var c=!0;b.callback f.backgroundColor="#444";e.addEventListener("contextmenu",function(a){a.preventDefault();return!1});for(var g in a){var f=a[g],h=c.document.createElement("div");h.className="litemenu-entry";null==f?h.className="litemenu-entry separator":(f.is_menu&&(h.className+=" submenu"),f.disabled&&(h.className+=" disabled"),h.style.cursor="pointer",h.dataset.value="string"==typeof f?f:f.value,h.data=f,h.innerHTML="string"==typeof f?a.constructor==Array?a[g]:g:f.content?f.content:g,h.addEventListener("click", d));e.appendChild(h)}e.addEventListener("mouseover",function(a){this.mouse_inside=!0});e.addEventListener("mouseout",function(a){for(a=a.toElement;a!=this&&a!=c.document;)a=a.parentNode;a!=this&&(this.mouse_inside=!1,this.block_close||this.closeMenu())});c.document.body.appendChild(e);a=e.getClientRects()[0];b.from&&(b.from.block_close=!0);h=b.left||0;g=b.top||0;b.event&&(h=b.event.pageX-10,g=b.event.pageY-10,b.left&&(h=b.left),f=c.document.body.getClientRects()[0],b.from&&(h=b.from.getClientRects()[0], h=h.left+h.width),h>f.width-a.width-10&&(h=f.width-a.width-10),g>f.height-a.height-10&&(g=f.height-a.height-10));e.style.left=h+"px";e.style.top=g+"px";e.closeMenu=function(){b.from&&(b.from.block_close=!1,b.from.mouse_inside||b.from.closeMenu());this.parentNode&&c.document.body.removeChild(this)};return e};LiteGraph.closeAllContextualMenus=function(){var a=document.querySelectorAll(".litecontextualmenu");if(a.length){for(var b=[],c=0;cb&&(b=0);if(0!=a.length){var c=[0,0,0];if(0==b)c=a[0];else if(1==b)c=a[a.length-1];else{var d=(a.length-1)*b,b=a[Math.floor(d)],a=a[Math.floor(d)+1],d=d-Math.floor(d);c[0]=b[0]*(1-d)+a[0]*d;c[1]=b[1]*(1-d)+a[1]*d;c[2]=b[2]*(1-d)+a[2]*d}for(var e in c)c[e]/=255;this.boxcolor=colorToString(c);this.setOutputData(0, -c)}};LiteGraph.registerNodeType("color/palette",a);b.title="Frame";b.desc="Frame viewerew";b.widgets=[{name:"resize",text:"Resize box",type:"button"},{name:"view",text:"View Image",type:"button"}];b.prototype.onDrawBackground=function(a){this.frame&&a.drawImage(this.frame,0,0,this.size[0],this.size[1])};b.prototype.onExecute=function(){this.frame=this.getInputData(0);this.setDirtyCanvas(!0)};b.prototype.onWidget=function(a,b){if("resize"==b.name&&this.frame){var c=this.frame.width,d=this.frame.height; -c||null==this.frame.videoWidth||(c=this.frame.videoWidth,d=this.frame.videoHeight);c&&d&&(this.size=[c,d]);this.setDirtyCanvas(!0,!0)}else"view"==b.name&&this.show()};b.prototype.show=function(){showElement&&this.frame&&showElement(this.frame)};LiteGraph.registerNodeType("graphics/frame",b);c.title="Image fade";c.desc="Fades between images";c.widgets=[{name:"resizeA",text:"Resize to A",type:"button"},{name:"resizeB",text:"Resize to B",type:"button"}];c.prototype.onAdded=function(){this.createCanvas(); -var a=this.canvas.getContext("2d");a.fillStyle="#000";a.fillRect(0,0,this.properties.width,this.properties.height)};c.prototype.createCanvas=function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height};c.prototype.onExecute=function(){var a=this.canvas.getContext("2d");this.canvas.width=this.canvas.width;var b=this.getInputData(0);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);b=this.getInputData(2);null== -b?b=this.properties.fade:this.properties.fade=b;a.globalAlpha=b;b=this.getInputData(1);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);a.globalAlpha=1;this.setOutputData(0,this.canvas);this.setDirtyCanvas(!0)};LiteGraph.registerNodeType("graphics/imagefade",c);d.title="Image";d.desc="Image loader";d.widgets=[{name:"load",text:"Load",type:"button"}];d.prototype.onAdded=function(){""!=this.properties.url&&null==this.img&&this.loadImage(this.properties.url)};d.prototype.onExecute=function(){this.img|| -(this.boxcolor="#000");this.img&&this.img.width?this.setOutputData(0,this.img):this.setOutputData(0,null);this.img.dirty&&(this.img.dirty=!1)};d.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"url"==a&&""!=b&&this.loadImage(b);return!0};d.prototype.loadImage=function(a){if(""==a)this.img=null;else{this.trace("loading image...");this.img=document.createElement("img");this.img.src="miniproxy.php?url="+a;this.boxcolor="#F95";var b=this;this.img.onload=function(){b.trace("Image loaded, size: "+ -b.img.width+"x"+b.img.height);this.dirty=!0;b.boxcolor="#9F9";b.setDirtyCanvas(!0)}}};d.prototype.onWidget=function(a,b){"load"==b.name&&this.loadImage(this.properties.url)};LiteGraph.registerNodeType("graphics/image",d);e.title="Crop";e.desc="Crop Image";e.prototype.onAdded=function(){this.createCanvas()};e.prototype.createCanvas=function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height};e.prototype.onExecute=function(){var a= -this.getInputData(0);a&&(a.width?(this.canvas.getContext("2d").drawImage(a,-this.properties.x,-this.properties.y,a.width*this.properties.scale,a.height*this.properties.scale),this.setOutputData(0,this.canvas)):this.setOutputData(0,null))};e.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"scale"==a?(this.properties[a]=parseFloat(b),0==this.properties[a]&&(this.trace("Error in scale"),this.properties[a]=1)):this.properties[a]=parseInt(b);this.createCanvas();return!0};LiteGraph.registerNodeType("graphics/cropImage", -c);f.title="Video";f.desc="Video playback";f.widgets=[{name:"play",text:"PLAY",type:"minibutton"},{name:"stop",text:"STOP",type:"minibutton"},{name:"demo",text:"Demo video",type:"button"},{name:"mute",text:"Mute video",type:"button"}];f.prototype.onExecute=function(){if(this.properties.url&&(this.properties.url!=this._video_url&&this.loadVideo(this.properties.url),this._video&&0!=this._video.width)){var a=this.getInputData(0);a&&0<=a&&1>=a&&(this._video.currentTime=a*this._video.duration,this._video.pause()); -this._video.dirty=!0;this.setOutputData(0,this._video);this.setOutputData(1,this._video.currentTime);this.setOutputData(2,this._video.duration);this.setDirtyCanvas(!0)}};f.prototype.onStart=function(){this.play()};f.prototype.onStop=function(){this.stop()};f.prototype.loadVideo=function(a){this._video_url=a;this._video=document.createElement("video");this._video.src=a;this._video.type="type=video/mp4";this._video.muted=!0;this._video.autoplay=!0;var b=this;this._video.addEventListener("loadedmetadata", -function(a){b.trace("Duration: "+this.duration+" seconds");b.trace("Size: "+this.videoWidth+","+this.videoHeight);b.setDirtyCanvas(!0);this.width=this.videoWidth;this.height=this.videoHeight});this._video.addEventListener("progress",function(a){});this._video.addEventListener("error",function(a){console.log("Error loading video: "+this.src);b.trace("Error loading video: "+this.src);if(this.error)switch(this.error.code){case this.error.MEDIA_ERR_ABORTED:b.trace("You stopped the video.");break;case this.error.MEDIA_ERR_NETWORK:b.trace("Network error - please try again later."); -break;case this.error.MEDIA_ERR_DECODE:b.trace("Video is broken..");break;case this.error.MEDIA_ERR_SRC_NOT_SUPPORTED:b.trace("Sorry, your browser can't play this video.")}});this._video.addEventListener("ended",function(a){b.trace("Ended.");this.play()})};f.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"url"==a&&""!=b&&this.loadVideo(b);return!0};f.prototype.play=function(){this._video&&this._video.play()};f.prototype.playPause=function(){this._video&&(this._video.paused?this.play(): -this.pause())};f.prototype.stop=function(){this._video&&(this._video.pause(),this._video.currentTime=0)};f.prototype.pause=function(){this._video&&(this.trace("Video paused"),this._video.pause())};f.prototype.onWidget=function(a,b){};LiteGraph.registerNodeType("graphics/video",f);g.title="Webcam";g.desc="Webcam image";g.prototype.openStream=function(){function a(c){trace("Webcam rejected",c);b._webcam_stream=!1;b.box_color="red"}navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia|| -navigator.mozGetUserMedia||navigator.msGetUserMedia;window.URL=window.URL||window.webkitURL;if(navigator.getUserMedia){this._waiting_confirmation=!0;navigator.getUserMedia({video:!0},this.streamReady.bind(this),a);var b=this}};g.prototype.streamReady=function(a){this._webcam_stream=a;var b=this._video;b||(b=document.createElement("video"),b.autoplay=!0,b.src=window.URL.createObjectURL(a),this._video=b,b.onloadedmetadata=function(a){console.log(a)})};g.prototype.onExecute=function(){null!=this._webcam_stream|| -this._waiting_confirmation||this.openStream();this._video&&this._video.videoWidth&&(this._video.width=this._video.videoWidth,this._video.hieght=this._video.videoHeight,this.setOutputData(0,this._video))};LiteGraph.registerNodeType("graphics/webcam",g)})(); +(function(){function a(){this.inputs=[];this.addOutput("frame","image");this.properties={url:""}}function b(){this.addInput("f","number");this.addOutput("Color","color");this.properties={colorA:"#444444",colorB:"#44AAFF",colorC:"#44FFAA",colorD:"#FFFFFF"}}function c(){this.addInput("","image");this.size=[200,200]}function d(){this.addInputs([["img1","image"],["img2","image"],["fade","number"]]);this.addInput("","image");this.properties={fade:0.5,width:512,height:512}}function e(){this.addInput("", +"image");this.addOutputs("","image");this.properties={width:256,height:256,x:0,y:0,scale:1};this.size=[50,20]}function f(){this.addInput("t","number");this.addOutputs([["frame","image"],["t","number"],["d","number"]]);this.properties={url:""}}function g(){this.addOutput("Webcam","image");this.properties={}}a.title="Image";a.desc="Image loader";a.widgets=[{name:"load",text:"Load",type:"button"}];a.prototype.onAdded=function(){""!=this.properties.url&&null==this.img&&this.loadImage(this.properties.url)}; +a.prototype.onDrawBackground=function(a){this.img&&5b&&(b=0);if(0!=a.length){var c=[0, +0,0];if(0==b)c=a[0];else if(1==b)c=a[a.length-1];else{var d=(a.length-1)*b,b=a[Math.floor(d)],a=a[Math.floor(d)+1],d=d-Math.floor(d);c[0]=b[0]*(1-d)+a[0]*d;c[1]=b[1]*(1-d)+a[1]*d;c[2]=b[2]*(1-d)+a[2]*d}for(var e in c)c[e]/=255;this.boxcolor=colorToString(c);this.setOutputData(0,c)}};LiteGraph.registerNodeType("color/palette",b);c.title="Frame";c.desc="Frame viewerew";c.widgets=[{name:"resize",text:"Resize box",type:"button"},{name:"view",text:"View Image",type:"button"}];c.prototype.onDrawBackground= +function(a){this.frame&&a.drawImage(this.frame,0,0,this.size[0],this.size[1])};c.prototype.onExecute=function(){this.frame=this.getInputData(0);this.setDirtyCanvas(!0)};c.prototype.onWidget=function(a,b){if("resize"==b.name&&this.frame){var c=this.frame.width,d=this.frame.height;c||null==this.frame.videoWidth||(c=this.frame.videoWidth,d=this.frame.videoHeight);c&&d&&(this.size=[c,d]);this.setDirtyCanvas(!0,!0)}else"view"==b.name&&this.show()};c.prototype.show=function(){showElement&&this.frame&&showElement(this.frame)}; +LiteGraph.registerNodeType("graphics/frame",c);d.title="Image fade";d.desc="Fades between images";d.widgets=[{name:"resizeA",text:"Resize to A",type:"button"},{name:"resizeB",text:"Resize to B",type:"button"}];d.prototype.onAdded=function(){this.createCanvas();var a=this.canvas.getContext("2d");a.fillStyle="#000";a.fillRect(0,0,this.properties.width,this.properties.height)};d.prototype.createCanvas=function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height= +this.properties.height};d.prototype.onExecute=function(){var a=this.canvas.getContext("2d");this.canvas.width=this.canvas.width;var b=this.getInputData(0);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);b=this.getInputData(2);null==b?b=this.properties.fade:this.properties.fade=b;a.globalAlpha=b;b=this.getInputData(1);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);a.globalAlpha=1;this.setOutputData(0,this.canvas);this.setDirtyCanvas(!0)};LiteGraph.registerNodeType("graphics/imagefade", +d);e.title="Crop";e.desc="Crop Image";e.prototype.onAdded=function(){this.createCanvas()};e.prototype.createCanvas=function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height};e.prototype.onExecute=function(){var a=this.getInputData(0);a&&(a.width?(this.canvas.getContext("2d").drawImage(a,-this.properties.x,-this.properties.y,a.width*this.properties.scale,a.height*this.properties.scale),this.setOutputData(0,this.canvas)): +this.setOutputData(0,null))};e.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"scale"==a?(this.properties[a]=parseFloat(b),0==this.properties[a]&&(this.trace("Error in scale"),this.properties[a]=1)):this.properties[a]=parseInt(b);this.createCanvas();return!0};LiteGraph.registerNodeType("graphics/cropImage",d);f.title="Video";f.desc="Video playback";f.widgets=[{name:"play",text:"PLAY",type:"minibutton"},{name:"stop",text:"STOP",type:"minibutton"},{name:"demo",text:"Demo video",type:"button"}, +{name:"mute",text:"Mute video",type:"button"}];f.prototype.onExecute=function(){if(this.properties.url&&(this.properties.url!=this._video_url&&this.loadVideo(this.properties.url),this._video&&0!=this._video.width)){var a=this.getInputData(0);a&&0<=a&&1>=a&&(this._video.currentTime=a*this._video.duration,this._video.pause());this._video.dirty=!0;this.setOutputData(0,this._video);this.setOutputData(1,this._video.currentTime);this.setOutputData(2,this._video.duration);this.setDirtyCanvas(!0)}};f.prototype.onStart= +function(){this.play()};f.prototype.onStop=function(){this.stop()};f.prototype.loadVideo=function(a){this._video_url=a;this._video=document.createElement("video");this._video.src=a;this._video.type="type=video/mp4";this._video.muted=!0;this._video.autoplay=!0;var b=this;this._video.addEventListener("loadedmetadata",function(a){b.trace("Duration: "+this.duration+" seconds");b.trace("Size: "+this.videoWidth+","+this.videoHeight);b.setDirtyCanvas(!0);this.width=this.videoWidth;this.height=this.videoHeight}); +this._video.addEventListener("progress",function(a){});this._video.addEventListener("error",function(a){console.log("Error loading video: "+this.src);b.trace("Error loading video: "+this.src);if(this.error)switch(this.error.code){case this.error.MEDIA_ERR_ABORTED:b.trace("You stopped the video.");break;case this.error.MEDIA_ERR_NETWORK:b.trace("Network error - please try again later.");break;case this.error.MEDIA_ERR_DECODE:b.trace("Video is broken..");break;case this.error.MEDIA_ERR_SRC_NOT_SUPPORTED:b.trace("Sorry, your browser can't play this video.")}}); +this._video.addEventListener("ended",function(a){b.trace("Ended.");this.play()})};f.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"url"==a&&""!=b&&this.loadVideo(b);return!0};f.prototype.play=function(){this._video&&this._video.play()};f.prototype.playPause=function(){this._video&&(this._video.paused?this.play():this.pause())};f.prototype.stop=function(){this._video&&(this._video.pause(),this._video.currentTime=0)};f.prototype.pause=function(){this._video&&(this.trace("Video paused"), +this._video.pause())};f.prototype.onWidget=function(a,b){};LiteGraph.registerNodeType("graphics/video",f);g.title="Webcam";g.desc="Webcam image";g.prototype.openStream=function(){function a(c){trace("Webcam rejected",c);b._webcam_stream=!1;b.box_color="red"}navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;window.URL=window.URL||window.webkitURL;if(navigator.getUserMedia){this._waiting_confirmation=!0;navigator.getUserMedia({video:!0}, +this.streamReady.bind(this),a);var b=this}};g.prototype.streamReady=function(a){this._webcam_stream=a;var b=this._video;b||(b=document.createElement("video"),b.autoplay=!0,b.src=window.URL.createObjectURL(a),this._video=b,b.onloadedmetadata=function(a){console.log(a)})};g.prototype.onExecute=function(){null!=this._webcam_stream||this._waiting_confirmation||this.openStream();this._video&&this._video.videoWidth&&(this._video.width=this._video.videoWidth,this._video.hieght=this._video.videoHeight,this.setOutputData(0, +this._video))};LiteGraph.registerNodeType("graphics/webcam",g)})(); +if("undefined"!=typeof LiteGraph){var LGraphTexture=function(){this.addOutput("Texture","Texture");this.properties={name:""};this.size=[LGraphTexture.image_preview_size,LGraphTexture.image_preview_size]};LGraphTexture.title="Texture";LGraphTexture.desc="Texture";LGraphTexture.widgets_info={name:{widget:"texture"}};LGraphTexture.textures_container={};LGraphTexture.loadTextureCallback=null;LGraphTexture.image_preview_size=256;LGraphTexture.PASS_THROUGH=1;LGraphTexture.COPY=2;LGraphTexture.LOW=3;LGraphTexture.HIGH= +4;LGraphTexture.REUSE=5;LGraphTexture.DEFAULT=2;LGraphTexture.MODE_VALUES={"pass through":LGraphTexture.PASS_THROUGH,copy:LGraphTexture.COPY,low:LGraphTexture.LOW,high:LGraphTexture.HIGH,reuse:LGraphTexture.REUSE,"default":LGraphTexture.DEFAULT};LGraphTexture.getTexture=function(a){var b=LGraphTexture.textures_container||gl.textures;if(!b)throw"Cannot load texture, container of textures not found";var c=b[a];if(!c&&a&&":"!=a[0]){if(LGraphTexture.loadTextureCallback)return(b=LGraphTexture.loadTextureCallback)&& +b(a),null;c=a;"http://"==c.substr(0,7)&&LiteGraph.proxy&&(c=LiteGraph.proxy+c.substr(7));c=b[a]=GL.Texture.fromURL(c,{})}return c};LGraphTexture.getTargetTexture=function(a,b,c){if(!a)throw"LGraphTexture.getTargetTexture expects a reference texture";var d=null;switch(c){case LGraphTexture.LOW:d=gl.UNSIGNED_BYTE;break;case LGraphTexture.HIGH:d=gl.HIGH_PRECISION_FORMAT;break;case LGraphTexture.REUSE:return a;default:d=a?a.type:gl.UNSIGNED_BYTE}b&&b.width==a.width&&b.height==a.height&&b.type==d||(b= +new GL.Texture(a.width,a.height,{type:d,format:gl.RGBA,filter:gl.LINEAR}));return b};LGraphTexture.getNoiseTexture=function(){if(this._noise_texture)return this._noise_texture;for(var a=new Uint8Array(1048576),b=0;1048576>b;++b)a[b]=255*Math.random();return this._noise_texture=a=GL.Texture.fromMemory(512,512,a,{format:gl.RGBA,wrap:gl.REPEAT,filter:gl.NEAREST})};LGraphTexture.prototype.onDropFile=function(a,b,c){if(a){var d=null;"string"==typeof a?d=GL.Texture.fromURL(a):-1!=b.toLowerCase().indexOf(".dds")? +d=GL.Texture.fromDDSInMemory(a):(a=new Blob([c]),a=URL.createObjectURL(a),d=GL.Texture.fromURL(a));this._drop_texture=d;this.properties.name=b}else this._drop_texture=null,this.properties.name=""};LGraphTexture.prototype.getExtraMenuOptions=function(a){var b=this;if(this._drop_texture)return[{content:"Clear",callback:function(){b._drop_texture=null;b.properties.name=""}}]};LGraphTexture.prototype.onExecute=function(){if(this._drop_texture)this.setOutputData(0,this._drop_texture);else if(this.properties.name){var a= +LGraphTexture.getTexture(this.properties.name);a&&(this._last_tex=a,this.setOutputData(0,a))}};LGraphTexture.prototype.onDrawBackground=function(a){if(!(this.flags.collapsed||20>=this.size[1]))if(this._drop_texture&&a.webgl)a.drawImage(this._drop_texture,0,0,this.size[0],this.size[1]);else{if(this._last_preview_tex!=this._last_tex)if(a.webgl)this._canvas=this._last_tex;else{var b=LGraphTexture.generateLowResTexturePreview(this._last_tex);if(!b)return;this._last_preview_tex=this._last_tex;this._canvas= +cloneCanvas(b)}this._canvas&&(a.save(),a.webgl||(a.translate(0,this.size[1]),a.scale(1,-1)),a.drawImage(this._canvas,0,0,this.size[0],this.size[1]),a.restore())}};LGraphTexture.generateLowResTexturePreview=function(a){if(!a)return null;var b=LGraphTexture.image_preview_size,c=a;if(a.width>b||a.height>b)c=this._preview_temp_tex,this._preview_temp_tex||(this._preview_temp_tex=c=new GL.Texture(b,b,{minFilter:gl.NEAREST})),a.copyTo(c);a=this._preview_canvas;a||(this._preview_canvas=a=createCanvas(b,b)); +c&&c.toCanvas(a);return a};LiteGraph.registerNodeType("texture/texture",LGraphTexture);window.LGraphTexture=LGraphTexture;var LGraphTexturePreview=function(){this.addInput("Texture","Texture");this.properties={flipY:!1};this.size=[LGraphTexture.image_preview_size,LGraphTexture.image_preview_size]};LGraphTexturePreview.title="Preview";LGraphTexturePreview.desc="Show a texture in the graph canvas";LGraphTexturePreview.prototype.onDrawBackground=function(a){if(!this.flags.collapsed){var b=this.getInputData(0); +if(b){var c=null,c=!b.handle&&a.webgl?b:LGraphTexture.generateLowResTexturePreview(b);a.save();this.properties.flipY&&(a.translate(0,this.size[1]),a.scale(1,-1));a.drawImage(c,0,0,this.size[0],this.size[1]);a.restore()}}};LiteGraph.registerNodeType("texture/preview",LGraphTexturePreview);window.LGraphTexturePreview=LGraphTexturePreview;var LGraphTextureSave=function(){this.addInput("Texture","Texture");this.addOutput("","Texture");this.properties={name:""}};LGraphTextureSave.title="Save";LGraphTextureSave.desc= +"Save a texture in the repository";LGraphTextureSave.prototype.onExecute=function(){var a=this.getInputData(0);a&&(this.properties.name&&(LGraphTexture.textures_container[this.properties.name]=a),this.setOutputData(0,a))};LiteGraph.registerNodeType("texture/save",LGraphTextureSave);window.LGraphTextureSave=LGraphTextureSave;var LGraphTextureOperation=function(){this.addInput("Texture","Texture");this.addInput("TextureB","Texture");this.addInput("value","number");this.addOutput("Texture","Texture"); +this.help="

pixelcode must be vec3

\t\t\t

uvcode must be vec2, is optional

\t\t\t

uv: tex. coords

color: texture

colorB: textureB

time: scene time

value: input value

";this.properties={value:1,uvcode:"",pixelcode:"color + colorB * value",precision:LGraphTexture.DEFAULT}};LGraphTextureOperation.widgets_info={uvcode:{widget:"textarea",height:100},pixelcode:{widget:"textarea",height:100}, +precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureOperation.title="Operation";LGraphTextureOperation.desc="Texture shader operation";LGraphTextureOperation.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else{var b=this.getInputData(1);if(this.properties.uvcode||this.properties.pixelcode){var c=512,d=512;a?(c=a.width,d=a.height):b&&(c=b.width,d=b.height);this._tex=a||this._tex?LGraphTexture.getTargetTexture(a|| +this._tex,this._tex,this.properties.precision):new GL.Texture(c,d,{type:this.precision===LGraphTexture.LOW?gl.UNSIGNED_BYTE:gl.HIGH_PRECISION_FORMAT,format:gl.RGBA,filter:gl.LINEAR});var e="";this.properties.uvcode&&(e="uv = "+this.properties.uvcode,-1!=this.properties.uvcode.indexOf(";")&&(e=this.properties.uvcode));var f="";this.properties.pixelcode&&(f="result = "+this.properties.pixelcode,-1!=this.properties.pixelcode.indexOf(";")&&(f=this.properties.pixelcode));var g=this._shader;if(!g||this._shader_code!= +e+"|"+f){try{this._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureOperation.pixel_shader,{UV_CODE:e,PIXEL_CODE:f}),this.boxcolor="#00FF00"}catch(h){console.log("Error compiling shader: ",h);this.boxcolor="#FF0000";return}this._shader_code=e+"|"+f;g=this._shader}if(g){this.boxcolor="green";var l=this.getInputData(2);null!=l?this.properties.value=l:l=parseFloat(this.properties.value);var n=this.graph.getTime();this._tex.drawTo(function(){gl.disable(gl.DEPTH_TEST);gl.disable(gl.CULL_FACE); +gl.disable(gl.BLEND);a&&a.bind(0);b&&b.bind(1);var e=Mesh.getScreenQuad();g.uniforms({u_texture:0,u_textureB:1,value:l,texSize:[c,d],time:n}).draw(e)});this.setOutputData(0,this._tex)}else this.boxcolor="red"}}};LGraphTextureOperation.pixel_shader="precision highp float;\n\t\t\t\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform sampler2D u_textureB;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform vec2 texSize;\n\t\t\tuniform float time;\n\t\t\tuniform float value;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec2 uv = v_coord;\n\t\t\t\tUV_CODE;\n\t\t\t\tvec3 color = texture2D(u_texture, uv).rgb;\n\t\t\t\tvec3 colorB = texture2D(u_textureB, uv).rgb;\n\t\t\t\tvec3 result = color;\n\t\t\t\tfloat alpha = 1.0;\n\t\t\t\tPIXEL_CODE;\n\t\t\t\tgl_FragColor = vec4(result, alpha);\n\t\t\t}\n\t\t\t"; +LiteGraph.registerNodeType("texture/operation",LGraphTextureOperation);window.LGraphTextureOperation=LGraphTextureOperation;var LGraphTextureShader=function(){this.addOutput("Texture","Texture");this.properties={code:"",width:512,height:512};this.properties.code="\nvoid main() {\n vec2 uv = coord;\n vec3 color = vec3(0.0);\n//your code here\n\ngl_FragColor = vec4(color, 1.0);\n}\n"};LGraphTextureShader.title="Shader";LGraphTextureShader.desc="Texture shader";LGraphTextureShader.widgets_info={code:{widget:"code"}, +precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureShader.prototype.onExecute=function(){if(this._shader_code!=this.properties.code)if(this._shader_code=this.properties.code,this._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureShader.pixel_shader+this.properties.code))this.boxcolor="green";else{this.boxcolor="red";return}this._tex&&this._tex.width==this.properties.width&&this._tex.height==this.properties.height||(this._tex=new GL.Texture(this.properties.width, +this.properties.height,{format:gl.RGBA,filter:gl.LINEAR}));var a=this._tex,b=this._shader,c=this.graph.getTime();a.drawTo(function(){b.uniforms({texSize:[a.width,a.height],time:c}).draw(Mesh.getScreenQuad())});this.setOutputData(0,this._tex)};LGraphTextureShader.pixel_shader="precision highp float;\n\t\t\t\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform float time;\n\t\t\t";LiteGraph.registerNodeType("texture/shader",LGraphTextureShader);window.LGraphTextureShader=LGraphTextureShader;var LGraphTextureToViewport= +function(){this.addInput("Texture","Texture");this.properties={additive:!1,antialiasing:!1,disable_alpha:!1};this.size[0]=130;LGraphTextureToViewport._shader||(LGraphTextureToViewport._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureToViewport.pixel_shader))};LGraphTextureToViewport.title="to Viewport";LGraphTextureToViewport.desc="Texture to viewport";LGraphTextureToViewport.prototype.onExecute=function(){var a=this.getInputData(0);if(a)if(this.properties.disable_alpha?gl.disable(gl.BLEND): +(gl.enable(gl.BLEND),this.properties.additive?gl.blendFunc(gl.SRC_ALPHA,gl.ONE):gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA)),gl.disable(gl.DEPTH_TEST),this.properties.antialiasing){gl.getViewport();var b=Mesh.getScreenQuad();a.bind(0);LGraphTextureToViewport._shader.uniforms({u_texture:0,uViewportSize:[a.width,a.height],inverseVP:[1/a.width,1/a.height]}).draw(b)}else a.toViewport()};LGraphTextureToViewport.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 uViewportSize;\n\t\t\tuniform vec2 inverseVP;\n\t\t\t#define FXAA_REDUCE_MIN (1.0/ 128.0)\n\t\t\t#define FXAA_REDUCE_MUL (1.0 / 8.0)\n\t\t\t#define FXAA_SPAN_MAX 8.0\n\t\t\t\n\t\t\t/* from mitsuhiko/webgl-meincraft based on the code on geeks3d.com */\n\t\t\tvec4 applyFXAA(sampler2D tex, vec2 fragCoord)\n\t\t\t{\n\t\t\t\tvec4 color = vec4(0.0);\n\t\t\t\t/*vec2 inverseVP = vec2(1.0 / uViewportSize.x, 1.0 / uViewportSize.y);*/\n\t\t\t\tvec3 rgbNW = texture2D(tex, (fragCoord + vec2(-1.0, -1.0)) * inverseVP).xyz;\n\t\t\t\tvec3 rgbNE = texture2D(tex, (fragCoord + vec2(1.0, -1.0)) * inverseVP).xyz;\n\t\t\t\tvec3 rgbSW = texture2D(tex, (fragCoord + vec2(-1.0, 1.0)) * inverseVP).xyz;\n\t\t\t\tvec3 rgbSE = texture2D(tex, (fragCoord + vec2(1.0, 1.0)) * inverseVP).xyz;\n\t\t\t\tvec3 rgbM = texture2D(tex, fragCoord * inverseVP).xyz;\n\t\t\t\tvec3 luma = vec3(0.299, 0.587, 0.114);\n\t\t\t\tfloat lumaNW = dot(rgbNW, luma);\n\t\t\t\tfloat lumaNE = dot(rgbNE, luma);\n\t\t\t\tfloat lumaSW = dot(rgbSW, luma);\n\t\t\t\tfloat lumaSE = dot(rgbSE, luma);\n\t\t\t\tfloat lumaM = dot(rgbM, luma);\n\t\t\t\tfloat lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));\n\t\t\t\tfloat lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));\n\t\t\t\t\n\t\t\t\tvec2 dir;\n\t\t\t\tdir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));\n\t\t\t\tdir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE));\n\t\t\t\t\n\t\t\t\tfloat dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);\n\t\t\t\t\n\t\t\t\tfloat rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);\n\t\t\t\tdir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX), max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX), dir * rcpDirMin)) * inverseVP;\n\t\t\t\t\n\t\t\t\tvec3 rgbA = 0.5 * (texture2D(tex, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz + \n\t\t\t\t\ttexture2D(tex, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);\n\t\t\t\tvec3 rgbB = rgbA * 0.5 + 0.25 * (texture2D(tex, fragCoord * inverseVP + dir * -0.5).xyz + \n\t\t\t\t\ttexture2D(tex, fragCoord * inverseVP + dir * 0.5).xyz);\n\t\t\t\t\n\t\t\t\treturn vec4(rgbA,1.0);\n\t\t\t\tfloat lumaB = dot(rgbB, luma);\n\t\t\t\tif ((lumaB < lumaMin) || (lumaB > lumaMax))\n\t\t\t\t\tcolor = vec4(rgbA, 1.0);\n\t\t\t\telse\n\t\t\t\t\tcolor = vec4(rgbB, 1.0);\n\t\t\t\treturn color;\n\t\t\t}\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t gl_FragColor = applyFXAA( u_texture, v_coord * uViewportSize) ;\n\t\t\t}\n\t\t\t"; +LiteGraph.registerNodeType("texture/toviewport",LGraphTextureToViewport);window.LGraphTextureToViewport=LGraphTextureToViewport;var LGraphTextureCopy=function(){this.addInput("Texture","Texture");this.addOutput("","Texture");this.properties={size:0,generate_mipmaps:!1,precision:LGraphTexture.DEFAULT}};LGraphTextureCopy.title="Copy";LGraphTextureCopy.desc="Copy Texture";LGraphTextureCopy.widgets_info={size:{widget:"combo",values:[0,32,64,128,256,512,1024,2048]},precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}}; +LGraphTextureCopy.prototype.onExecute=function(){var a=this.getInputData(0);if(a){var b=a.width,c=a.height;0!=this.properties.size&&(c=b=this.properties.size);var d=this._temp_texture,e=a.type;this.properties.precision===LGraphTexture.LOW?e=gl.UNSIGNED_BYTE:this.properties.precision===LGraphTexture.HIGH&&(e=gl.HIGH_PRECISION_FORMAT);d&&d.width==b&&d.height==c&&d.type==e||(d=gl.LINEAR,this.properties.generate_mipmaps&&isPowerOfTwo(b)&&isPowerOfTwo(c)&&(d=gl.LINEAR_MIPMAP_LINEAR),this._temp_texture= +new GL.Texture(b,c,{type:e,format:gl.RGBA,minFilter:d,magFilter:gl.LINEAR}));a.copyTo(this._temp_texture);this.properties.generate_mipmaps&&(this._temp_texture.bind(0),gl.generateMipmap(this._temp_texture.texture_type),this._temp_texture.unbind(0));this.setOutputData(0,this._temp_texture)}};LiteGraph.registerNodeType("texture/copy",LGraphTextureCopy);window.LGraphTextureCopy=LGraphTextureCopy;var LGraphTextureAverage=function(){this.addInput("Texture","Texture");this.addOutput("","Texture");this.properties= +{low_precision:!1}};LGraphTextureAverage.title="Average";LGraphTextureAverage.desc="Compute average of a texture and stores it as a texture";LGraphTextureAverage.prototype.onExecute=function(){var a=this.getInputData(0);if(a){if(!LGraphTextureAverage._shader){LGraphTextureAverage._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureAverage.pixel_shader);for(var b=new Float32Array(32),c=0;32>c;++c)b[c]=Math.random();LGraphTextureAverage._shader.uniforms({u_samples_a:b.subarray(0,16),u_samples_b:b.subarray(16, +32)})}b=this._temp_texture;c=this.properties.low_precision?gl.UNSIGNED_BYTE:a.type;b&&b.type==c||(this._temp_texture=new GL.Texture(1,1,{type:c,format:gl.RGBA,filter:gl.NEAREST}));var d=LGraphTextureAverage._shader;this._temp_texture.drawTo(function(){a.toViewport(d,{u_texture:0})});this.setOutputData(0,this._temp_texture)}};LGraphTextureAverage.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tuniform mat4 u_samples_a;\n\t\t\tuniform mat4 u_samples_b;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tvarying vec2 v_coord;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec4 color = vec4(0.0);\n\t\t\t\tfor(int i = 0; i < 4; ++i)\n\t\t\t\t\tfor(int j = 0; j < 4; ++j)\n\t\t\t\t\t{\n\t\t\t\t\t\tcolor += texture2D(u_texture, vec2( u_samples_a[i][j], u_samples_b[i][j] ) );\n\t\t\t\t\t\tcolor += texture2D(u_texture, vec2( 1.0 - u_samples_a[i][j], u_samples_b[i][j] ) );\n\t\t\t\t\t}\n\t\t\t gl_FragColor = color * 0.03125;\n\t\t\t}\n\t\t\t"; +LiteGraph.registerNodeType("texture/average",LGraphTextureAverage);window.LGraphTextureAverage=LGraphTextureAverage;var LGraphImageToTexture=function(){this.addInput("Image","image");this.addOutput("","Texture");this.properties={}};LGraphImageToTexture.title="Image to Texture";LGraphImageToTexture.desc="Uploads an image to the GPU";LGraphImageToTexture.prototype.onExecute=function(){var a=this.getInputData(0);if(a){var b=a.videoWidth||a.width,c=a.videoHeight||a.height;if(a.gltexture)this.setOutputData(0, +a.gltexture);else{var d=this._temp_texture;d&&d.width==b&&d.height==c||(this._temp_texture=new GL.Texture(b,c,{format:gl.RGBA,filter:gl.LINEAR}));try{this._temp_texture.uploadImage(a)}catch(e){console.error("image comes from an unsafe location, cannot be uploaded to webgl");return}this.setOutputData(0,this._temp_texture)}}};LiteGraph.registerNodeType("texture/imageToTexture",LGraphImageToTexture);window.LGraphImageToTexture=LGraphImageToTexture;var LGraphTextureLUT=function(){this.addInput("Texture", +"Texture");this.addInput("LUT","Texture");this.addInput("Intensity","number");this.addOutput("","Texture");this.properties={intensity:1,precision:LGraphTexture.DEFAULT};LGraphTextureLUT._shader||(LGraphTextureLUT._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureLUT.pixel_shader))};LGraphTextureLUT.widgets_info={precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureLUT.title="LUT";LGraphTextureLUT.desc="Apply LUT to Texture";LGraphTextureLUT.prototype.onExecute=function(){var a= +this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else if(a){var b=this.getInputData(1);if(b){b.bind(0);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);gl.bindTexture(gl.TEXTURE_2D,null);var c=this.properties.intensity;this.isInputConnected(2)&&(this.properties.intensity=c=this.getInputData(2));this._tex= +LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);var d=Mesh.getScreenQuad();this._tex.drawTo(function(){a.bind(0);b.bind(1);LGraphTextureLUT._shader.uniforms({u_texture:0,u_textureB:1,u_amount:c,uViewportSize:[a.width,a.height]}).draw(d)});this.setOutputData(0,this._tex)}else this.setOutputData(0,a)}};LGraphTextureLUT.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform sampler2D u_textureB;\n\t\t\tuniform float u_amount;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\t lowp vec4 textureColor = clamp( texture2D(u_texture, v_coord), vec4(0.0), vec4(1.0) );\n\t\t\t\t mediump float blueColor = textureColor.b * 63.0;\n\t\t\t\t mediump vec2 quad1;\n\t\t\t\t quad1.y = floor(floor(blueColor) / 8.0);\n\t\t\t\t quad1.x = floor(blueColor) - (quad1.y * 8.0);\n\t\t\t\t mediump vec2 quad2;\n\t\t\t\t quad2.y = floor(ceil(blueColor) / 8.0);\n\t\t\t\t quad2.x = ceil(blueColor) - (quad2.y * 8.0);\n\t\t\t\t highp vec2 texPos1;\n\t\t\t\t texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n\t\t\t\t texPos1.y = 1.0 - ((quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\t\t\t\t highp vec2 texPos2;\n\t\t\t\t texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n\t\t\t\t texPos2.y = 1.0 - ((quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\t\t\t\t lowp vec4 newColor1 = texture2D(u_textureB, texPos1);\n\t\t\t\t lowp vec4 newColor2 = texture2D(u_textureB, texPos2);\n\t\t\t\t lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));\n\t\t\t\t gl_FragColor = vec4( mix( textureColor.rgb, newColor.rgb, u_amount), textureColor.w);\n\t\t\t}\n\t\t\t"; +LiteGraph.registerNodeType("texture/LUT",LGraphTextureLUT);window.LGraphTextureLUT=LGraphTextureLUT;var LGraphTextureChannels=function(){this.addInput("Texture","Texture");this.addOutput("R","Texture");this.addOutput("G","Texture");this.addOutput("B","Texture");this.addOutput("A","Texture");this.properties={};LGraphTextureChannels._shader||(LGraphTextureChannels._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureChannels.pixel_shader))};LGraphTextureChannels.title="Channels";LGraphTextureChannels.desc= +"Split texture channels";LGraphTextureChannels.prototype.onExecute=function(){var a=this.getInputData(0);if(a){this._channels||(this._channels=Array(4));for(var b=0,c=0;4>c;c++)this.isOutputConnected(c)?(this._channels[c]&&this._channels[c].width==a.width&&this._channels[c].height==a.height&&this._channels[c].type==a.type||(this._channels[c]=new GL.Texture(a.width,a.height,{type:a.type,format:gl.RGBA,filter:gl.LINEAR})),b++):this._channels[c]=null;if(b){gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST); +for(var d=Mesh.getScreenQuad(),e=LGraphTextureChannels._shader,f=[[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]],c=0;4>c;c++)this._channels[c]&&(this._channels[c].drawTo(function(){a.bind(0);e.uniforms({u_texture:0,u_mask:f[c]}).draw(d)}),this.setOutputData(c,this._channels[c]))}}};LGraphTextureChannels.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec4 u_mask;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t gl_FragColor = vec4( vec3( length( texture2D(u_texture, v_coord) * u_mask )), 1.0 );\n\t\t\t}\n\t\t\t"; +LiteGraph.registerNodeType("texture/channels",LGraphTextureChannels);window.LGraphTextureChannels=LGraphTextureChannels;var LGraphTextureMix=function(){this.addInput("A","Texture");this.addInput("B","Texture");this.addInput("Mixer","Texture");this.addOutput("Texture","Texture");this.properties={precision:LGraphTexture.DEFAULT};LGraphTextureMix._shader||(LGraphTextureMix._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureMix.pixel_shader))};LGraphTextureMix.title="Mix";LGraphTextureMix.desc= +"Generates a texture mixing two textures";LGraphTextureMix.widgets_info={precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureMix.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else{var b=this.getInputData(1),c=this.getInputData(2);if(a&&b&&c){this._tex=LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var d=Mesh.getScreenQuad(), +e=LGraphTextureMix._shader;this._tex.drawTo(function(){a.bind(0);b.bind(1);c.bind(2);e.uniforms({u_textureA:0,u_textureB:1,u_textureMix:2}).draw(d)});this.setOutputData(0,this._tex)}}};LGraphTextureMix.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_textureA;\n\t\t\tuniform sampler2D u_textureB;\n\t\t\tuniform sampler2D u_textureMix;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t gl_FragColor = mix( texture2D(u_textureA, v_coord), texture2D(u_textureB, v_coord), texture2D(u_textureMix, v_coord) );\n\t\t\t}\n\t\t\t"; +LiteGraph.registerNodeType("texture/mix",LGraphTextureMix);window.LGraphTextureMix=LGraphTextureMix;var LGraphTextureEdges=function(){this.addInput("Tex.","Texture");this.addOutput("Edges","Texture");this.properties={invert:!0,precision:LGraphTexture.DEFAULT};LGraphTextureEdges._shader||(LGraphTextureEdges._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureEdges.pixel_shader))};LGraphTextureEdges.title="Edges";LGraphTextureEdges.desc="Detects edges";LGraphTextureEdges.widgets_info={precision:{widget:"combo", +values:LGraphTexture.MODE_VALUES}};LGraphTextureEdges.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else if(a){this._tex=LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var b=Mesh.getScreenQuad(),c=LGraphTextureEdges._shader,d=this.properties.invert;this._tex.drawTo(function(){a.bind(0);c.uniforms({u_texture:0,u_isize:[1/a.width,1/a.height], +u_invert:d?1:0}).draw(b)});this.setOutputData(0,this._tex)}};LGraphTextureEdges.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_isize;\n\t\t\tuniform int u_invert;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec4 center = texture2D(u_texture, v_coord);\n\t\t\t\tvec4 up = texture2D(u_texture, v_coord + u_isize * vec2(0.0,1.0) );\n\t\t\t\tvec4 down = texture2D(u_texture, v_coord + u_isize * vec2(0.0,-1.0) );\n\t\t\t\tvec4 left = texture2D(u_texture, v_coord + u_isize * vec2(1.0,0.0) );\n\t\t\t\tvec4 right = texture2D(u_texture, v_coord + u_isize * vec2(-1.0,0.0) );\n\t\t\t\tvec4 diff = abs(center - up) + abs(center - down) + abs(center - left) + abs(center - right);\n\t\t\t\tif(u_invert == 1)\n\t\t\t\t\tdiff.xyz = vec3(1.0) - diff.xyz;\n\t\t\t gl_FragColor = vec4( diff.xyz, center.a );\n\t\t\t}\n\t\t\t"; +LiteGraph.registerNodeType("texture/edges",LGraphTextureEdges);window.LGraphTextureEdges=LGraphTextureEdges;var LGraphTextureDepthRange=function(){this.addInput("Texture","Texture");this.addInput("Distance","number");this.addInput("Range","number");this.addOutput("Texture","Texture");this.properties={distance:100,range:50,high_precision:!1};LGraphTextureDepthRange._shader||(LGraphTextureDepthRange._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureDepthRange.pixel_shader))};LGraphTextureDepthRange.title= +"Depth Range";LGraphTextureDepthRange.desc="Generates a texture with a depth range";LGraphTextureDepthRange.prototype.onExecute=function(){var a=this.getInputData(0);if(a){var b=gl.UNSIGNED_BYTE;this.properties.high_precision&&(b=gl.half_float_ext?gl.HALF_FLOAT_OES:gl.FLOAT);this._temp_texture&&this._temp_texture.type==b&&this._temp_texture.width==a.width&&this._temp_texture.height==a.height||(this._temp_texture=new GL.Texture(a.width,a.height,{type:b,format:gl.RGBA,filter:gl.LINEAR}));var c=this.properties.distance; +this.isInputConnected(1)&&(c=this.getInputData(1),this.properties.distance=c);var d=this.properties.range;this.isInputConnected(2)&&(d=this.getInputData(2),this.properties.range=d);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var e=Mesh.getScreenQuad(),f=LGraphTextureDepthRange._shader;this._temp_texture.drawTo(function(){a.bind(0);f.uniforms({u_texture:0,u_distance:c,u_range:d,u_camera_planes:[Renderer._current_camera.near,Renderer._current_camera.far]}).draw(e)});this.setOutputData(0,this._temp_texture)}}; +LGraphTextureDepthRange.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_camera_planes;\n\t\t\tuniform float u_distance;\n\t\t\tuniform float u_range;\n\t\t\t\n\t\t\tfloat LinearDepth()\n\t\t\t{\n\t\t\t\tfloat n = u_camera_planes.x;\n\t\t\t\tfloat f = u_camera_planes.y;\n\t\t\t\treturn (2.0 * n) / (f + n - texture2D(u_texture, v_coord).x * (f - n));\n\t\t\t}\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tfloat diff = abs(LinearDepth() * u_camera_planes.y - u_distance);\n\t\t\t\tfloat dof = 1.0;\n\t\t\t\tif(diff <= u_range)\n\t\t\t\t\tdof = diff / u_range;\n\t\t\t gl_FragColor = vec4(dof);\n\t\t\t}\n\t\t\t"; +LiteGraph.registerNodeType("texture/depth_range",LGraphTextureDepthRange);window.LGraphTextureDepthRange=LGraphTextureDepthRange;var LGraphTextureBlur=function(){this.addInput("Texture","Texture");this.addInput("Iterations","number");this.addInput("Intensity","number");this.addOutput("Blurred","Texture");this.properties={intensity:1,iterations:1,preserve_aspect:!1,scale:[1,1]};LGraphTextureBlur._shader||(LGraphTextureBlur._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureBlur.pixel_shader))}; +LGraphTextureBlur.title="Blur";LGraphTextureBlur.desc="Blur a texture";LGraphTextureBlur.max_iterations=20;LGraphTextureBlur.prototype.onExecute=function(){var a=this.getInputData(0);if(a){var b=this._temp_texture;b&&b.width==a.width&&b.height==a.height&&b.type==a.type||(this._temp_texture=new GL.Texture(a.width,a.height,{type:a.type,format:gl.RGBA,filter:gl.LINEAR}),this._final_texture=new GL.Texture(a.width,a.height,{type:a.type,format:gl.RGBA,filter:gl.LINEAR}));b=this.properties.iterations;this.isInputConnected(1)&& +(b=this.getInputData(1),this.properties.iterations=b);b=Math.min(Math.floor(b),LGraphTextureBlur.max_iterations);if(0==b)this.setOutputData(0,a);else{var c=this.properties.intensity;this.isInputConnected(2)&&(c=this.getInputData(2),this.properties.intensity=c);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var d=Mesh.getScreenQuad(),e=LGraphTextureBlur._shader,f=this.properties.scale||[1,1],g=LiteGraph.aspect;g||void 0===window.gl||(g=gl.canvas.height/gl.canvas.width);void 0!==window.Renderer&&(g= +window.Renderer._current_camera.aspect);g||(g=1);for(var h=a,g=this.properties.preserve_aspect?g:1,a=0;a=this.size[1]||!this._video||(a.save(),a.webgl||(a.translate(0,this.size[1]),a.scale(1,-1)),a.drawImage(this._video,0,0,this.size[0],this.size[1]),a.restore())};LGraphTextureWebcam.prototype.onExecute=function(){null!=this._webcam_stream||this._waiting_confirmation||this.openStream();if(this._video&&this._video.videoWidth){var a=this._video.videoWidth,b=this._video.videoHeight,c=this._temp_texture;c&&c.width==a&&c.height==b||(this._temp_texture=new GL.Texture(a,b,{format:gl.RGB,filter:gl.LINEAR})); +this._temp_texture.uploadImage(this._video);this.setOutputData(0,this._temp_texture)}};LiteGraph.registerNodeType("texture/webcam",LGraphTextureWebcam);window.LGraphTextureWebcam=LGraphTextureWebcam;var LGraphCubemap=function(){this.addOutput("Cubemap","Cubemap");this.properties={name:""};this.size=[LGraphTexture.image_preview_size,LGraphTexture.image_preview_size]};LGraphCubemap.prototype.onDropFile=function(a,b,c){a?(this._drop_texture="string"==typeof a?GL.Texture.fromURL(a):GL.Texture.fromDDSInMemory(a), +this.properties.name=b):(this._drop_texture=null,this.properties.name="")};LGraphCubemap.prototype.onExecute=function(){if(this._drop_texture)this.setOutputData(0,this._drop_texture);else if(this.properties.name){var a=LGraphTexture.getTexture(this.properties.name);a&&(this._last_tex=a,this.setOutputData(0,a))}};LGraphCubemap.prototype.onDrawBackground=function(a){this.flags.collapsed||20>=this.size[1]||a.webgl&&(gl.meshes.cube||(gl.meshes.cube=GL.Mesh.cube({size:1})))};LiteGraph.registerNodeType("texture/cubemap", +LGraphCubemap);window.LGraphCubemap=LGraphCubemap} +if("undefined"!=typeof LiteGraph){var LGraphFXLens=function(){this.addInput("Texture","Texture");this.addInput("Aberration","number");this.addInput("Distortion","number");this.addInput("Blur","number");this.addOutput("Texture","Texture");this.properties={aberration:1,distortion:1,blur:1,precision:LGraphTexture.DEFAULT};LGraphFXLens._shader||(LGraphFXLens._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphFXLens.pixel_shader))};LGraphFXLens.title="Lens";LGraphFXLens.desc="Camera Lens distortion"; +LGraphFXLens.widgets_info={precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphFXLens.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else if(a){this._tex=LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);var b=this.properties.aberration;this.isInputConnected(1)&&(b=this.getInputData(1),this.properties.aberration=b);var c=this.properties.distortion;this.isInputConnected(2)&& +(c=this.getInputData(2),this.properties.distortion=c);var d=this.properties.blur;this.isInputConnected(3)&&(d=this.getInputData(3),this.properties.blur=d);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var e=Mesh.getScreenQuad(),f=LGraphFXLens._shader;this._tex.drawTo(function(){a.bind(0);f.uniforms({u_texture:0,u_aberration:b,u_distortion:c,u_blur:d}).draw(e)});this.setOutputData(0,this._tex)}};LGraphFXLens.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_camera_planes;\n\t\t\tuniform float u_aberration;\n\t\t\tuniform float u_distortion;\n\t\t\tuniform float u_blur;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec2 coord = v_coord;\n\t\t\t\tfloat dist = distance(vec2(0.5), coord);\n\t\t\t\tvec2 dist_coord = coord - vec2(0.5);\n\t\t\t\tfloat percent = 1.0 + ((0.5 - dist) / 0.5) * u_distortion;\n\t\t\t\tdist_coord *= percent;\n\t\t\t\tcoord = dist_coord + vec2(0.5);\n\t\t\t\tvec4 color = texture2D(u_texture,coord, u_blur * dist);\n\t\t\t\tcolor.r = texture2D(u_texture,vec2(0.5) + dist_coord * (1.0+0.01*u_aberration), u_blur * dist ).r;\n\t\t\t\tcolor.b = texture2D(u_texture,vec2(0.5) + dist_coord * (1.0-0.01*u_aberration), u_blur * dist ).b;\n\t\t\t\tgl_FragColor = color;\n\t\t\t}\n\t\t\t"; +LiteGraph.registerNodeType("fx/lens",LGraphFXLens);window.LGraphFXLens=LGraphFXLens;var LGraphFXBokeh=function(){this.addInput("Texture","Texture");this.addInput("Blurred","Texture");this.addInput("Mask","Texture");this.addInput("Threshold","number");this.addOutput("Texture","Texture");this.properties={shape:"",size:10,alpha:1,threshold:1,high_precision:!1}};LGraphFXBokeh.title="Bokeh";LGraphFXBokeh.desc="applies an Bokeh effect";LGraphFXBokeh.widgets_info={shape:{widget:"texture"}};LGraphFXBokeh.prototype.onExecute= +function(){var a=this.getInputData(0),b=this.getInputData(1),c=this.getInputData(2);if(a&&c&&this.properties.shape){b||(b=a);var d=LGraphTexture.getTexture(this.properties.shape);if(d){var e=this.properties.threshold;this.isInputConnected(3)&&(e=this.getInputData(3),this.properties.threshold=e);var f=gl.UNSIGNED_BYTE;this.properties.high_precision&&(f=gl.half_float_ext?gl.HALF_FLOAT_OES:gl.FLOAT);this._temp_texture&&this._temp_texture.type==f&&this._temp_texture.width==a.width&&this._temp_texture.height== +a.height||(this._temp_texture=new GL.Texture(a.width,a.height,{type:f,format:gl.RGBA,filter:gl.LINEAR}));var g=LGraphFXBokeh._first_shader;g||(g=LGraphFXBokeh._first_shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphFXBokeh._first_pixel_shader));var h=LGraphFXBokeh._second_shader;h||(h=LGraphFXBokeh._second_shader=new GL.Shader(LGraphFXBokeh._second_vertex_shader,LGraphFXBokeh._second_pixel_shader));var l=this._points_mesh;l&&l._width==a.width&&l._height==a.height&&2==l._spacing||(l=this.createPointsMesh(a.width, +a.height,2));var n=Mesh.getScreenQuad(),k=this.properties.size,p=this.properties.alpha;gl.disable(gl.DEPTH_TEST);gl.disable(gl.BLEND);this._temp_texture.drawTo(function(){a.bind(0);b.bind(1);c.bind(2);g.uniforms({u_texture:0,u_texture_blur:1,u_mask:2,u_texsize:[a.width,a.height]}).draw(n)});this._temp_texture.drawTo(function(){gl.enable(gl.BLEND);gl.blendFunc(gl.ONE,gl.ONE);a.bind(0);d.bind(3);h.uniforms({u_texture:0,u_mask:2,u_shape:3,u_alpha:p,u_threshold:e,u_pointSize:k,u_itexsize:[1/a.width,1/ +a.height]}).draw(l,gl.POINTS)});this.setOutputData(0,this._temp_texture)}}else this.setOutputData(0,a)};LGraphFXBokeh.prototype.createPointsMesh=function(a,b,c){for(var d=Math.round(a/c),e=Math.round(b/c),f=new Float32Array(d*e*2),g=-1,h=2/a*c,l=2/b*c,n=0;n - Defined in: ../src/litegraph.js:227 + Defined in: ../src/litegraph.js:231 @@ -147,7 +147,7 @@ - ../src/litegraph.js:227 + ../src/litegraph.js:231

@@ -405,7 +405,7 @@ - ../src/litegraph.js:582 + ../src/litegraph.js:586

@@ -494,7 +494,7 @@ - ../src/litegraph.js:296 + ../src/litegraph.js:300

@@ -572,7 +572,7 @@ - ../src/litegraph.js:251 + ../src/litegraph.js:255

@@ -637,7 +637,7 @@ - ../src/litegraph.js:1018 + ../src/litegraph.js:1051

@@ -726,7 +726,7 @@ - ../src/litegraph.js:315 + ../src/litegraph.js:319

@@ -818,7 +818,7 @@ - ../src/litegraph.js:726 + ../src/litegraph.js:730

@@ -925,7 +925,7 @@ - ../src/litegraph.js:710 + ../src/litegraph.js:714

@@ -1022,7 +1022,7 @@ - ../src/litegraph.js:542 + ../src/litegraph.js:546

@@ -1096,7 +1096,7 @@ if the nodes are using graphical actions

- ../src/litegraph.js:531 + ../src/litegraph.js:535

@@ -1175,7 +1175,7 @@ if the nodes are using graphical actions

- ../src/litegraph.js:697 + ../src/litegraph.js:701

@@ -1279,7 +1279,7 @@ if the nodes are using graphical actions

- ../src/litegraph.js:742 + ../src/litegraph.js:746

@@ -1408,7 +1408,7 @@ if the nodes are using graphical actions

- ../src/litegraph.js:520 + ../src/litegraph.js:524

@@ -1477,7 +1477,7 @@ if the nodes are using graphical actions

- ../src/litegraph.js:952 + ../src/litegraph.js:985

@@ -1542,7 +1542,7 @@ if the nodes are using graphical actions

- ../src/litegraph.js:631 + ../src/litegraph.js:635

@@ -1631,7 +1631,7 @@ if the nodes are using graphical actions

- ../src/litegraph.js:378 + ../src/litegraph.js:382

@@ -1726,7 +1726,7 @@ if the nodes are using graphical actions

- ../src/litegraph.js:554 + ../src/litegraph.js:558

@@ -1825,7 +1825,7 @@ if the nodes are using graphical actions

- ../src/litegraph.js:985 + ../src/litegraph.js:1018

@@ -1910,7 +1910,7 @@ if the nodes are using graphical actions

- ../src/litegraph.js:900 + ../src/litegraph.js:933

@@ -2020,7 +2020,7 @@ can be easily accesed from the outside of the graph

- ../src/litegraph.js:915 + ../src/litegraph.js:948

@@ -2123,7 +2123,7 @@ can be easily accesed from the outside of the graph

- ../src/litegraph.js:329 + ../src/litegraph.js:333

@@ -2202,7 +2202,7 @@ can be easily accesed from the outside of the graph

- ../src/litegraph.js:356 + ../src/litegraph.js:360

@@ -2257,7 +2257,7 @@ can be easily accesed from the outside of the graph

- ../src/litegraph.js:422 + ../src/litegraph.js:426

diff --git a/doc/classes/LGraphCanvas.html b/doc/classes/LGraphCanvas.html index ebb18c716..90c1ccf36 100644 --- a/doc/classes/LGraphCanvas.html +++ b/doc/classes/LGraphCanvas.html @@ -96,7 +96,7 @@
- Defined in: ../src/litegraph.js:2278 + Defined in: ../src/litegraph.js:2369
@@ -163,7 +163,7 @@ - ../src/litegraph.js:2278 + ../src/litegraph.js:2369

@@ -353,7 +353,7 @@ - ../src/litegraph.js:2032 + ../src/litegraph.js:2047

@@ -418,7 +418,7 @@ - ../src/litegraph.js:2141 + ../src/litegraph.js:2156

@@ -501,7 +501,7 @@ - ../src/litegraph.js:2294 + ../src/litegraph.js:2385

@@ -580,7 +580,7 @@ - ../src/litegraph.js:2114 + ../src/litegraph.js:2129

@@ -668,7 +668,7 @@ - ../src/litegraph.js:2156 + ../src/litegraph.js:2171

@@ -757,7 +757,7 @@ - ../src/litegraph.js:2086 + ../src/litegraph.js:2101

@@ -835,7 +835,7 @@ - ../src/litegraph.js:2306 + ../src/litegraph.js:2397

@@ -890,7 +890,7 @@ - ../src/litegraph.js:2337 + ../src/litegraph.js:2420

diff --git a/doc/classes/LGraphNode.html b/doc/classes/LGraphNode.html index d6790beea..77f429cd6 100644 --- a/doc/classes/LGraphNode.html +++ b/doc/classes/LGraphNode.html @@ -96,7 +96,7 @@
- Defined in: ../src/litegraph.js:1096 + Defined in: ../src/litegraph.js:1130
@@ -415,7 +415,7 @@ - ../src/litegraph.js:1528 + ../src/litegraph.js:1539

@@ -563,7 +563,7 @@ - ../src/litegraph.js:1468 + ../src/litegraph.js:1479

@@ -624,7 +624,7 @@
-

this can be used to have special properties of an input (special color, position, etc)

+

this can be used to have special properties of an input (label, color, position, etc)

@@ -683,7 +683,7 @@ - ../src/litegraph.js:1489 + ../src/litegraph.js:1500

@@ -784,7 +784,7 @@ - ../src/litegraph.js:1408 + ../src/litegraph.js:1419

@@ -904,7 +904,7 @@ - ../src/litegraph.js:1429 + ../src/litegraph.js:1440

@@ -983,7 +983,7 @@ - ../src/litegraph.js:1962 + ../src/litegraph.js:1973

@@ -1052,7 +1052,7 @@ - ../src/litegraph.js:1541 + ../src/litegraph.js:1552

@@ -1144,7 +1144,7 @@ - ../src/litegraph.js:1125 + ../src/litegraph.js:1165

@@ -1225,7 +1225,7 @@ - ../src/litegraph.js:1621 + ../src/litegraph.js:1632

@@ -1364,7 +1364,7 @@ - ../src/litegraph.js:1771 + ../src/litegraph.js:1782

@@ -1477,7 +1477,7 @@ - ../src/litegraph.js:1704 + ../src/litegraph.js:1715

@@ -1600,7 +1600,7 @@ - ../src/litegraph.js:1591 + ../src/litegraph.js:1602

@@ -1707,7 +1707,7 @@ - ../src/litegraph.js:1606 + ../src/litegraph.js:1617

@@ -1804,7 +1804,7 @@ - ../src/litegraph.js:1559 + ../src/litegraph.js:1570

@@ -1893,7 +1893,7 @@ - ../src/litegraph.js:1828 + ../src/litegraph.js:1839

@@ -2016,7 +2016,7 @@ - ../src/litegraph.js:1311 + ../src/litegraph.js:1322

@@ -2122,7 +2122,7 @@ - ../src/litegraph.js:1337 + ../src/litegraph.js:1348

@@ -2226,7 +2226,7 @@ - ../src/litegraph.js:1352 + ../src/litegraph.js:1363

@@ -2330,7 +2330,7 @@ - ../src/litegraph.js:1379 + ../src/litegraph.js:1390

@@ -2420,7 +2420,7 @@ - ../src/litegraph.js:1279 + ../src/litegraph.js:1290

@@ -2489,7 +2489,7 @@ - ../src/litegraph.js:1325 + ../src/litegraph.js:1336

@@ -2593,7 +2593,7 @@ - ../src/litegraph.js:1367 + ../src/litegraph.js:1378

@@ -2703,7 +2703,7 @@ - ../src/litegraph.js:1569 + ../src/litegraph.js:1580

@@ -2808,7 +2808,7 @@ - ../src/litegraph.js:1975 + ../src/litegraph.js:1986

@@ -2873,7 +2873,7 @@ - ../src/litegraph.js:1514 + ../src/litegraph.js:1525

@@ -2961,7 +2961,7 @@ - ../src/litegraph.js:1454 + ../src/litegraph.js:1465

@@ -3039,7 +3039,7 @@ - ../src/litegraph.js:1176 + ../src/litegraph.js:1224

@@ -3110,7 +3110,7 @@ - ../src/litegraph.js:1292 + ../src/litegraph.js:1303

@@ -3203,7 +3203,7 @@ - ../src/litegraph.js:1267 + ../src/litegraph.js:1278

diff --git a/doc/classes/LiteGraph.html b/doc/classes/LiteGraph.html index 9cab56904..aa6bb784c 100644 --- a/doc/classes/LiteGraph.html +++ b/doc/classes/LiteGraph.html @@ -298,7 +298,7 @@ - ../src/litegraph.js:65 + ../src/litegraph.js:68

@@ -423,7 +423,7 @@ - ../src/litegraph.js:105 + ../src/litegraph.js:109

@@ -530,7 +530,7 @@ - ../src/litegraph.js:118 + ../src/litegraph.js:122

@@ -627,7 +627,7 @@ - ../src/litegraph.js:140 + ../src/litegraph.js:144

@@ -712,7 +712,7 @@ - ../src/litegraph.js:34 + ../src/litegraph.js:37

diff --git a/doc/data.json b/doc/data.json index 5f149b208..63d0100fe 100644 --- a/doc/data.json +++ b/doc/data.json @@ -38,7 +38,7 @@ "plugin_for": [], "extension_for": [], "file": "../src/litegraph.js", - "line": 227, + "line": 231, "description": "LGraph is the class that contain a full graph. We instantiate one and add nodes to it, and then we can run the execution loop.", "is_constructor": 1 }, @@ -51,7 +51,7 @@ "plugin_for": [], "extension_for": [], "file": "../src/litegraph.js", - "line": 1096, + "line": 1130, "description": "Base Class for all the node type classes", "params": [ { @@ -70,7 +70,7 @@ "plugin_for": [], "extension_for": [], "file": "../src/litegraph.js", - "line": 2278, + "line": 2369, "description": "marks as dirty the canvas, this way it will be rendered again", "is_constructor": 1, "params": [ @@ -91,7 +91,7 @@ "classitems": [ { "file": "../src/litegraph.js", - "line": 34, + "line": 37, "description": "Register a node class so it can be listed when the user wants to create a new one", "itemtype": "method", "name": "registerNodeType", @@ -111,7 +111,7 @@ }, { "file": "../src/litegraph.js", - "line": 65, + "line": 68, "description": "Create a node of a given type with a name. The node is not attached to any graph yet.", "itemtype": "method", "name": "createNode", @@ -136,7 +136,7 @@ }, { "file": "../src/litegraph.js", - "line": 105, + "line": 109, "description": "Returns a registered node type with a given name", "itemtype": "method", "name": "getNodeType", @@ -155,7 +155,7 @@ }, { "file": "../src/litegraph.js", - "line": 118, + "line": 122, "description": "Returns a list of node types matching one category", "itemtype": "method", "name": "getNodeType", @@ -174,7 +174,7 @@ }, { "file": "../src/litegraph.js", - "line": 140, + "line": 144, "description": "Returns a list with all the node type categories", "itemtype": "method", "name": "getNodeTypesCategories", @@ -186,7 +186,7 @@ }, { "file": "../src/litegraph.js", - "line": 251, + "line": 255, "description": "Removes all nodes from this graph", "itemtype": "method", "name": "clear", @@ -194,7 +194,7 @@ }, { "file": "../src/litegraph.js", - "line": 296, + "line": 300, "description": "Attach Canvas to this graph", "itemtype": "method", "name": "attachCanvas", @@ -209,7 +209,7 @@ }, { "file": "../src/litegraph.js", - "line": 315, + "line": 319, "description": "Detach Canvas from this graph", "itemtype": "method", "name": "detachCanvas", @@ -224,7 +224,7 @@ }, { "file": "../src/litegraph.js", - "line": 329, + "line": 333, "description": "Starts running this graph every interval milliseconds.", "itemtype": "method", "name": "start", @@ -239,7 +239,7 @@ }, { "file": "../src/litegraph.js", - "line": 356, + "line": 360, "description": "Stops the execution loop of the graph", "itemtype": "method", "name": "stop execution", @@ -247,7 +247,7 @@ }, { "file": "../src/litegraph.js", - "line": 378, + "line": 382, "description": "Run N steps (cycles) of the graph", "itemtype": "method", "name": "runStep", @@ -262,7 +262,7 @@ }, { "file": "../src/litegraph.js", - "line": 422, + "line": 426, "description": "Updates the graph execution order according to relevance of the nodes (nodes with only outputs have more relevance than\nnodes with only inputs.", "itemtype": "method", "name": "updateExecutionOrder", @@ -270,7 +270,7 @@ }, { "file": "../src/litegraph.js", - "line": 520, + "line": 524, "description": "Returns the amount of time the graph has been running in milliseconds", "itemtype": "method", "name": "getTime", @@ -282,7 +282,7 @@ }, { "file": "../src/litegraph.js", - "line": 531, + "line": 535, "description": "Returns the amount of time accumulated using the fixedtime_lapse var. This is used in context where the time increments should be constant", "itemtype": "method", "name": "getFixedTime", @@ -294,7 +294,7 @@ }, { "file": "../src/litegraph.js", - "line": 542, + "line": 546, "description": "Returns the amount of time it took to compute the latest iteration. Take into account that this number could be not correct\nif the nodes are using graphical actions", "itemtype": "method", "name": "getElapsedTime", @@ -306,7 +306,7 @@ }, { "file": "../src/litegraph.js", - "line": 554, + "line": 558, "description": "Sends an event to all the nodes, useful to trigger stuff", "itemtype": "method", "name": "sendEventToAllNodes", @@ -326,7 +326,7 @@ }, { "file": "../src/litegraph.js", - "line": 582, + "line": 586, "description": "Adds a new node instasnce to this graph", "itemtype": "method", "name": "add", @@ -341,7 +341,7 @@ }, { "file": "../src/litegraph.js", - "line": 631, + "line": 635, "description": "Removes a node from the graph", "itemtype": "method", "name": "remove", @@ -356,7 +356,7 @@ }, { "file": "../src/litegraph.js", - "line": 697, + "line": 701, "description": "Returns a node by its id.", "itemtype": "method", "name": "getNodeById", @@ -371,7 +371,7 @@ }, { "file": "../src/litegraph.js", - "line": 710, + "line": 714, "description": "Returns a list of nodes that matches a type", "itemtype": "method", "name": "findNodesByType", @@ -390,7 +390,7 @@ }, { "file": "../src/litegraph.js", - "line": 726, + "line": 730, "description": "Returns a list of nodes that matches a name", "itemtype": "method", "name": "findNodesByName", @@ -409,7 +409,7 @@ }, { "file": "../src/litegraph.js", - "line": 742, + "line": 746, "description": "Returns the top-most node in this position of the canvas", "itemtype": "method", "name": "getNodeOnPos", @@ -438,7 +438,7 @@ }, { "file": "../src/litegraph.js", - "line": 900, + "line": 933, "description": "Assigns a value to all the nodes that matches this name. This is used to create global variables of the node that\ncan be easily accesed from the outside of the graph", "itemtype": "method", "name": "setInputData", @@ -458,7 +458,7 @@ }, { "file": "../src/litegraph.js", - "line": 915, + "line": 948, "description": "Returns the value of the first node with this name. This is used to access global variables of the graph from the outside", "itemtype": "method", "name": "setInputData", @@ -477,7 +477,7 @@ }, { "file": "../src/litegraph.js", - "line": 952, + "line": 985, "description": "returns if the graph is in live mode", "itemtype": "method", "name": "isLive", @@ -485,7 +485,7 @@ }, { "file": "../src/litegraph.js", - "line": 985, + "line": 1018, "description": "Creates a Object containing all the info about this graph, it can be serialized", "itemtype": "method", "name": "serialize", @@ -497,7 +497,7 @@ }, { "file": "../src/litegraph.js", - "line": 1018, + "line": 1051, "description": "Configure a graph from a JSON string", "itemtype": "method", "name": "configure", @@ -512,7 +512,7 @@ }, { "file": "../src/litegraph.js", - "line": 1125, + "line": 1165, "description": "configure a node from an object containing the serialized info", "itemtype": "method", "name": "configure", @@ -520,7 +520,7 @@ }, { "file": "../src/litegraph.js", - "line": 1176, + "line": 1224, "description": "serialize the content", "itemtype": "method", "name": "serialize", @@ -528,7 +528,7 @@ }, { "file": "../src/litegraph.js", - "line": 1267, + "line": 1278, "description": "serialize and stringify", "itemtype": "method", "name": "toString", @@ -536,7 +536,7 @@ }, { "file": "../src/litegraph.js", - "line": 1279, + "line": 1290, "description": "get the title string", "itemtype": "method", "name": "getTitle", @@ -544,7 +544,7 @@ }, { "file": "../src/litegraph.js", - "line": 1292, + "line": 1303, "description": "sets the output data", "itemtype": "method", "name": "setOutputData", @@ -564,7 +564,7 @@ }, { "file": "../src/litegraph.js", - "line": 1311, + "line": 1322, "description": "retrieves the input data from one slot", "itemtype": "method", "name": "getInputData", @@ -583,7 +583,7 @@ }, { "file": "../src/litegraph.js", - "line": 1325, + "line": 1336, "description": "tells you if there is a connection in one input slot", "itemtype": "method", "name": "isInputConnected", @@ -602,7 +602,7 @@ }, { "file": "../src/litegraph.js", - "line": 1337, + "line": 1348, "description": "tells you info about an input connection (which node, type, etc)", "itemtype": "method", "name": "getInputInfo", @@ -621,7 +621,7 @@ }, { "file": "../src/litegraph.js", - "line": 1352, + "line": 1363, "description": "tells you info about an output connection (which node, type, etc)", "itemtype": "method", "name": "getOutputInfo", @@ -640,7 +640,7 @@ }, { "file": "../src/litegraph.js", - "line": 1367, + "line": 1378, "description": "tells you if there is a connection in one output slot", "itemtype": "method", "name": "isOutputConnected", @@ -659,7 +659,7 @@ }, { "file": "../src/litegraph.js", - "line": 1379, + "line": 1390, "description": "retrieves all the nodes connected to this output slot", "itemtype": "method", "name": "getOutputNodes", @@ -678,7 +678,7 @@ }, { "file": "../src/litegraph.js", - "line": 1408, + "line": 1419, "description": "add a new output slot to use in this node", "itemtype": "method", "name": "addOutput", @@ -703,7 +703,7 @@ }, { "file": "../src/litegraph.js", - "line": 1429, + "line": 1440, "description": "add a new output slot to use in this node", "itemtype": "method", "name": "addOutputs", @@ -718,7 +718,7 @@ }, { "file": "../src/litegraph.js", - "line": 1454, + "line": 1465, "description": "remove an existing output slot", "itemtype": "method", "name": "removeOutput", @@ -733,7 +733,7 @@ }, { "file": "../src/litegraph.js", - "line": 1468, + "line": 1479, "description": "add a new input slot to use in this node", "itemtype": "method", "name": "addInput", @@ -750,7 +750,7 @@ }, { "name": "extra_info", - "description": "this can be used to have special properties of an input (special color, position, etc)", + "description": "this can be used to have special properties of an input (label, color, position, etc)", "type": "Object" } ], @@ -758,7 +758,7 @@ }, { "file": "../src/litegraph.js", - "line": 1489, + "line": 1500, "description": "add several new input slots in this node", "itemtype": "method", "name": "addInputs", @@ -773,7 +773,7 @@ }, { "file": "../src/litegraph.js", - "line": 1514, + "line": 1525, "description": "remove an existing input slot", "itemtype": "method", "name": "removeInput", @@ -788,7 +788,7 @@ }, { "file": "../src/litegraph.js", - "line": 1528, + "line": 1539, "description": "add an special connection to this node (used for special kinds of graphs)", "itemtype": "method", "name": "addConnection", @@ -818,7 +818,7 @@ }, { "file": "../src/litegraph.js", - "line": 1541, + "line": 1552, "description": "computes the size of a node according to its inputs and output slots", "itemtype": "method", "name": "computeSize", @@ -837,7 +837,7 @@ }, { "file": "../src/litegraph.js", - "line": 1559, + "line": 1570, "description": "returns the bounding of the object, used for rendering purposes", "itemtype": "method", "name": "getBounding", @@ -849,7 +849,7 @@ }, { "file": "../src/litegraph.js", - "line": 1569, + "line": 1580, "description": "checks if a point is inside the shape of a node", "itemtype": "method", "name": "isPointInsideNode", @@ -873,7 +873,7 @@ }, { "file": "../src/litegraph.js", - "line": 1591, + "line": 1602, "description": "returns the input slot with a given name (used for dynamic slots), -1 if not found", "itemtype": "method", "name": "findInputSlot", @@ -892,7 +892,7 @@ }, { "file": "../src/litegraph.js", - "line": 1606, + "line": 1617, "description": "returns the output slot with a given name (used for dynamic slots), -1 if not found", "itemtype": "method", "name": "findOutputSlot", @@ -911,7 +911,7 @@ }, { "file": "../src/litegraph.js", - "line": 1621, + "line": 1632, "description": "connect this node output to the input of another node", "itemtype": "method", "name": "connect", @@ -940,7 +940,7 @@ }, { "file": "../src/litegraph.js", - "line": 1704, + "line": 1715, "description": "disconnect one output to an specific node", "itemtype": "method", "name": "disconnectOutput", @@ -964,7 +964,7 @@ }, { "file": "../src/litegraph.js", - "line": 1771, + "line": 1782, "description": "disconnect one input", "itemtype": "method", "name": "disconnectInput", @@ -983,7 +983,7 @@ }, { "file": "../src/litegraph.js", - "line": 1828, + "line": 1839, "description": "returns the center of a connection point in canvas coords", "itemtype": "method", "name": "getConnectionPos", @@ -1007,7 +1007,7 @@ }, { "file": "../src/litegraph.js", - "line": 1962, + "line": 1973, "description": "Collapse the node to make it smaller on the canvas", "itemtype": "method", "name": "collapse", @@ -1015,7 +1015,7 @@ }, { "file": "../src/litegraph.js", - "line": 1975, + "line": 1986, "description": "Forces the node to do not move or realign on Z", "itemtype": "method", "name": "pin", @@ -1023,7 +1023,7 @@ }, { "file": "../src/litegraph.js", - "line": 2032, + "line": 2047, "description": "clears all the data inside", "itemtype": "method", "name": "clear", @@ -1031,7 +1031,7 @@ }, { "file": "../src/litegraph.js", - "line": 2086, + "line": 2101, "description": "assigns a graph, you can reasign graphs to the same canvas", "itemtype": "method", "name": "setGraph", @@ -1046,7 +1046,7 @@ }, { "file": "../src/litegraph.js", - "line": 2114, + "line": 2129, "description": "opens a graph contained inside a node in the current graph", "itemtype": "method", "name": "openSubgraph", @@ -1061,7 +1061,7 @@ }, { "file": "../src/litegraph.js", - "line": 2141, + "line": 2156, "description": "closes a subgraph contained inside a node", "itemtype": "method", "name": "closeSubgraph", @@ -1076,7 +1076,7 @@ }, { "file": "../src/litegraph.js", - "line": 2156, + "line": 2171, "description": "assigns a canvas", "itemtype": "method", "name": "setCanvas", @@ -1091,7 +1091,7 @@ }, { "file": "../src/litegraph.js", - "line": 2294, + "line": 2385, "description": "Used to attach the canvas in a popup", "itemtype": "method", "name": "getCanvasWindow", @@ -1103,7 +1103,7 @@ }, { "file": "../src/litegraph.js", - "line": 2306, + "line": 2397, "description": "starts rendering the content of the canvas when needed", "itemtype": "method", "name": "startRendering", @@ -1111,7 +1111,7 @@ }, { "file": "../src/litegraph.js", - "line": 2337, + "line": 2420, "description": "stops rendering the content of the canvas (to save resources)", "itemtype": "method", "name": "stopRendering", diff --git a/doc/files/.._src_litegraph.js.html b/doc/files/.._src_litegraph.js.html index 1fecedaf9..a9e0f0172 100644 --- a/doc/files/.._src_litegraph.js.html +++ b/doc/files/.._src_litegraph.js.html @@ -113,6 +113,7 @@ var LiteGraph = { NODE_COLLAPSED_RADIUS: 10, NODE_COLLAPSED_WIDTH: 80, CANVAS_GRID_SIZE: 10, + NODE_TITLE_COLOR: "#222", NODE_DEFAULT_COLOR: "#999", NODE_DEFAULT_BGCOLOR: "#444", NODE_DEFAULT_BOXCOLOR: "#AEF", @@ -121,6 +122,8 @@ var LiteGraph = { DEFAULT_POSITION: [100,100],//default node position node_images_path: "", + proxy: null, //used to redirect calls + debug: false, throw_errors: true, registered_node_types: {}, @@ -182,6 +185,7 @@ var LiteGraph = { node.type = type; if(!node.title) node.title = title; + if(!node.properties) node.properties = {}; if(!node.flags) node.flags = {}; if(!node.size) node.size = node.computeSize(); if(!node.pos) node.pos = LiteGraph.DEFAULT_POSITION.concat(); @@ -887,8 +891,11 @@ LGraph.prototype.getGlobalInputData = function(name) } //rename the global input -LGraph.prototype.renameGlobalInput = function(old_name, name, data) +LGraph.prototype.renameGlobalInput = function(old_name, name) { + if(name == old_name) + return; + if(!this.global_inputs[old_name]) return false; @@ -908,6 +915,19 @@ LGraph.prototype.renameGlobalInput = function(old_name, name, data) this.onGlobalsChange(); } +LGraph.prototype.changeGlobalInputType = function(name, type) +{ + if(!this.global_inputs[name]) + return false; + + if(this.global_inputs[name].type == type) + return; + + this.global_inputs[name].type = type; + if(this.onGlobalInputTypeChanged) + this.onGlobalInputTypeChanged(name, type); +} + LGraph.prototype.removeGlobalInput = function(name) { if(!this.global_inputs[name]) @@ -955,7 +975,7 @@ LGraph.prototype.getGlobalOutputData = function(name) //rename the global output -LGraph.prototype.renameGlobalOutput = function(old_name, name, data) +LGraph.prototype.renameGlobalOutput = function(old_name, name) { if(!this.global_outputs[old_name]) return false; @@ -976,6 +996,19 @@ LGraph.prototype.renameGlobalOutput = function(old_name, name, data) this.onGlobalsChange(); } +LGraph.prototype.changeGlobalOutputType = function(name, type) +{ + if(!this.global_outputs[name]) + return false; + + if(this.global_outputs[name].type == type) + return; + + this.global_outputs[name].type = type; + if(this.onGlobalOutputTypeChanged) + this.onGlobalOutputTypeChanged(name, type); +} + LGraph.prototype.removeGlobalOutput = function(name) { if(!this.global_outputs[name]) @@ -1185,6 +1218,7 @@ LGraph.prototype.onNodeTrace = function(node, msg, color) + onSerialize + onSelected + onDeselected + + onDropFile */ /** @@ -1194,6 +1228,11 @@ LGraph.prototype.onNodeTrace = function(node, msg, color) */ function LGraphNode(title) +{ + this._ctor(); +} + +LGraphNode.prototype._ctor = function( title ) { this.title = title || "Unnamed"; this.size = [LiteGraph.NODE_WIDTH,60]; @@ -1209,6 +1248,7 @@ function LGraphNode(title) this.connections = []; //local data + this.properties = {}; this.data = null; //persistent local data this.flags = { //skip_title_render: true, @@ -1226,6 +1266,14 @@ LGraphNode.prototype.configure = function(info) { if(j == "console") continue; + if(j == "properties") + { + //i dont want to clone properties, I want to reuse the old container + for(var k in info.properties) + this.properties[k] = info.properties[k]; + continue; + } + if(info[j] == null) continue; else if (typeof(info[j]) == 'object') //object @@ -1317,46 +1365,9 @@ LGraphNode.prototype.clone = function() delete data["id"]; node.configure(data); - /* - node.size = this.size.concat(); - if(this.inputs) - for(var i = 0, l = this.inputs.length; i < l; ++i) - { - if(node.findInputSlot( this.inputs[i].name ) == -1) - node.addInput( this.inputs[i].name, this.inputs[i].type ); - } - - if(this.outputs) - for(var i = 0, l = this.outputs.length; i < l; ++i) - { - if(node.findOutputSlot( this.outputs[i].name ) == -1) - node.addOutput( this.outputs[i].name, this.outputs[i].type ); - } - */ - return node; } -//reduced version of objectivize: NOT FINISHED -/* -LGraphNode.prototype.reducedObjectivize = function() -{ - var o = this.objectivize(); - - var type = LiteGraph.getNodeType(o.type); - - if(type.title == o.title) - delete o["title"]; - - if(type.size && compareObjects(o.size,type.size)) - delete o["size"]; - - if(type.properties && compareObjects(o.properties, type.properties)) - delete o["properties"]; - - return o; -} -*/ /** * serialize and stringify @@ -1564,7 +1575,7 @@ LGraphNode.prototype.removeOutput = function(slot) * @method addInput * @param {string} name * @param {string} type string defining the input type ("vec3","number",...) -* @param {Object} extra_info this can be used to have special properties of an input (special color, position, etc) +* @param {Object} extra_info this can be used to have special properties of an input (label, color, position, etc) */ LGraphNode.prototype.addInput = function(name,type,extra_info) { @@ -1590,7 +1601,7 @@ LGraphNode.prototype.addInputs = function(array) for(var i in array) { var info = array[i]; - var o = {name:info[0],type:info[1],link:null}; + var o = {name:info[0], type:info[1], link:null}; if(array[2]) for(var j in info[2]) o[j] = info[2][j]; @@ -1641,7 +1652,7 @@ LGraphNode.prototype.addConnection = function(name,type,pos,direction) LGraphNode.prototype.computeSize = function(minHeight) { var rows = Math.max( this.inputs ? this.inputs.length : 1, this.outputs ? this.outputs.length : 1); - var size = [0,0]; + var size = new Float32Array([0,0]); size[1] = rows * 14 + 6; if(!this.inputs || this.inputs.length == 0 || !this.outputs || this.outputs.length == 0) size[0] = LiteGraph.NODE_WIDTH * 0.5; @@ -1775,8 +1786,8 @@ LGraphNode.prototype.connect = function(slot, node, target_slot) output.links = []; output.links.push({id:node.id, slot: -1}); } - else if(output.type == 0 || //generic output - node.inputs[target_slot].type == 0 || //generic input + else if( !output.type || //generic output + !node.inputs[target_slot].type || //generic input output.type == node.inputs[target_slot].type) //same type { //info: link structure => [ 0:link_id, 1:start_node_id, 2:start_slot, 3:end_node_id, 4:end_slot ] @@ -2099,7 +2110,7 @@ LGraphNode.prototype.localToScreen = function(x,y, graphcanvas) * @param {HTMLCanvas} canvas the canvas where you want to render (it accepts a selector in string format or the canvas itself) * @param {LGraph} graph [optional] */ -function LGraphCanvas(canvas, graph) +function LGraphCanvas(canvas, graph, skip_render) { //if(graph === undefined) // throw ("No graph assigned"); @@ -2110,6 +2121,9 @@ function LGraphCanvas(canvas, graph) if(!canvas) throw("no canvas found"); + this.max_zoom = 10; + this.min_zoom = 0.1; + //link canvas and graph if(graph) graph.attachCanvas(this); @@ -2117,7 +2131,8 @@ function LGraphCanvas(canvas, graph) this.setCanvas(canvas); this.clear(); - this.startRendering(); + if(!skip_render) + this.startRendering(); } LGraphCanvas.link_type_colors = {'number':"#AAC",'node':"#DCA"}; @@ -2267,8 +2282,8 @@ LGraphCanvas.prototype.setCanvas = function(canvas) this.canvas = canvas; //this.canvas.tabindex = "1000"; - this.canvas.className += " lgraphcanvas"; - this.canvas.data = this; + canvas.className += " lgraphcanvas"; + canvas.data = this; //bg canvas: used for non changing stuff this.bgcanvas = null; @@ -2279,47 +2294,123 @@ LGraphCanvas.prototype.setCanvas = function(canvas) this.bgcanvas.height = this.canvas.height; } - if(this.canvas.getContext == null) + if(canvas.getContext == null) { throw("This browser doesnt support Canvas"); } - this.ctx = this.canvas.getContext("2d"); - this.bgctx = this.bgcanvas.getContext("2d"); + var ctx = this.ctx = canvas.getContext("2d"); + if(ctx == null) + { + console.warn("This canvas seems to be WebGL, enabling WebGL renderer"); + this.enableWebGL(); + } //input: (move and up could be unbinded) this._mousemove_callback = this.processMouseMove.bind(this); this._mouseup_callback = this.processMouseUp.bind(this); - this.canvas.addEventListener("mousedown", this.processMouseDown.bind(this), true ); //down do not need to store the binded - this.canvas.addEventListener("mousemove", this._mousemove_callback); + canvas.addEventListener("mousedown", this.processMouseDown.bind(this), true ); //down do not need to store the binded + canvas.addEventListener("mousemove", this._mousemove_callback); - this.canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; }); + canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; }); - - this.canvas.addEventListener("mousewheel", this.processMouseWheel.bind(this), false); - this.canvas.addEventListener("DOMMouseScroll", this.processMouseWheel.bind(this), false); + canvas.addEventListener("mousewheel", this.processMouseWheel.bind(this), false); + canvas.addEventListener("DOMMouseScroll", this.processMouseWheel.bind(this), false); //touch events //if( 'touchstart' in document.documentElement ) { //alert("doo"); - this.canvas.addEventListener("touchstart", this.touchHandler, true); - this.canvas.addEventListener("touchmove", this.touchHandler, true); - this.canvas.addEventListener("touchend", this.touchHandler, true); - this.canvas.addEventListener("touchcancel", this.touchHandler, true); + canvas.addEventListener("touchstart", this.touchHandler, true); + canvas.addEventListener("touchmove", this.touchHandler, true); + canvas.addEventListener("touchend", this.touchHandler, true); + canvas.addEventListener("touchcancel", this.touchHandler, true); } //this.canvas.onselectstart = function () { return false; }; - this.canvas.addEventListener("keydown", function(e) { + canvas.addEventListener("keydown", function(e) { that.processKeyDown(e); }); - this.canvas.addEventListener("keyup", function(e) { + canvas.addEventListener("keyup", function(e) { that.processKeyUp(e); }); + + //droping files + canvas.ondragover = function () { console.log('hover'); return false; }; + canvas.ondragend = function () { console.log('out'); return false; }; + canvas.ondrop = function (e) { + e.preventDefault(); + that.adjustMouseEvent(e); + + var pos = [e.canvasX,e.canvasY]; + var node = that.graph.getNodeOnPos(pos[0],pos[1]); + if(!node) + return; + + if(!node.onDropFile) + return; + + var file = e.dataTransfer.files[0]; + var filename = file.name; + var ext = LGraphCanvas.getFileExtension( filename ); + //console.log(file); + + //prepare reader + var reader = new FileReader(); + reader.onload = function (event) { + //console.log(event.target); + var data = event.target.result; + node.onDropFile( data, filename, file ); + }; + + //read data + var type = file.type.split("/")[0]; + if(type == "text") + reader.readAsText(file); + else if (type == "image") + reader.readAsDataURL(file); + else + reader.readAsArrayBuffer(file); + + return false; + }; } +LGraphCanvas.getFileExtension = function (url) +{ + var question = url.indexOf("?"); + if(question != -1) + url = url.substr(0,question); + var point = url.lastIndexOf("."); + if(point == -1) + return ""; + return url.substr(point+1).toLowerCase(); +} + +//this file allows to render the canvas using WebGL instead of Canvas2D +//this is useful if you plant to render 3D objects inside your nodes +LGraphCanvas.prototype.enableWebGL = function() +{ + if(typeof(GL) === undefined) + throw("litegl.js must be included to use a WebGL canvas"); + if(typeof(enableWebGLCanvas) === undefined) + throw("webglCanvas.js must be included to use this feature"); + + this.gl = this.ctx = enableWebGLCanvas(this.canvas); + this.ctx.webgl = true; + this.bgcanvas = this.canvas; + this.bgctx = this.gl; + + /* + GL.create({ canvas: this.bgcanvas }); + this.bgctx = enableWebGLCanvas( this.bgcanvas ); + window.gl = this.gl; + */ +} + + /* LGraphCanvas.prototype.UIinit = function() { @@ -2418,14 +2509,6 @@ LGraphCanvas.prototype.startRendering = function() if(this.is_rendering) window.requestAnimationFrame( renderFrame.bind(this) ); } - - - /* - this.rendering_timer_id = setInterval( function() { - //trace("Frame: " + new Date().getTime() ); - that.draw(); - }, 1000/50); - */ } /** @@ -2533,6 +2616,13 @@ LGraphCanvas.prototype.processMouseDown = function(e) } } + //Search for corner + if( !skip_action && isInsideRectangle(e.canvasX, e.canvasY, n.pos[0], n.pos[1] - LiteGraph.NODE_TITLE_HEIGHT ,LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT )) + { + n.collapse(); + skip_action = true; + } + //it wasnt clicked on the links boxes if(!skip_action) { @@ -2674,7 +2764,7 @@ LGraphCanvas.prototype.processMouseMove = function(e) if(slot != -1 && n.inputs[slot]) { var slot_type = n.inputs[slot].type; - if(slot_type == this.connecting_output.type || slot_type == "*" || this.connecting_output.type == "*") + if(slot_type == this.connecting_output.type || !slot_type || !this.connecting_output.type ) this._highlight_input = pos; } else @@ -2786,6 +2876,13 @@ LGraphCanvas.prototype.processMouseUp = function(e) { this.connecting_node.connect(this.connecting_slot, node, slot); } + else + { //not on top of an input + var input = node.getInputInfo(0); + //simple connect + if(input && !input.link && input.type == this.connecting_output.type) + this.connecting_node.connect(this.connecting_slot, node, 0); + } } } @@ -3068,10 +3165,10 @@ LGraphCanvas.prototype.setZoom = function(value, zooming_center) this.scale = value; - if(this.scale > 4) - this.scale = 4; - else if(this.scale < 0.1) - this.scale = 0.1; + if(this.scale > this.max_zoom) + this.scale = this.max_zoom; + else if(this.scale < this.min_zoom) + this.scale = this.min_zoom; var new_center = this.convertOffsetToCanvas( zooming_center ); var delta_offset = [new_center[0] - center[0], new_center[1] - center[1]]; @@ -3158,7 +3255,7 @@ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas) } if(this.dirty_bgcanvas || force_bgcanvas) - this.drawBgcanvas(); + this.drawBackCanvas(); if(this.dirty_canvas || force_canvas) this.drawFrontCanvas(); @@ -3169,7 +3266,15 @@ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas) LGraphCanvas.prototype.drawFrontCanvas = function() { + if(!this.ctx) + this.ctx = this.bgcanvas.getContext("2d"); var ctx = this.ctx; + if(!ctx) //maybe is using webgl... + return; + + if(ctx.start) + ctx.start(); + var canvas = this.canvas; //reset in case of error @@ -3190,7 +3295,14 @@ LGraphCanvas.prototype.drawFrontCanvas = function() ctx.clearRect(0,0,canvas.width, canvas.height); //draw bg canvas - ctx.drawImage(this.bgcanvas,0,0); + if(this.bgcanvas == this.canvas) + this.drawBackCanvas(); + else + ctx.drawImage(this.bgcanvas,0,0); + + //rendering + if(this.onRender) + this.onRender(canvas, ctx); //info widget if(this.show_info) @@ -3275,17 +3387,23 @@ LGraphCanvas.prototype.drawFrontCanvas = function() //this.dirty_area = null; } + if(ctx.finish) //this is a function I use in webgl renderer + ctx.finish(); + this.dirty_canvas = false; } -LGraphCanvas.prototype.drawBgcanvas = function() +LGraphCanvas.prototype.drawBackCanvas = function() { var canvas = this.bgcanvas; + if(!this.bgctx) + this.bgctx = this.bgcanvas.getContext("2d"); var ctx = this.bgctx; - + if(ctx.start) + ctx.start(); //clear - canvas.width = canvas.width; + ctx.clearRect(0,0,canvas.width, canvas.height); //reset in case of error ctx.restore(); @@ -3302,7 +3420,7 @@ LGraphCanvas.prototype.drawBgcanvas = function() if(this.background_image && this.scale > 0.5) { ctx.globalAlpha = (1.0 - 0.5 / this.scale) * this.editor_alpha; - ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false + ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false; if(!this._bg_img || this._bg_img.name != this.background_image) { this._bg_img = new Image(); @@ -3331,8 +3449,12 @@ LGraphCanvas.prototype.drawBgcanvas = function() } ctx.globalAlpha = 1.0; + ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = true; } + if(this.onBackgroundRender) + this.onBackgroundRender(canvas, ctx); + //DEBUG: show clipping area //ctx.fillStyle = "red"; //ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - this.visible_area[0] - 20, this.visible_area[3] - this.visible_area[1] - 20); @@ -3361,6 +3483,9 @@ LGraphCanvas.prototype.drawBgcanvas = function() ctx.restore(); } + if(ctx.finish) + ctx.finish(); + this.dirty_bgcanvas = false; this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas } @@ -3433,7 +3558,10 @@ LGraphCanvas.prototype.drawNode = function(node, ctx ) var shape = node.shape || "box"; var size = new Float32Array(node.size); if(node.flags.collapsed) - size.set([LiteGraph.NODE_COLLAPSED_WIDTH, 0]); + { + size[0] = LiteGraph.NODE_COLLAPSED_WIDTH; + size[1] = 0; + } //Start clipping if(node.flags.clip_area) @@ -3586,27 +3714,30 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo var shape = node.shape || "box"; if(shape == "box") { + ctx.beginPath(); + ctx.rect(0,no_title ? 0 : -title_height, size[0]+1, no_title ? size[1] : size[1] + title_height); + ctx.fill(); + ctx.shadowColor = "transparent"; + if(selected) { ctx.strokeStyle = "#CCC"; - ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) ); + ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) - 1); ctx.strokeStyle = fgcolor; } - - ctx.beginPath(); - ctx.rect(0,no_title ? 0.5 : -title_height + 0.5,size[0]+1, no_title ? size[1] : size[1] + title_height); } else if (node.shape == "round") { ctx.roundRect(0,no_title ? 0 : -title_height,size[0], no_title ? size[1] : size[1] + title_height, 10); + ctx.fill(); } else if (node.shape == "circle") { ctx.beginPath(); ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2); + ctx.fill(); } - ctx.fill(); ctx.shadowColor = "transparent"; //ctx.stroke(); @@ -3630,15 +3761,16 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo if(shape == "box") { ctx.beginPath(); - ctx.fillRect(0,-title_height,size[0]+1,title_height); - ctx.stroke(); + ctx.rect(0, -title_height, size[0]+1, title_height); + ctx.fill() + //ctx.stroke(); } else if (shape == "round") { ctx.roundRect(0,-title_height,size[0], title_height,10,0); //ctx.fillRect(0,8,size[0],NODE_TITLE_HEIGHT - 12); ctx.fill(); - ctx.stroke(); + //ctx.stroke(); } //box @@ -3654,9 +3786,9 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo //title text ctx.font = this.title_text_font; var title = node.getTitle(); - if(title && this.scale > 0.8) + if(title && this.scale > 0.5) { - ctx.fillStyle = "#222"; + ctx.fillStyle = LiteGraph.NODE_TITLE_COLOR; ctx.fillText( title, 16, 13 - title_height ); } } @@ -4160,15 +4292,18 @@ LGraphCanvas.prototype.getCanvasMenuOptions = function() //{content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll } ]; - if(this._graph_stack) + if(this._graph_stack && this._graph_stack.length > 0) options = [{content:"Close subgraph", callback: this.closeSubgraph.bind(this) },null].concat(options); } if(this.getExtraMenuOptions) { var extra = this.getExtraMenuOptions(this); - extra.push(null); - options = extra.concat( options ); + if(extra) + { + extra.push(null); + options = extra.concat( options ); + } } return options; @@ -4195,8 +4330,11 @@ LGraphCanvas.prototype.getNodeMenuOptions = function(node) if(node.getExtraMenuOptions) { var extra = node.getExtraMenuOptions(this); - extra.push(null); - options = extra.concat( options ); + if(extra) + { + extra.push(null); + options = extra.concat( options ); + } } if( node.clonable !== false ) @@ -4520,14 +4658,35 @@ LiteGraph.closeAllContextualMenus = function() result[i].parentNode.removeChild( result[i] ); } -LiteGraph.extendClass = function(origin, target) +LiteGraph.extendClass = function ( target, origin ) { for(var i in origin) //copy class properties + { + if(target.hasOwnProperty(i)) + continue; target[i] = origin[i]; + } + if(origin.prototype) //copy prototype properties - for(var i in origin.prototype) - target.prototype[i] = origin.prototype[i]; -} + for(var i in origin.prototype) //only enumerables + { + if(!origin.prototype.hasOwnProperty(i)) + continue; + + if(target.prototype.hasOwnProperty(i)) //avoid overwritting existing ones + continue; + + //copy getters + if(origin.prototype.__lookupGetter__(i)) + target.prototype.__defineGetter__(i, origin.prototype.__lookupGetter__(i)); + else + target.prototype[i] = origin.prototype[i]; + + //and setters + if(origin.prototype.__lookupSetter__(i)) + target.prototype.__defineSetter__(i, origin.prototype.__lookupSetter__(i)); + } +} /* LiteGraph.createNodetypeWrapper = function( class_object ) diff --git a/index.html b/index.html index 2ac0f7556..7cd65d98d 100644 --- a/index.html +++ b/index.html @@ -38,7 +38,38 @@

Usage

-

Examples

+

Include the library

+ 
+<script type="text/javascript" src="../src/litegraph.js"></script>
+ +

Create a graph

+ 
+var graph = new LGraph();
+ +

Create a canvas renderer

+ 
+var canvas = new LGraphCanvas("#mycanvas");
+ +

Add some nodes to the graph

+ 
+var node_const = LiteGraph.createNode("basic/const");
+node_const.pos = [200,200];
+graph.add(node_const);
+node_const.setValue(4.5);
+
+var node_watch = LiteGraph.createNode("basic/watch");
+node_watch.pos = [700,200];
+graph.add(node_watch);
+ +

Connect them

+ 
+node_const.connect(0, node_watch, 0 );
+ +

Run the graph

+ 
+graph.start();
+ +

Example of editor

diff --git a/src/litegraph.js b/src/litegraph.js index bd2da5e2f..a33104645 100644 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -19,6 +19,7 @@ var LiteGraph = { NODE_COLLAPSED_RADIUS: 10, NODE_COLLAPSED_WIDTH: 80, CANVAS_GRID_SIZE: 10, + NODE_TITLE_COLOR: "#222", NODE_DEFAULT_COLOR: "#999", NODE_DEFAULT_BGCOLOR: "#444", NODE_DEFAULT_BOXCOLOR: "#AEF", @@ -27,6 +28,8 @@ var LiteGraph = { DEFAULT_POSITION: [100,100],//default node position node_images_path: "", + proxy: null, //used to redirect calls + debug: false, throw_errors: true, registered_node_types: {}, @@ -88,6 +91,7 @@ var LiteGraph = { node.type = type; if(!node.title) node.title = title; + if(!node.properties) node.properties = {}; if(!node.flags) node.flags = {}; if(!node.size) node.size = node.computeSize(); if(!node.pos) node.pos = LiteGraph.DEFAULT_POSITION.concat(); @@ -793,8 +797,11 @@ LGraph.prototype.getGlobalInputData = function(name) } //rename the global input -LGraph.prototype.renameGlobalInput = function(old_name, name, data) +LGraph.prototype.renameGlobalInput = function(old_name, name) { + if(name == old_name) + return; + if(!this.global_inputs[old_name]) return false; @@ -814,6 +821,19 @@ LGraph.prototype.renameGlobalInput = function(old_name, name, data) this.onGlobalsChange(); } +LGraph.prototype.changeGlobalInputType = function(name, type) +{ + if(!this.global_inputs[name]) + return false; + + if(this.global_inputs[name].type == type) + return; + + this.global_inputs[name].type = type; + if(this.onGlobalInputTypeChanged) + this.onGlobalInputTypeChanged(name, type); +} + LGraph.prototype.removeGlobalInput = function(name) { if(!this.global_inputs[name]) @@ -861,7 +881,7 @@ LGraph.prototype.getGlobalOutputData = function(name) //rename the global output -LGraph.prototype.renameGlobalOutput = function(old_name, name, data) +LGraph.prototype.renameGlobalOutput = function(old_name, name) { if(!this.global_outputs[old_name]) return false; @@ -882,6 +902,19 @@ LGraph.prototype.renameGlobalOutput = function(old_name, name, data) this.onGlobalsChange(); } +LGraph.prototype.changeGlobalOutputType = function(name, type) +{ + if(!this.global_outputs[name]) + return false; + + if(this.global_outputs[name].type == type) + return; + + this.global_outputs[name].type = type; + if(this.onGlobalOutputTypeChanged) + this.onGlobalOutputTypeChanged(name, type); +} + LGraph.prototype.removeGlobalOutput = function(name) { if(!this.global_outputs[name]) @@ -1091,6 +1124,7 @@ LGraph.prototype.onNodeTrace = function(node, msg, color) + onSerialize + onSelected + onDeselected + + onDropFile */ /** @@ -1100,6 +1134,11 @@ LGraph.prototype.onNodeTrace = function(node, msg, color) */ function LGraphNode(title) +{ + this._ctor(); +} + +LGraphNode.prototype._ctor = function( title ) { this.title = title || "Unnamed"; this.size = [LiteGraph.NODE_WIDTH,60]; @@ -1115,6 +1154,7 @@ function LGraphNode(title) this.connections = []; //local data + this.properties = {}; this.data = null; //persistent local data this.flags = { //skip_title_render: true, @@ -1132,6 +1172,14 @@ LGraphNode.prototype.configure = function(info) { if(j == "console") continue; + if(j == "properties") + { + //i dont want to clone properties, I want to reuse the old container + for(var k in info.properties) + this.properties[k] = info.properties[k]; + continue; + } + if(info[j] == null) continue; else if (typeof(info[j]) == 'object') //object @@ -1223,46 +1271,9 @@ LGraphNode.prototype.clone = function() delete data["id"]; node.configure(data); - /* - node.size = this.size.concat(); - if(this.inputs) - for(var i = 0, l = this.inputs.length; i < l; ++i) - { - if(node.findInputSlot( this.inputs[i].name ) == -1) - node.addInput( this.inputs[i].name, this.inputs[i].type ); - } - - if(this.outputs) - for(var i = 0, l = this.outputs.length; i < l; ++i) - { - if(node.findOutputSlot( this.outputs[i].name ) == -1) - node.addOutput( this.outputs[i].name, this.outputs[i].type ); - } - */ - return node; } -//reduced version of objectivize: NOT FINISHED -/* -LGraphNode.prototype.reducedObjectivize = function() -{ - var o = this.objectivize(); - - var type = LiteGraph.getNodeType(o.type); - - if(type.title == o.title) - delete o["title"]; - - if(type.size && compareObjects(o.size,type.size)) - delete o["size"]; - - if(type.properties && compareObjects(o.properties, type.properties)) - delete o["properties"]; - - return o; -} -*/ /** * serialize and stringify @@ -1470,7 +1481,7 @@ LGraphNode.prototype.removeOutput = function(slot) * @method addInput * @param {string} name * @param {string} type string defining the input type ("vec3","number",...) -* @param {Object} extra_info this can be used to have special properties of an input (special color, position, etc) +* @param {Object} extra_info this can be used to have special properties of an input (label, color, position, etc) */ LGraphNode.prototype.addInput = function(name,type,extra_info) { @@ -1496,7 +1507,7 @@ LGraphNode.prototype.addInputs = function(array) for(var i in array) { var info = array[i]; - var o = {name:info[0],type:info[1],link:null}; + var o = {name:info[0], type:info[1], link:null}; if(array[2]) for(var j in info[2]) o[j] = info[2][j]; @@ -1547,7 +1558,7 @@ LGraphNode.prototype.addConnection = function(name,type,pos,direction) LGraphNode.prototype.computeSize = function(minHeight) { var rows = Math.max( this.inputs ? this.inputs.length : 1, this.outputs ? this.outputs.length : 1); - var size = [0,0]; + var size = new Float32Array([0,0]); size[1] = rows * 14 + 6; if(!this.inputs || this.inputs.length == 0 || !this.outputs || this.outputs.length == 0) size[0] = LiteGraph.NODE_WIDTH * 0.5; @@ -1681,8 +1692,8 @@ LGraphNode.prototype.connect = function(slot, node, target_slot) output.links = []; output.links.push({id:node.id, slot: -1}); } - else if(output.type == 0 || //generic output - node.inputs[target_slot].type == 0 || //generic input + else if( !output.type || //generic output + !node.inputs[target_slot].type || //generic input output.type == node.inputs[target_slot].type) //same type { //info: link structure => [ 0:link_id, 1:start_node_id, 2:start_slot, 3:end_node_id, 4:end_slot ] @@ -2005,7 +2016,7 @@ LGraphNode.prototype.localToScreen = function(x,y, graphcanvas) * @param {HTMLCanvas} canvas the canvas where you want to render (it accepts a selector in string format or the canvas itself) * @param {LGraph} graph [optional] */ -function LGraphCanvas(canvas, graph) +function LGraphCanvas(canvas, graph, skip_render) { //if(graph === undefined) // throw ("No graph assigned"); @@ -2016,6 +2027,9 @@ function LGraphCanvas(canvas, graph) if(!canvas) throw("no canvas found"); + this.max_zoom = 10; + this.min_zoom = 0.1; + //link canvas and graph if(graph) graph.attachCanvas(this); @@ -2023,7 +2037,8 @@ function LGraphCanvas(canvas, graph) this.setCanvas(canvas); this.clear(); - this.startRendering(); + if(!skip_render) + this.startRendering(); } LGraphCanvas.link_type_colors = {'number':"#AAC",'node':"#DCA"}; @@ -2173,8 +2188,8 @@ LGraphCanvas.prototype.setCanvas = function(canvas) this.canvas = canvas; //this.canvas.tabindex = "1000"; - this.canvas.className += " lgraphcanvas"; - this.canvas.data = this; + canvas.className += " lgraphcanvas"; + canvas.data = this; //bg canvas: used for non changing stuff this.bgcanvas = null; @@ -2185,47 +2200,123 @@ LGraphCanvas.prototype.setCanvas = function(canvas) this.bgcanvas.height = this.canvas.height; } - if(this.canvas.getContext == null) + if(canvas.getContext == null) { throw("This browser doesnt support Canvas"); } - this.ctx = this.canvas.getContext("2d"); - this.bgctx = this.bgcanvas.getContext("2d"); + var ctx = this.ctx = canvas.getContext("2d"); + if(ctx == null) + { + console.warn("This canvas seems to be WebGL, enabling WebGL renderer"); + this.enableWebGL(); + } //input: (move and up could be unbinded) this._mousemove_callback = this.processMouseMove.bind(this); this._mouseup_callback = this.processMouseUp.bind(this); - this.canvas.addEventListener("mousedown", this.processMouseDown.bind(this), true ); //down do not need to store the binded - this.canvas.addEventListener("mousemove", this._mousemove_callback); + canvas.addEventListener("mousedown", this.processMouseDown.bind(this), true ); //down do not need to store the binded + canvas.addEventListener("mousemove", this._mousemove_callback); - this.canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; }); + canvas.addEventListener("contextmenu", function(e) { e.preventDefault(); return false; }); - - this.canvas.addEventListener("mousewheel", this.processMouseWheel.bind(this), false); - this.canvas.addEventListener("DOMMouseScroll", this.processMouseWheel.bind(this), false); + canvas.addEventListener("mousewheel", this.processMouseWheel.bind(this), false); + canvas.addEventListener("DOMMouseScroll", this.processMouseWheel.bind(this), false); //touch events //if( 'touchstart' in document.documentElement ) { //alert("doo"); - this.canvas.addEventListener("touchstart", this.touchHandler, true); - this.canvas.addEventListener("touchmove", this.touchHandler, true); - this.canvas.addEventListener("touchend", this.touchHandler, true); - this.canvas.addEventListener("touchcancel", this.touchHandler, true); + canvas.addEventListener("touchstart", this.touchHandler, true); + canvas.addEventListener("touchmove", this.touchHandler, true); + canvas.addEventListener("touchend", this.touchHandler, true); + canvas.addEventListener("touchcancel", this.touchHandler, true); } //this.canvas.onselectstart = function () { return false; }; - this.canvas.addEventListener("keydown", function(e) { + canvas.addEventListener("keydown", function(e) { that.processKeyDown(e); }); - this.canvas.addEventListener("keyup", function(e) { + canvas.addEventListener("keyup", function(e) { that.processKeyUp(e); }); + + //droping files + canvas.ondragover = function () { console.log('hover'); return false; }; + canvas.ondragend = function () { console.log('out'); return false; }; + canvas.ondrop = function (e) { + e.preventDefault(); + that.adjustMouseEvent(e); + + var pos = [e.canvasX,e.canvasY]; + var node = that.graph.getNodeOnPos(pos[0],pos[1]); + if(!node) + return; + + if(!node.onDropFile) + return; + + var file = e.dataTransfer.files[0]; + var filename = file.name; + var ext = LGraphCanvas.getFileExtension( filename ); + //console.log(file); + + //prepare reader + var reader = new FileReader(); + reader.onload = function (event) { + //console.log(event.target); + var data = event.target.result; + node.onDropFile( data, filename, file ); + }; + + //read data + var type = file.type.split("/")[0]; + if(type == "text") + reader.readAsText(file); + else if (type == "image") + reader.readAsDataURL(file); + else + reader.readAsArrayBuffer(file); + + return false; + }; } +LGraphCanvas.getFileExtension = function (url) +{ + var question = url.indexOf("?"); + if(question != -1) + url = url.substr(0,question); + var point = url.lastIndexOf("."); + if(point == -1) + return ""; + return url.substr(point+1).toLowerCase(); +} + +//this file allows to render the canvas using WebGL instead of Canvas2D +//this is useful if you plant to render 3D objects inside your nodes +LGraphCanvas.prototype.enableWebGL = function() +{ + if(typeof(GL) === undefined) + throw("litegl.js must be included to use a WebGL canvas"); + if(typeof(enableWebGLCanvas) === undefined) + throw("webglCanvas.js must be included to use this feature"); + + this.gl = this.ctx = enableWebGLCanvas(this.canvas); + this.ctx.webgl = true; + this.bgcanvas = this.canvas; + this.bgctx = this.gl; + + /* + GL.create({ canvas: this.bgcanvas }); + this.bgctx = enableWebGLCanvas( this.bgcanvas ); + window.gl = this.gl; + */ +} + + /* LGraphCanvas.prototype.UIinit = function() { @@ -2324,14 +2415,6 @@ LGraphCanvas.prototype.startRendering = function() if(this.is_rendering) window.requestAnimationFrame( renderFrame.bind(this) ); } - - - /* - this.rendering_timer_id = setInterval( function() { - //trace("Frame: " + new Date().getTime() ); - that.draw(); - }, 1000/50); - */ } /** @@ -2439,6 +2522,13 @@ LGraphCanvas.prototype.processMouseDown = function(e) } } + //Search for corner + if( !skip_action && isInsideRectangle(e.canvasX, e.canvasY, n.pos[0], n.pos[1] - LiteGraph.NODE_TITLE_HEIGHT ,LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_TITLE_HEIGHT )) + { + n.collapse(); + skip_action = true; + } + //it wasnt clicked on the links boxes if(!skip_action) { @@ -2580,7 +2670,7 @@ LGraphCanvas.prototype.processMouseMove = function(e) if(slot != -1 && n.inputs[slot]) { var slot_type = n.inputs[slot].type; - if(slot_type == this.connecting_output.type || slot_type == "*" || this.connecting_output.type == "*") + if(slot_type == this.connecting_output.type || !slot_type || !this.connecting_output.type ) this._highlight_input = pos; } else @@ -2692,6 +2782,13 @@ LGraphCanvas.prototype.processMouseUp = function(e) { this.connecting_node.connect(this.connecting_slot, node, slot); } + else + { //not on top of an input + var input = node.getInputInfo(0); + //simple connect + if(input && !input.link && input.type == this.connecting_output.type) + this.connecting_node.connect(this.connecting_slot, node, 0); + } } } @@ -2974,10 +3071,10 @@ LGraphCanvas.prototype.setZoom = function(value, zooming_center) this.scale = value; - if(this.scale > 4) - this.scale = 4; - else if(this.scale < 0.1) - this.scale = 0.1; + if(this.scale > this.max_zoom) + this.scale = this.max_zoom; + else if(this.scale < this.min_zoom) + this.scale = this.min_zoom; var new_center = this.convertOffsetToCanvas( zooming_center ); var delta_offset = [new_center[0] - center[0], new_center[1] - center[1]]; @@ -3064,7 +3161,7 @@ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas) } if(this.dirty_bgcanvas || force_bgcanvas) - this.drawBgcanvas(); + this.drawBackCanvas(); if(this.dirty_canvas || force_canvas) this.drawFrontCanvas(); @@ -3075,7 +3172,15 @@ LGraphCanvas.prototype.draw = function(force_canvas, force_bgcanvas) LGraphCanvas.prototype.drawFrontCanvas = function() { + if(!this.ctx) + this.ctx = this.bgcanvas.getContext("2d"); var ctx = this.ctx; + if(!ctx) //maybe is using webgl... + return; + + if(ctx.start) + ctx.start(); + var canvas = this.canvas; //reset in case of error @@ -3096,7 +3201,14 @@ LGraphCanvas.prototype.drawFrontCanvas = function() ctx.clearRect(0,0,canvas.width, canvas.height); //draw bg canvas - ctx.drawImage(this.bgcanvas,0,0); + if(this.bgcanvas == this.canvas) + this.drawBackCanvas(); + else + ctx.drawImage(this.bgcanvas,0,0); + + //rendering + if(this.onRender) + this.onRender(canvas, ctx); //info widget if(this.show_info) @@ -3181,17 +3293,23 @@ LGraphCanvas.prototype.drawFrontCanvas = function() //this.dirty_area = null; } + if(ctx.finish) //this is a function I use in webgl renderer + ctx.finish(); + this.dirty_canvas = false; } -LGraphCanvas.prototype.drawBgcanvas = function() +LGraphCanvas.prototype.drawBackCanvas = function() { var canvas = this.bgcanvas; + if(!this.bgctx) + this.bgctx = this.bgcanvas.getContext("2d"); var ctx = this.bgctx; - + if(ctx.start) + ctx.start(); //clear - canvas.width = canvas.width; + ctx.clearRect(0,0,canvas.width, canvas.height); //reset in case of error ctx.restore(); @@ -3208,7 +3326,7 @@ LGraphCanvas.prototype.drawBgcanvas = function() if(this.background_image && this.scale > 0.5) { ctx.globalAlpha = (1.0 - 0.5 / this.scale) * this.editor_alpha; - ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false + ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = false; if(!this._bg_img || this._bg_img.name != this.background_image) { this._bg_img = new Image(); @@ -3237,8 +3355,12 @@ LGraphCanvas.prototype.drawBgcanvas = function() } ctx.globalAlpha = 1.0; + ctx.webkitImageSmoothingEnabled = ctx.mozImageSmoothingEnabled = ctx.imageSmoothingEnabled = true; } + if(this.onBackgroundRender) + this.onBackgroundRender(canvas, ctx); + //DEBUG: show clipping area //ctx.fillStyle = "red"; //ctx.fillRect( this.visible_area[0] + 10, this.visible_area[1] + 10, this.visible_area[2] - this.visible_area[0] - 20, this.visible_area[3] - this.visible_area[1] - 20); @@ -3267,6 +3389,9 @@ LGraphCanvas.prototype.drawBgcanvas = function() ctx.restore(); } + if(ctx.finish) + ctx.finish(); + this.dirty_bgcanvas = false; this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas } @@ -3339,7 +3464,10 @@ LGraphCanvas.prototype.drawNode = function(node, ctx ) var shape = node.shape || "box"; var size = new Float32Array(node.size); if(node.flags.collapsed) - size.set([LiteGraph.NODE_COLLAPSED_WIDTH, 0]); + { + size[0] = LiteGraph.NODE_COLLAPSED_WIDTH; + size[1] = 0; + } //Start clipping if(node.flags.clip_area) @@ -3492,27 +3620,30 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo var shape = node.shape || "box"; if(shape == "box") { + ctx.beginPath(); + ctx.rect(0,no_title ? 0 : -title_height, size[0]+1, no_title ? size[1] : size[1] + title_height); + ctx.fill(); + ctx.shadowColor = "transparent"; + if(selected) { ctx.strokeStyle = "#CCC"; - ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) ); + ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) - 1); ctx.strokeStyle = fgcolor; } - - ctx.beginPath(); - ctx.rect(0,no_title ? 0.5 : -title_height + 0.5,size[0]+1, no_title ? size[1] : size[1] + title_height); } else if (node.shape == "round") { ctx.roundRect(0,no_title ? 0 : -title_height,size[0], no_title ? size[1] : size[1] + title_height, 10); + ctx.fill(); } else if (node.shape == "circle") { ctx.beginPath(); ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2); + ctx.fill(); } - ctx.fill(); ctx.shadowColor = "transparent"; //ctx.stroke(); @@ -3536,15 +3667,16 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo if(shape == "box") { ctx.beginPath(); - ctx.fillRect(0,-title_height,size[0]+1,title_height); - ctx.stroke(); + ctx.rect(0, -title_height, size[0]+1, title_height); + ctx.fill() + //ctx.stroke(); } else if (shape == "round") { ctx.roundRect(0,-title_height,size[0], title_height,10,0); //ctx.fillRect(0,8,size[0],NODE_TITLE_HEIGHT - 12); ctx.fill(); - ctx.stroke(); + //ctx.stroke(); } //box @@ -3560,9 +3692,9 @@ LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolo //title text ctx.font = this.title_text_font; var title = node.getTitle(); - if(title && this.scale > 0.8) + if(title && this.scale > 0.5) { - ctx.fillStyle = "#222"; + ctx.fillStyle = LiteGraph.NODE_TITLE_COLOR; ctx.fillText( title, 16, 13 - title_height ); } } @@ -4066,15 +4198,18 @@ LGraphCanvas.prototype.getCanvasMenuOptions = function() //{content:"Collapse All", callback: LGraphCanvas.onMenuCollapseAll } ]; - if(this._graph_stack) + if(this._graph_stack && this._graph_stack.length > 0) options = [{content:"Close subgraph", callback: this.closeSubgraph.bind(this) },null].concat(options); } if(this.getExtraMenuOptions) { var extra = this.getExtraMenuOptions(this); - extra.push(null); - options = extra.concat( options ); + if(extra) + { + extra.push(null); + options = extra.concat( options ); + } } return options; @@ -4101,8 +4236,11 @@ LGraphCanvas.prototype.getNodeMenuOptions = function(node) if(node.getExtraMenuOptions) { var extra = node.getExtraMenuOptions(this); - extra.push(null); - options = extra.concat( options ); + if(extra) + { + extra.push(null); + options = extra.concat( options ); + } } if( node.clonable !== false ) @@ -4426,14 +4564,35 @@ LiteGraph.closeAllContextualMenus = function() result[i].parentNode.removeChild( result[i] ); } -LiteGraph.extendClass = function(origin, target) +LiteGraph.extendClass = function ( target, origin ) { for(var i in origin) //copy class properties + { + if(target.hasOwnProperty(i)) + continue; target[i] = origin[i]; + } + if(origin.prototype) //copy prototype properties - for(var i in origin.prototype) - target.prototype[i] = origin.prototype[i]; -} + for(var i in origin.prototype) //only enumerables + { + if(!origin.prototype.hasOwnProperty(i)) + continue; + + if(target.prototype.hasOwnProperty(i)) //avoid overwritting existing ones + continue; + + //copy getters + if(origin.prototype.__lookupGetter__(i)) + target.prototype.__defineGetter__(i, origin.prototype.__lookupGetter__(i)); + else + target.prototype[i] = origin.prototype[i]; + + //and setters + if(origin.prototype.__lookupSetter__(i)) + target.prototype.__defineSetter__(i, origin.prototype.__lookupSetter__(i)); + } +} /* LiteGraph.createNodetypeWrapper = function( class_object ) diff --git a/src/nodes/base.js b/src/nodes/base.js index f6104c0b2..a26779b7a 100644 --- a/src/nodes/base.js +++ b/src/nodes/base.js @@ -2,78 +2,27 @@ (function(){ -//Input for a subgraph -function GlobalInput() -{ - this.title = "Input"; - - //random name to avoid problems with other outputs when added - var genname = "input_" + (Math.random()*1000).toFixed(); - this.properties = { name: genname, type: "number" }; - this.addOutput("value",0); -} - -GlobalInput.title = "Input"; -GlobalInput.desc = "Input of the graph"; - -GlobalInput.prototype.onAdded = function() -{ - this.graph.addGlobalInput( this.properties.name, this.properties.type ); -} - -GlobalInput.prototype.onExecute = function() -{ - var name = this.properties.name; - - //read from global input - var data = this.graph.global_inputs[name]; - if(!data) return; - - //put through output - this.setOutputData(0,data.value); -} - -LiteGraph.registerNodeType("graph/input", GlobalInput); - - -//Output for a subgraph -function GlobalOutput() -{ - this.title = "Output"; - - //random name to avoid problems with other outputs when added - var genname = "output_" + (Math.random()*1000).toFixed(); - this.properties = { name: genname, type: "number" }; - this.addInput("value","number"); -} - -GlobalOutput.title = "Ouput"; -GlobalOutput.desc = "Output of the graph"; - -GlobalOutput.prototype.onAdded = function() -{ - var name = this.graph.addGlobalOutput( this.properties.name, this.properties.type ); -} - -GlobalOutput.prototype.onExecute = function() -{ - this.graph.setGlobalOutputData( this.properties.name, this.getInputData(0) ); -} - -LiteGraph.registerNodeType("graph/output", GlobalOutput); - - //Subgraph: a node that contains a graph function Subgraph() { var that = this; + this.size = [120,60]; + + //create inner graph this.subgraph = new LGraph(); this.subgraph._subgraph_node = this; this.subgraph._is_subgraph = true; - this.subgraph.onGlobalInputAdded = this.onSubgraphNewGlobalInput.bind(this); - this.subgraph.onGlobalOutputAdded = this.onSubgraphNewGlobalOutput.bind(this); - this.bgcolor = "#FA3"; + this.subgraph.onGlobalInputAdded = this.onSubgraphNewGlobalInput.bind(this); + this.subgraph.onGlobalInputRenamed = this.onSubgraphRenamedGlobalInput.bind(this); + this.subgraph.onGlobalInputTypeChanged = this.onSubgraphTypeChangeGlobalInput.bind(this); + + this.subgraph.onGlobalOutputAdded = this.onSubgraphNewGlobalOutput.bind(this); + this.subgraph.onGlobalOutputRenamed = this.onSubgraphRenamedGlobalOutput.bind(this); + this.subgraph.onGlobalOutputTypeChanged = this.onSubgraphTypeChangeGlobalOutput.bind(this); + + + this.bgcolor = "#940"; } Subgraph.title = "Subgraph"; @@ -81,14 +30,55 @@ Subgraph.desc = "Graph inside a node"; Subgraph.prototype.onSubgraphNewGlobalInput = function(name, type) { + //add input to the node this.addInput(name, type); } +Subgraph.prototype.onSubgraphRenamedGlobalInput = function(oldname, name) +{ + var slot = this.findInputSlot( oldname ); + if(slot == -1) + return; + var info = this.getInputInfo(slot); + info.name = name; +} + +Subgraph.prototype.onSubgraphTypeChangeGlobalInput = function(name, type) +{ + var slot = this.findInputSlot( name ); + if(slot == -1) + return; + var info = this.getInputInfo(slot); + info.type = type; +} + + Subgraph.prototype.onSubgraphNewGlobalOutput = function(name, type) { + //add output to the node this.addOutput(name, type); } + +Subgraph.prototype.onSubgraphRenamedGlobalOutput = function(oldname, name) +{ + var slot = this.findOutputSlot( oldname ); + if(slot == -1) + return; + var info = this.getOutputInfo(slot); + info.name = name; +} + +Subgraph.prototype.onSubgraphTypeChangeGlobalOutput = function(name, type) +{ + var slot = this.findOutputSlot( name ); + if(slot == -1) + return; + var info = this.getOutputInfo(slot); + info.type = type; +} + + Subgraph.prototype.getExtraMenuOptions = function(graphcanvas) { var that = this; @@ -136,10 +126,147 @@ Subgraph.prototype.serialize = function() return data; } +Subgraph.prototype.clone = function() +{ + var node = LiteGraph.createNode(this.type); + var data = this.serialize(); + delete data["id"]; + delete data["inputs"]; + delete data["outputs"]; + node.configure(data); + return node; +} + LiteGraph.registerNodeType("graph/subgraph", Subgraph); +//Input for a subgraph +function GlobalInput() +{ + + //random name to avoid problems with other outputs when added + var input_name = "input_" + (Math.random()*1000).toFixed(); + + this.addOutput(input_name, null ); + + this.properties = {name: input_name, type: null }; + + var that = this; + + Object.defineProperty(this.properties, "name", { + get: function() { + return input_name; + }, + set: function(v) { + if(v == "") + return; + + var info = that.getOutputInfo(0); + if(info.name == v) + return; + info.name = v; + if(that.graph) + that.graph.renameGlobalInput(input_name, v); + input_name = v; + }, + enumerable: true + }); + + Object.defineProperty(this.properties, "type", { + get: function() { return that.outputs[0].type; }, + set: function(v) { + that.outputs[0].type = v; + if(that.graph) + that.graph.changeGlobalInputType(input_name, that.outputs[0].type); + }, + enumerable: true + }); +} + +GlobalInput.title = "Input"; +GlobalInput.desc = "Input of the graph"; + +//When added to graph tell the graph this is a new global input +GlobalInput.prototype.onAdded = function() +{ + this.graph.addGlobalInput( this.properties.name, this.properties.type ); +} + +GlobalInput.prototype.onExecute = function() +{ + var name = this.properties.name; + + //read from global input + var data = this.graph.global_inputs[name]; + if(!data) return; + + //put through output + this.setOutputData(0,data.value); +} + +LiteGraph.registerNodeType("graph/input", GlobalInput); + + + +//Output for a subgraph +function GlobalOutput() +{ + //random name to avoid problems with other outputs when added + var output_name = "output_" + (Math.random()*1000).toFixed(); + + this.addInput(output_name, null); + + this.properties = {name: output_name, type: null }; + + var that = this; + + Object.defineProperty(this.properties, "name", { + get: function() { + return output_name; + }, + set: function(v) { + if(v == "") + return; + + var info = that.getInputInfo(0); + if(info.name == v) + return; + info.name = v; + if(that.graph) + that.graph.renameGlobalOutput(output_name, v); + output_name = v; + }, + enumerable: true + }); + + Object.defineProperty(this.properties, "type", { + get: function() { return that.inputs[0].type; }, + set: function(v) { + that.inputs[0].type = v; + if(that.graph) + that.graph.changeGlobalInputType( output_name, that.inputs[0].type ); + }, + enumerable: true + }); +} + +GlobalOutput.title = "Ouput"; +GlobalOutput.desc = "Output of the graph"; + +GlobalOutput.prototype.onAdded = function() +{ + var name = this.graph.addGlobalOutput( this.properties.name, this.properties.type ); +} + +GlobalOutput.prototype.onExecute = function() +{ + this.graph.setGlobalOutputData( this.properties.name, this.getInputData(0) ); +} + +LiteGraph.registerNodeType("graph/output", GlobalOutput); + + //Constant function Constant() diff --git a/src/nodes/glfx.js b/src/nodes/glfx.js new file mode 100644 index 000000000..1603cfaa8 --- /dev/null +++ b/src/nodes/glfx.js @@ -0,0 +1,538 @@ +//Works with Litegl.js to create WebGL nodes +if(typeof(LiteGraph) != "undefined") +{ + + // Texture Lens ***************************************** + function LGraphFXLens() + { + this.addInput("Texture","Texture"); + this.addInput("Aberration","number"); + this.addInput("Distortion","number"); + this.addInput("Blur","number"); + this.addOutput("Texture","Texture"); + this.properties = { aberration:1.0, distortion: 1.0, blur: 1.0, precision: LGraphTexture.DEFAULT }; + + if(!LGraphFXLens._shader) + LGraphFXLens._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphFXLens.pixel_shader ); + } + + LGraphFXLens.title = "Lens"; + LGraphFXLens.desc = "Camera Lens distortion"; + LGraphFXLens.widgets_info = { + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphFXLens.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(this.properties.precision === LGraphTexture.PASS_THROUGH ) + { + this.setOutputData(0,tex); + return; + } + + if(!tex) return; + + this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision ); + + //iterations + var aberration = this.properties.aberration; + if( this.isInputConnected(1) ) + { + aberration = this.getInputData(1); + this.properties.aberration = aberration; + } + + var distortion = this.properties.distortion; + if( this.isInputConnected(2) ) + { + distortion = this.getInputData(2); + this.properties.distortion = distortion; + } + + var blur = this.properties.blur; + if( this.isInputConnected(3) ) + { + blur = this.getInputData(3); + this.properties.blur = blur; + } + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + var mesh = Mesh.getScreenQuad(); + var shader = LGraphFXLens._shader; + var camera = Renderer._current_camera; + + this._tex.drawTo( function() { + tex.bind(0); + shader.uniforms({u_texture:0, u_aberration: aberration, u_distortion: distortion, u_blur: blur }) + .draw(mesh); + }); + + this.setOutputData(0, this._tex); + } + + LGraphFXLens.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_camera_planes;\n\ + uniform float u_aberration;\n\ + uniform float u_distortion;\n\ + uniform float u_blur;\n\ + \n\ + void main() {\n\ + vec2 coord = v_coord;\n\ + float dist = distance(vec2(0.5), coord);\n\ + vec2 dist_coord = coord - vec2(0.5);\n\ + float percent = 1.0 + ((0.5 - dist) / 0.5) * u_distortion;\n\ + dist_coord *= percent;\n\ + coord = dist_coord + vec2(0.5);\n\ + vec4 color = texture2D(u_texture,coord, u_blur * dist);\n\ + color.r = texture2D(u_texture,vec2(0.5) + dist_coord * (1.0+0.01*u_aberration), u_blur * dist ).r;\n\ + color.b = texture2D(u_texture,vec2(0.5) + dist_coord * (1.0-0.01*u_aberration), u_blur * dist ).b;\n\ + gl_FragColor = color;\n\ + }\n\ + "; + /* + float normalized_tunable_sigmoid(float xs, float k)\n\ + {\n\ + xs = xs * 2.0 - 1.0;\n\ + float signx = sign(xs);\n\ + float absx = abs(xs);\n\ + return signx * ((-k - 1.0)*absx)/(2.0*(-2.0*k*absx+k-1.0)) + 0.5;\n\ + }\n\ + */ + + LiteGraph.registerNodeType("fx/lens", LGraphFXLens ); + window.LGraphFXLens = LGraphFXLens; + + //******************************************************* + + function LGraphFXBokeh() + { + this.addInput("Texture","Texture"); + this.addInput("Blurred","Texture"); + this.addInput("Mask","Texture"); + this.addInput("Threshold","number"); + this.addOutput("Texture","Texture"); + this.properties = { shape: "", size: 10, alpha: 1.0, threshold: 1.0, high_precision: false }; + } + + LGraphFXBokeh.title = "Bokeh"; + LGraphFXBokeh.desc = "applies an Bokeh effect"; + + LGraphFXBokeh.widgets_info = {"shape": { widget:"texture" }}; + + LGraphFXBokeh.prototype.onExecute = function() + { + var tex = this.getInputData(0); + var blurred_tex = this.getInputData(1); + var mask_tex = this.getInputData(2); + if(!tex || !mask_tex || !this.properties.shape) + { + this.setOutputData(0, tex); + return; + } + + if(!blurred_tex) + blurred_tex = tex; + + var shape_tex = LGraphTexture.getTexture( this.properties.shape ); + if(!shape_tex) + return; + + var threshold = this.properties.threshold; + if( this.isInputConnected(3) ) + { + threshold = this.getInputData(3); + this.properties.threshold = threshold; + } + + + var precision = gl.UNSIGNED_BYTE; + if(this.properties.high_precision) + precision = gl.half_float_ext ? gl.HALF_FLOAT_OES : gl.FLOAT; + if(!this._temp_texture || this._temp_texture.type != precision || + this._temp_texture.width != tex.width || this._temp_texture.height != tex.height) + this._temp_texture = new GL.Texture( tex.width, tex.height, { type: precision, format: gl.RGBA, filter: gl.LINEAR }); + + //iterations + var size = this.properties.size; + + var first_shader = LGraphFXBokeh._first_shader; + if(!first_shader) + first_shader = LGraphFXBokeh._first_shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphFXBokeh._first_pixel_shader ); + + var second_shader = LGraphFXBokeh._second_shader; + if(!second_shader) + second_shader = LGraphFXBokeh._second_shader = new GL.Shader( LGraphFXBokeh._second_vertex_shader, LGraphFXBokeh._second_pixel_shader ); + + var points_mesh = this._points_mesh; + if(!points_mesh || points_mesh._width != tex.width || points_mesh._height != tex.height || points_mesh._spacing != 2) + points_mesh = this.createPointsMesh( tex.width, tex.height, 2 ); + + var screen_mesh = Mesh.getScreenQuad(); + + var point_size = this.properties.size; + var min_light = this.properties.min_light; + var alpha = this.properties.alpha; + + gl.disable( gl.DEPTH_TEST ); + gl.disable( gl.BLEND ); + + this._temp_texture.drawTo( function() { + tex.bind(0); + blurred_tex.bind(1); + mask_tex.bind(2); + first_shader.uniforms({u_texture:0, u_texture_blur:1, u_mask: 2, u_texsize: [tex.width, tex.height] }) + .draw(screen_mesh); + }); + + this._temp_texture.drawTo( function() { + //clear because we use blending + //gl.clearColor(0.0,0.0,0.0,1.0); + //gl.clear( gl.COLOR_BUFFER_BIT ); + gl.enable( gl.BLEND ); + gl.blendFunc( gl.ONE, gl.ONE ); + + tex.bind(0); + shape_tex.bind(3); + second_shader.uniforms({u_texture:0, u_mask: 2, u_shape:3, u_alpha: alpha, u_threshold: threshold, u_pointSize: point_size, u_itexsize: [1.0/tex.width, 1.0/tex.height] }) + .draw(points_mesh, gl.POINTS); + }); + + this.setOutputData(0, this._temp_texture); + } + + LGraphFXBokeh.prototype.createPointsMesh = function(width, height, spacing) + { + var nwidth = Math.round(width / spacing); + var nheight = Math.round(height / spacing); + + var vertices = new Float32Array(nwidth * nheight * 2); + + var ny = -1; + var dx = 2/width * spacing; + var dy = 2/height * spacing; + for(var y = 0; y < nheight; ++y ) + { + var nx = -1; + for(var x = 0; x < nwidth; ++x ) + { + var pos = y*nwidth*2 + x*2; + vertices[pos] = nx; + vertices[pos+1] = ny; + nx += dx; + } + ny += dy; + } + + this._points_mesh = GL.Mesh.load({vertices2D: vertices}); + this._points_mesh._width = width; + this._points_mesh._height = height; + this._points_mesh._spacing = spacing; + + return this._points_mesh; + } + + /* + LGraphTextureBokeh._pixel_shader = "precision highp float;\n\ + varying vec2 a_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform sampler2D u_shape;\n\ + \n\ + void main() {\n\ + vec4 color = texture2D( u_texture, gl_PointCoord );\n\ + color *= v_color * u_alpha;\n\ + gl_FragColor = color;\n\ + }\n"; + */ + + LGraphFXBokeh._first_pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform sampler2D u_texture_blur;\n\ + uniform sampler2D u_mask;\n\ + \n\ + void main() {\n\ + vec4 color = texture2D(u_texture, v_coord);\n\ + vec4 blurred_color = texture2D(u_texture_blur, v_coord);\n\ + float mask = texture2D(u_mask, v_coord).x;\n\ + gl_FragColor = mix(color, blurred_color, mask);\n\ + }\n\ + "; + + LGraphFXBokeh._second_vertex_shader = "precision highp float;\n\ + attribute vec2 a_vertex2D;\n\ + varying vec4 v_color;\n\ + uniform sampler2D u_texture;\n\ + uniform sampler2D u_mask;\n\ + uniform vec2 u_itexsize;\n\ + uniform float u_pointSize;\n\ + uniform float u_threshold;\n\ + void main() {\n\ + vec2 coord = a_vertex2D * 0.5 + 0.5;\n\ + v_color = texture2D( u_texture, coord );\n\ + v_color += texture2D( u_texture, coord + vec2(u_itexsize.x, 0.0) );\n\ + v_color += texture2D( u_texture, coord + vec2(0.0, u_itexsize.y));\n\ + v_color += texture2D( u_texture, coord + u_itexsize);\n\ + v_color *= 0.25;\n\ + float mask = texture2D(u_mask, coord).x;\n\ + float luminance = length(v_color) * mask;\n\ + /*luminance /= (u_pointSize*u_pointSize)*0.01 */;\n\ + luminance -= u_threshold;\n\ + if(luminance < 0.0)\n\ + {\n\ + gl_Position.x = -100.0;\n\ + return;\n\ + }\n\ + gl_PointSize = u_pointSize;\n\ + gl_Position = vec4(a_vertex2D,0.0,1.0);\n\ + }\n\ + "; + + LGraphFXBokeh._second_pixel_shader = "precision highp float;\n\ + varying vec4 v_color;\n\ + uniform sampler2D u_shape;\n\ + uniform float u_alpha;\n\ + \n\ + void main() {\n\ + vec4 color = texture2D( u_shape, gl_PointCoord );\n\ + color *= v_color * u_alpha;\n\ + gl_FragColor = color;\n\ + }\n"; + + + LiteGraph.registerNodeType("fx/bokeh", LGraphFXBokeh ); + window.LGraphFXBokeh = LGraphFXBokeh; + + //************************************************ + + function LGraphFXGeneric() + { + this.addInput("Texture","Texture"); + this.addInput("value1","number"); + this.addInput("value2","number"); + this.addOutput("Texture","Texture"); + this.properties = { fx: "halftone", value1: 1, value2: 1, precision: LGraphTexture.DEFAULT }; + } + + LGraphFXGeneric.title = "FX"; + LGraphFXGeneric.desc = "applies an FX from a list"; + + LGraphFXGeneric.widgets_info = { + "fx": { widget:"combo", values:["halftone","pixelate","lowpalette","noise"] }, + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + LGraphFXGeneric.shaders = {}; + + LGraphFXGeneric.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(this.properties.precision === LGraphTexture.PASS_THROUGH ) + { + this.setOutputData(0,tex); + return; + } + + if(!tex) return; + + this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision ); + + //iterations + var value1 = this.properties.value1; + if( this.isInputConnected(1) ) + { + value1 = this.getInputData(1); + this.properties.value1 = value1; + } + + var value2 = this.properties.value2; + if( this.isInputConnected(2) ) + { + value2 = this.getInputData(2); + this.properties.value2 = value2; + } + + var fx = this.properties.fx; + var shader = LGraphFXGeneric.shaders[ fx ]; + if(!shader) + { + var pixel_shader_code = LGraphFXGeneric["pixel_shader_" + fx ]; + if(!pixel_shader_code) + return; + + shader = LGraphFXGeneric.shaders[ fx ] = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, pixel_shader_code ); + } + + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + var mesh = Mesh.getScreenQuad(); + var camera = Renderer._current_camera; + + var noise = null; + if(fx == "noise") + noise = LGraphTexture.getNoiseTexture(); + + this._tex.drawTo( function() { + tex.bind(0); + if(fx == "noise") + noise.bind(1); + + shader.uniforms({u_texture:0, u_noise:1, u_size: [tex.width, tex.height], u_rand:[ Math.random(), Math.random() ], u_value1: value1, u_value2: value2, u_camera_planes: [Renderer._current_camera.near,Renderer._current_camera.far] }) + .draw(mesh); + }); + + this.setOutputData(0, this._tex); + } + + LGraphFXGeneric.pixel_shader_halftone = "precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_camera_planes;\n\ + uniform vec2 u_size;\n\ + uniform float u_value1;\n\ + uniform float u_value2;\n\ + \n\ + float pattern() {\n\ + float s = sin(u_value1 * 3.1415), c = cos(u_value1 * 3.1415);\n\ + vec2 tex = v_coord * u_size.xy;\n\ + vec2 point = vec2(\n\ + c * tex.x - s * tex.y ,\n\ + s * tex.x + c * tex.y \n\ + ) * u_value2;\n\ + return (sin(point.x) * sin(point.y)) * 4.0;\n\ + }\n\ + void main() {\n\ + vec4 color = texture2D(u_texture, v_coord);\n\ + float average = (color.r + color.g + color.b) / 3.0;\n\ + gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);\n\ + }\n"; + + LGraphFXGeneric.pixel_shader_pixelate = "precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_camera_planes;\n\ + uniform vec2 u_size;\n\ + uniform float u_value1;\n\ + uniform float u_value2;\n\ + \n\ + void main() {\n\ + vec2 coord = vec2( floor(v_coord.x * u_value1) / u_value1, floor(v_coord.y * u_value2) / u_value2 );\n\ + vec4 color = texture2D(u_texture, coord);\n\ + gl_FragColor = color;\n\ + }\n"; + + LGraphFXGeneric.pixel_shader_lowpalette = "precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_camera_planes;\n\ + uniform vec2 u_size;\n\ + uniform float u_value1;\n\ + uniform float u_value2;\n\ + \n\ + void main() {\n\ + vec4 color = texture2D(u_texture, v_coord);\n\ + gl_FragColor = floor(color * u_value1) / u_value1;\n\ + }\n"; + + LGraphFXGeneric.pixel_shader_noise = "precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform sampler2D u_noise;\n\ + uniform vec2 u_size;\n\ + uniform float u_value1;\n\ + uniform float u_value2;\n\ + uniform vec2 u_rand;\n\ + \n\ + void main() {\n\ + vec4 color = texture2D(u_texture, v_coord);\n\ + vec3 noise = texture2D(u_noise, v_coord * vec2(u_size.x / 512.0, u_size.y / 512.0) + u_rand).xyz - vec3(0.5);\n\ + gl_FragColor = vec4( color.xyz + noise * u_value1, color.a );\n\ + }\n"; + + + LiteGraph.registerNodeType("fx/generic", LGraphFXGeneric ); + window.LGraphFXGeneric = LGraphFXGeneric; + + + // Vigneting ************************************ + + function LGraphFXVigneting() + { + this.addInput("Tex.","Texture"); + this.addInput("intensity","number"); + + this.addOutput("Texture","Texture"); + this.properties = { intensity: 1, invert: false, precision: LGraphTexture.DEFAULT }; + + if(!LGraphFXVigneting._shader) + LGraphFXVigneting._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphFXVigneting.pixel_shader ); + } + + LGraphFXVigneting.title = "Vigneting"; + LGraphFXVigneting.desc = "Vigneting"; + + LGraphFXVigneting.widgets_info = { + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphFXVigneting.prototype.onExecute = function() + { + var tex = this.getInputData(0); + + if(this.properties.precision === LGraphTexture.PASS_THROUGH ) + { + this.setOutputData(0,tex); + return; + } + + if(!tex) return; + + this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision ); + + var intensity = this.properties.intensity; + if( this.isInputConnected(1) ) + { + intensity = this.getInputData(1); + this.properties.intensity = intensity; + } + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + + var mesh = Mesh.getScreenQuad(); + var shader = LGraphFXVigneting._shader; + var invert = this.properties.invert; + + this._tex.drawTo( function() { + tex.bind(0); + shader.uniforms({u_texture:0, u_intensity: intensity, u_isize:[1/tex.width,1/tex.height], u_invert: invert ? 1 : 0}).draw(mesh); + }); + + this.setOutputData(0, this._tex); + } + + LGraphFXVigneting.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform float u_intensity;\n\ + uniform int u_invert;\n\ + \n\ + void main() {\n\ + float luminance = 1.0 - length( v_coord - vec2(0.5) ) * 1.414;\n\ + vec4 color = texture2D(u_texture, v_coord);\n\ + if(u_invert == 1)\n\ + luminance = 1.0 - luminance;\n\ + luminance = mix(1.0, luminance, u_intensity);\n\ + gl_FragColor = vec4( luminance * color.xyz, color.a);\n\ + }\n\ + "; + + LiteGraph.registerNodeType("fx/vigneting", LGraphFXVigneting ); + window.LGraphFXVigneting = LGraphFXVigneting; +} \ No newline at end of file diff --git a/src/nodes/gltextures.js b/src/nodes/gltextures.js new file mode 100644 index 000000000..15189c3d8 --- /dev/null +++ b/src/nodes/gltextures.js @@ -0,0 +1,1506 @@ +//Works with Litegl.js to create WebGL nodes +if(typeof(LiteGraph) != "undefined") +{ + function LGraphTexture() + { + this.addOutput("Texture","Texture"); + this.properties = {name:""}; + this.size = [LGraphTexture.image_preview_size, LGraphTexture.image_preview_size]; + } + + LGraphTexture.title = "Texture"; + LGraphTexture.desc = "Texture"; + LGraphTexture.widgets_info = {"name": { widget:"texture"} }; + + //REPLACE THIS TO INTEGRATE WITH YOUR FRAMEWORK + LGraphTexture.textures_container = {}; //where to seek for the textures, if not specified it uses gl.textures + LGraphTexture.loadTextureCallback = null; //function in charge of loading textures when not present in the container + LGraphTexture.image_preview_size = 256; + + //flags to choose output texture type + LGraphTexture.PASS_THROUGH = 1; //do not apply FX + LGraphTexture.COPY = 2; //create new texture with the same properties as the origin texture + LGraphTexture.LOW = 3; //create new texture with low precision (byte) + LGraphTexture.HIGH = 4; //create new texture with high precision (half-float) + LGraphTexture.REUSE = 5; //reuse input texture + LGraphTexture.DEFAULT = 2; + + LGraphTexture.MODE_VALUES = { + "pass through": LGraphTexture.PASS_THROUGH, + "copy": LGraphTexture.COPY, + "low": LGraphTexture.LOW, + "high": LGraphTexture.HIGH, + "reuse": LGraphTexture.REUSE, + "default": LGraphTexture.DEFAULT + }; + + LGraphTexture.getTexture = function(name) + { + var container = LGraphTexture.textures_container || gl.textures; + + if(!container) + throw("Cannot load texture, container of textures not found"); + + var tex = container[ name ]; + if(!tex && name && name[0] != ":") + { + //texture must be loaded + if(LGraphTexture.loadTextureCallback) + { + var loader = LGraphTexture.loadTextureCallback; + if(loader) + loader( name ); + return null; + } + else + { + var url = name; + if(url.substr(0,7) == "http://") + { + if(LiteGraph.proxy) //proxy external files + url = LiteGraph.proxy + url.substr(7); + } + tex = container[ name ] = GL.Texture.fromURL(url, {}); + } + } + + return tex; + } + + //used to compute the appropiate output texture + LGraphTexture.getTargetTexture = function( origin, target, mode ) + { + if(!origin) + throw("LGraphTexture.getTargetTexture expects a reference texture"); + + var tex_type = null; + + switch(mode) + { + case LGraphTexture.LOW: tex_type = gl.UNSIGNED_BYTE; break; + case LGraphTexture.HIGH: tex_type = gl.HIGH_PRECISION_FORMAT; break; + case LGraphTexture.REUSE: return origin; break; + case LGraphTexture.COPY: + default: tex_type = origin ? origin.type : gl.UNSIGNED_BYTE; break; + } + + if(!target || target.width != origin.width || target.height != origin.height || target.type != tex_type ) + target = new GL.Texture( origin.width, origin.height, { type: tex_type, format: gl.RGBA, filter: gl.LINEAR }); + + return target; + } + + LGraphTexture.getNoiseTexture = function() + { + if(this._noise_texture) + return this._noise_texture; + + var noise = new Uint8Array(512*512*4); + for(var i = 0; i < 512*512*4; ++i) + noise[i] = Math.random() * 255; + + var texture = GL.Texture.fromMemory(512,512,noise,{ format: gl.RGBA, wrap: gl.REPEAT, filter: gl.NEAREST }); + this._noise_texture = texture; + return texture; + } + + LGraphTexture.prototype.onDropFile = function(data, filename, file) + { + if(!data) + { + this._drop_texture = null; + this.properties.name = ""; + } + else + { + var texture = null; + if( typeof(data) == "string" ) + texture = GL.Texture.fromURL( data ); + else if( filename.toLowerCase().indexOf(".dds") != -1 ) + texture = GL.Texture.fromDDSInMemory(data); + else + { + var blob = new Blob([file]); + var url = URL.createObjectURL(blob); + texture = GL.Texture.fromURL( url ); + } + + this._drop_texture = texture; + this.properties.name = filename; + } + } + + LGraphTexture.prototype.getExtraMenuOptions = function(graphcanvas) + { + var that = this; + if(!this._drop_texture) + return; + return [ {content:"Clear", callback: + function() { + that._drop_texture = null; + that.properties.name = ""; + } + }]; + } + + LGraphTexture.prototype.onExecute = function() + { + if(this._drop_texture) + { + this.setOutputData(0, this._drop_texture); + return; + } + + if(!this.properties.name) + return; + + var tex = LGraphTexture.getTexture( this.properties.name ); + if(!tex) + return; + + this._last_tex = tex; + this.setOutputData(0, tex); + } + + LGraphTexture.prototype.onDrawBackground = function(ctx) + { + if( this.flags.collapsed || this.size[1] <= 20 ) + return; + + if( this._drop_texture && ctx.webgl ) + { + ctx.drawImage( this._drop_texture, 0,0,this.size[0],this.size[1]); + //this._drop_texture.renderQuad(this.pos[0],this.pos[1],this.size[0],this.size[1]); + return; + } + + + //Different texture? then get it from the GPU + if(this._last_preview_tex != this._last_tex) + { + if(ctx.webgl) + { + this._canvas = this._last_tex; + } + else + { + var tex_canvas = LGraphTexture.generateLowResTexturePreview(this._last_tex); + if(!tex_canvas) + return; + + this._last_preview_tex = this._last_tex; + this._canvas = cloneCanvas(tex_canvas); + } + } + + if(!this._canvas) + return; + + //render to graph canvas + ctx.save(); + if(!ctx.webgl) //reverse image + { + ctx.translate(0,this.size[1]); + ctx.scale(1,-1); + } + ctx.drawImage(this._canvas,0,0,this.size[0],this.size[1]); + ctx.restore(); + } + + + //very slow, used at your own risk + LGraphTexture.generateLowResTexturePreview = function(tex) + { + if(!tex) return null; + + var size = LGraphTexture.image_preview_size; + var temp_tex = tex; + + //Generate low-level version in the GPU to speed up + if(tex.width > size || tex.height > size) + { + temp_tex = this._preview_temp_tex; + if(!this._preview_temp_tex) + { + temp_tex = new GL.Texture(size,size, { minFilter: gl.NEAREST }); + this._preview_temp_tex = temp_tex; + } + + //copy + tex.copyTo(temp_tex); + tex = temp_tex; + } + + //create intermediate canvas with lowquality version + var tex_canvas = this._preview_canvas; + if(!tex_canvas) + { + tex_canvas = createCanvas(size,size); + this._preview_canvas = tex_canvas; + } + + if(temp_tex) + temp_tex.toCanvas(tex_canvas); + return tex_canvas; + } + + LiteGraph.registerNodeType("texture/texture", LGraphTexture ); + window.LGraphTexture = LGraphTexture; + + //************************** + function LGraphTexturePreview() + { + this.addInput("Texture","Texture"); + this.properties = { flipY: false }; + this.size = [LGraphTexture.image_preview_size, LGraphTexture.image_preview_size]; + } + + LGraphTexturePreview.title = "Preview"; + LGraphTexturePreview.desc = "Show a texture in the graph canvas"; + + LGraphTexturePreview.prototype.onDrawBackground = function(ctx) + { + if(this.flags.collapsed) return; + + var tex = this.getInputData(0); + if(!tex) return; + + var tex_canvas = null; + + if(!tex.handle && ctx.webgl) + tex_canvas = tex; + else + tex_canvas = LGraphTexture.generateLowResTexturePreview(tex); + + //render to graph canvas + ctx.save(); + if(this.properties.flipY) + { + ctx.translate(0,this.size[1]); + ctx.scale(1,-1); + } + ctx.drawImage(tex_canvas,0,0,this.size[0],this.size[1]); + ctx.restore(); + } + + LiteGraph.registerNodeType("texture/preview", LGraphTexturePreview ); + window.LGraphTexturePreview = LGraphTexturePreview; + + //************************************** + + function LGraphTextureSave() + { + this.addInput("Texture","Texture"); + this.addOutput("","Texture"); + this.properties = {name:""}; + } + + LGraphTextureSave.title = "Save"; + LGraphTextureSave.desc = "Save a texture in the repository"; + + LGraphTextureSave.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(!tex) return; + + if(this.properties.name) + LGraphTexture.textures_container[ this.properties.name ] = tex; + + this.setOutputData(0, tex); + } + + LiteGraph.registerNodeType("texture/save", LGraphTextureSave ); + window.LGraphTextureSave = LGraphTextureSave; + + //**************************************************** + + function LGraphTextureOperation() + { + this.addInput("Texture","Texture"); + this.addInput("TextureB","Texture"); + this.addInput("value","number"); + this.addOutput("Texture","Texture"); + this.help = "

pixelcode must be vec3

\ +

uvcode must be vec2, is optional

\ +

uv: tex. coords

color: texture

colorB: textureB

time: scene time

value: input value

"; + + this.properties = {value:1, uvcode:"", pixelcode:"color + colorB * value", precision: LGraphTexture.DEFAULT }; + } + + LGraphTextureOperation.widgets_info = { + "uvcode": { widget:"textarea", height: 100 }, + "pixelcode": { widget:"textarea", height: 100 }, + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphTextureOperation.title = "Operation"; + LGraphTextureOperation.desc = "Texture shader operation"; + + LGraphTextureOperation.prototype.onExecute = function() + { + var tex = this.getInputData(0); + + if(this.properties.precision === LGraphTexture.PASS_THROUGH) + { + this.setOutputData(0, tex); + return; + } + + var texB = this.getInputData(1); + + if(!this.properties.uvcode && !this.properties.pixelcode) + return; + + var width = 512; + var height = 512; + var type = gl.UNSIGNED_BYTE; + if(tex) + { + width = tex.width; + height = tex.height; + type = tex.type; + } + else if (texB) + { + width = texB.width; + height = texB.height; + type = texB.type; + } + + if(!tex && !this._tex ) + this._tex = new GL.Texture( width, height, { type: this.precision === LGraphTexture.LOW ? gl.UNSIGNED_BYTE : gl.HIGH_PRECISION_FORMAT, format: gl.RGBA, filter: gl.LINEAR }); + else + this._tex = LGraphTexture.getTargetTexture( tex || this._tex, this._tex, this.properties.precision ); + + /* + if(this.properties.low_precision) + type = gl.UNSIGNED_BYTE; + + if(!this._tex || this._tex.width != width || this._tex.height != height || this._tex.type != type ) + this._tex = new GL.Texture( width, height, { type: type, format: gl.RGBA, filter: gl.LINEAR }); + */ + + var uvcode = ""; + if(this.properties.uvcode) + { + uvcode = "uv = " + this.properties.uvcode; + if(this.properties.uvcode.indexOf(";") != -1) //there are line breaks, means multiline code + uvcode = this.properties.uvcode; + } + + var pixelcode = ""; + if(this.properties.pixelcode) + { + pixelcode = "result = " + this.properties.pixelcode; + if(this.properties.pixelcode.indexOf(";") != -1) //there are line breaks, means multiline code + pixelcode = this.properties.pixelcode; + } + + var shader = this._shader; + + if(!shader || this._shader_code != (uvcode + "|" + pixelcode) ) + { + try + { + this._shader = new GL.Shader(Shader.SCREEN_VERTEX_SHADER, LGraphTextureOperation.pixel_shader, { UV_CODE: uvcode, PIXEL_CODE: pixelcode }); + this.boxcolor = "#00FF00"; + } + catch (err) + { + console.log("Error compiling shader: ", err); + this.boxcolor = "#FF0000"; + return; + } + this._shader_code = (uvcode + "|" + pixelcode); + shader = this._shader; + } + + if(!shader) + { + this.boxcolor = "red"; + return; + } + else + this.boxcolor = "green"; + + var value = this.getInputData(2); + if(value != null) + this.properties.value = value; + else + value = parseFloat( this.properties.value ); + + var time = this.graph.getTime(); + + this._tex.drawTo(function() { + gl.disable( gl.DEPTH_TEST ); + gl.disable( gl.CULL_FACE ); + gl.disable( gl.BLEND ); + if(tex) tex.bind(0); + if(texB) texB.bind(1); + var mesh = Mesh.getScreenQuad(); + shader.uniforms({u_texture:0, u_textureB:1, value: value, texSize:[width,height], time: time}).draw(mesh); + }); + + this.setOutputData(0, this._tex); + } + + LGraphTextureOperation.pixel_shader = "precision highp float;\n\ + \n\ + uniform sampler2D u_texture;\n\ + uniform sampler2D u_textureB;\n\ + varying vec2 v_coord;\n\ + uniform vec2 texSize;\n\ + uniform float time;\n\ + uniform float value;\n\ + \n\ + void main() {\n\ + vec2 uv = v_coord;\n\ + UV_CODE;\n\ + vec3 color = texture2D(u_texture, uv).rgb;\n\ + vec3 colorB = texture2D(u_textureB, uv).rgb;\n\ + vec3 result = color;\n\ + float alpha = 1.0;\n\ + PIXEL_CODE;\n\ + gl_FragColor = vec4(result, alpha);\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/operation", LGraphTextureOperation ); + window.LGraphTextureOperation = LGraphTextureOperation; + + //**************************************************** + + function LGraphTextureShader() + { + this.addOutput("Texture","Texture"); + this.properties = {code:"", width: 512, height: 512}; + + this.properties.code = "\nvoid main() {\n vec2 uv = coord;\n vec3 color = vec3(0.0);\n//your code here\n\ngl_FragColor = vec4(color, 1.0);\n}\n"; + } + + LGraphTextureShader.title = "Shader"; + LGraphTextureShader.desc = "Texture shader"; + LGraphTextureShader.widgets_info = { + "code": { widget:"code" }, + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphTextureShader.prototype.onExecute = function() + { + //replug + if(this._shader_code != this.properties.code) + { + this._shader_code = this.properties.code; + this._shader = new GL.Shader(Shader.SCREEN_VERTEX_SHADER, LGraphTextureShader.pixel_shader + this.properties.code ); + if(!this._shader) { + this.boxcolor = "red"; + return; + } + else + this.boxcolor = "green"; + /* + var uniforms = this._shader.uniformLocations; + //disconnect inputs + if(this.inputs) + for(var i = 0; i < this.inputs.length; i++) + { + var slot = this.inputs[i]; + if(slot.link != null) + this.disconnectInput(i); + } + + for(var i = 0; i < uniforms.length; i++) + { + var type = "number"; + if( this._shader.isSampler[i] ) + type = "texture"; + else + { + var v = gl.getUniform(this._shader.program, i); + type = typeof(v); + if(type == "object" && v.length) + { + switch(v.length) + { + case 1: type = "number"; break; + case 2: type = "vec2"; break; + case 3: type = "vec3"; break; + case 4: type = "vec4"; break; + case 9: type = "mat3"; break; + case 16: type = "mat4"; break; + default: continue; + } + } + } + this.addInput(i,type); + } + */ + } + + if(!this._tex || this._tex.width != this.properties.width || this._tex.height != this.properties.height ) + this._tex = new GL.Texture( this.properties.width, this.properties.height, { format: gl.RGBA, filter: gl.LINEAR }); + var tex = this._tex; + var shader = this._shader; + var time = this.graph.getTime(); + tex.drawTo(function() { + shader.uniforms({texSize: [tex.width, tex.height], time: time}).draw( Mesh.getScreenQuad() ); + }); + + this.setOutputData(0, this._tex); + } + + LGraphTextureShader.pixel_shader = "precision highp float;\n\ + \n\ + varying vec2 v_coord;\n\ + uniform float time;\n\ + "; + + LiteGraph.registerNodeType("texture/shader", LGraphTextureShader ); + window.LGraphTextureShader = LGraphTextureShader; + + // Texture to Viewport ***************************************** + function LGraphTextureToViewport() + { + this.addInput("Texture","Texture"); + this.properties = { additive: false, antialiasing: false, disable_alpha: false }; + this.size[0] = 130; + + if(!LGraphTextureToViewport._shader) + LGraphTextureToViewport._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureToViewport.pixel_shader ); + } + + LGraphTextureToViewport.title = "to Viewport"; + LGraphTextureToViewport.desc = "Texture to viewport"; + + LGraphTextureToViewport.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(!tex) + return; + + if(this.properties.disable_alpha) + gl.disable( gl.BLEND ); + else + { + gl.enable( gl.BLEND ); + if(this.properties.additive) + gl.blendFunc( gl.SRC_ALPHA, gl.ONE ); + else + gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA ); + } + + gl.disable( gl.DEPTH_TEST ); + if(this.properties.antialiasing) + { + var viewport = gl.getViewport(); //gl.getParameter(gl.VIEWPORT); + var mesh = Mesh.getScreenQuad(); + tex.bind(0); + LGraphTextureToViewport._shader.uniforms({u_texture:0, uViewportSize:[tex.width,tex.height], inverseVP: [1/tex.width,1/tex.height] }).draw(mesh); + } + else + tex.toViewport(); + } + + LGraphTextureToViewport.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 uViewportSize;\n\ + uniform vec2 inverseVP;\n\ + #define FXAA_REDUCE_MIN (1.0/ 128.0)\n\ + #define FXAA_REDUCE_MUL (1.0 / 8.0)\n\ + #define FXAA_SPAN_MAX 8.0\n\ + \n\ + /* from mitsuhiko/webgl-meincraft based on the code on geeks3d.com */\n\ + vec4 applyFXAA(sampler2D tex, vec2 fragCoord)\n\ + {\n\ + vec4 color = vec4(0.0);\n\ + /*vec2 inverseVP = vec2(1.0 / uViewportSize.x, 1.0 / uViewportSize.y);*/\n\ + vec3 rgbNW = texture2D(tex, (fragCoord + vec2(-1.0, -1.0)) * inverseVP).xyz;\n\ + vec3 rgbNE = texture2D(tex, (fragCoord + vec2(1.0, -1.0)) * inverseVP).xyz;\n\ + vec3 rgbSW = texture2D(tex, (fragCoord + vec2(-1.0, 1.0)) * inverseVP).xyz;\n\ + vec3 rgbSE = texture2D(tex, (fragCoord + vec2(1.0, 1.0)) * inverseVP).xyz;\n\ + vec3 rgbM = texture2D(tex, fragCoord * inverseVP).xyz;\n\ + vec3 luma = vec3(0.299, 0.587, 0.114);\n\ + float lumaNW = dot(rgbNW, luma);\n\ + float lumaNE = dot(rgbNE, luma);\n\ + float lumaSW = dot(rgbSW, luma);\n\ + float lumaSE = dot(rgbSE, luma);\n\ + float lumaM = dot(rgbM, luma);\n\ + float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));\n\ + float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));\n\ + \n\ + vec2 dir;\n\ + dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));\n\ + dir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE));\n\ + \n\ + float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);\n\ + \n\ + float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);\n\ + dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX), max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX), dir * rcpDirMin)) * inverseVP;\n\ + \n\ + vec3 rgbA = 0.5 * (texture2D(tex, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz + \n\ + texture2D(tex, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);\n\ + vec3 rgbB = rgbA * 0.5 + 0.25 * (texture2D(tex, fragCoord * inverseVP + dir * -0.5).xyz + \n\ + texture2D(tex, fragCoord * inverseVP + dir * 0.5).xyz);\n\ + \n\ + return vec4(rgbA,1.0);\n\ + float lumaB = dot(rgbB, luma);\n\ + if ((lumaB < lumaMin) || (lumaB > lumaMax))\n\ + color = vec4(rgbA, 1.0);\n\ + else\n\ + color = vec4(rgbB, 1.0);\n\ + return color;\n\ + }\n\ + \n\ + void main() {\n\ + gl_FragColor = applyFXAA( u_texture, v_coord * uViewportSize) ;\n\ + }\n\ + "; + + + LiteGraph.registerNodeType("texture/toviewport", LGraphTextureToViewport ); + window.LGraphTextureToViewport = LGraphTextureToViewport; + + + // Texture Copy ***************************************** + function LGraphTextureCopy() + { + this.addInput("Texture","Texture"); + this.addOutput("","Texture"); + this.properties = { size: 0, generate_mipmaps: false, precision: LGraphTexture.DEFAULT }; + } + + LGraphTextureCopy.title = "Copy"; + LGraphTextureCopy.desc = "Copy Texture"; + LGraphTextureCopy.widgets_info = { + size: { widget:"combo", values:[0,32,64,128,256,512,1024,2048]}, + precision: { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphTextureCopy.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(!tex) return; + + var width = tex.width; + var height = tex.height; + + if(this.properties.size != 0) + { + width = this.properties.size; + height = this.properties.size; + } + + var temp = this._temp_texture; + + var type = tex.type; + if(this.properties.precision === LGraphTexture.LOW) + type = gl.UNSIGNED_BYTE; + else if(this.properties.precision === LGraphTexture.HIGH) + type = gl.HIGH_PRECISION_FORMAT; + + if(!temp || temp.width != width || temp.height != height || temp.type != type ) + { + var minFilter = gl.LINEAR; + if( this.properties.generate_mipmaps && isPowerOfTwo(width) && isPowerOfTwo(height) ) + minFilter = gl.LINEAR_MIPMAP_LINEAR; + this._temp_texture = new GL.Texture( width, height, { type: type, format: gl.RGBA, minFilter: minFilter, magFilter: gl.LINEAR }); + } + tex.copyTo(this._temp_texture); + + if(this.properties.generate_mipmaps) + { + this._temp_texture.bind(0); + gl.generateMipmap(this._temp_texture.texture_type); + this._temp_texture.unbind(0); + } + + + this.setOutputData(0,this._temp_texture); + } + + LiteGraph.registerNodeType("texture/copy", LGraphTextureCopy ); + window.LGraphTextureCopy = LGraphTextureCopy; + + + // Texture Copy ***************************************** + function LGraphTextureAverage() + { + this.addInput("Texture","Texture"); + this.addOutput("","Texture"); + this.properties = { low_precision: false }; + } + + LGraphTextureAverage.title = "Average"; + LGraphTextureAverage.desc = "Compute average of a texture and stores it as a texture"; + + LGraphTextureAverage.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(!tex) return; + + if(!LGraphTextureAverage._shader) + { + LGraphTextureAverage._shader = new GL.Shader(Shader.SCREEN_VERTEX_SHADER, LGraphTextureAverage.pixel_shader); + var samples = new Float32Array(32); + for(var i = 0; i < 32; ++i) + samples[i] = Math.random(); + LGraphTextureAverage._shader.uniforms({u_samples_a: samples.subarray(0,16), u_samples_b: samples.subarray(16,32) }); + } + + var temp = this._temp_texture; + var type = this.properties.low_precision ? gl.UNSIGNED_BYTE : tex.type; + if(!temp || temp.type != type ) + this._temp_texture = new GL.Texture( 1, 1, { type: type, format: gl.RGBA, filter: gl.NEAREST }); + + var shader = LGraphTextureAverage._shader; + this._temp_texture.drawTo(function(){ + tex.toViewport(shader,{u_texture:0}); + }); + + this.setOutputData(0,this._temp_texture); + } + + LGraphTextureAverage.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + uniform mat4 u_samples_a;\n\ + uniform mat4 u_samples_b;\n\ + uniform sampler2D u_texture;\n\ + varying vec2 v_coord;\n\ + \n\ + void main() {\n\ + vec4 color = vec4(0.0);\n\ + for(int i = 0; i < 4; ++i)\n\ + for(int j = 0; j < 4; ++j)\n\ + {\n\ + color += texture2D(u_texture, vec2( u_samples_a[i][j], u_samples_b[i][j] ) );\n\ + color += texture2D(u_texture, vec2( 1.0 - u_samples_a[i][j], u_samples_b[i][j] ) );\n\ + }\n\ + gl_FragColor = color * 0.03125;\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/average", LGraphTextureAverage ); + window.LGraphTextureAverage = LGraphTextureAverage; + + // Image To Texture ***************************************** + function LGraphImageToTexture() + { + this.addInput("Image","image"); + this.addOutput("","Texture"); + this.properties = {}; + } + + LGraphImageToTexture.title = "Image to Texture"; + LGraphImageToTexture.desc = "Uploads an image to the GPU"; + //LGraphImageToTexture.widgets_info = { size: { widget:"combo", values:[0,32,64,128,256,512,1024,2048]} }; + + LGraphImageToTexture.prototype.onExecute = function() + { + var img = this.getInputData(0); + if(!img) return; + + var width = img.videoWidth || img.width; + var height = img.videoHeight || img.height; + + //this is in case we are using a webgl canvas already, no need to reupload it + if(img.gltexture) + { + this.setOutputData(0,img.gltexture); + return; + } + + + var temp = this._temp_texture; + if(!temp || temp.width != width || temp.height != height ) + this._temp_texture = new GL.Texture( width, height, { format: gl.RGBA, filter: gl.LINEAR }); + + try + { + this._temp_texture.uploadImage(img); + } + catch(err) + { + console.error("image comes from an unsafe location, cannot be uploaded to webgl"); + return; + } + + this.setOutputData(0,this._temp_texture); + } + + LiteGraph.registerNodeType("texture/imageToTexture", LGraphImageToTexture ); + window.LGraphImageToTexture = LGraphImageToTexture; + + + // Texture LUT ***************************************** + function LGraphTextureLUT() + { + this.addInput("Texture","Texture"); + this.addInput("LUT","Texture"); + this.addInput("Intensity","number"); + this.addOutput("","Texture"); + this.properties = { intensity: 1, precision: LGraphTexture.DEFAULT }; + + if(!LGraphTextureLUT._shader) + LGraphTextureLUT._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureLUT.pixel_shader ); + } + + LGraphTextureLUT.widgets_info = { + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphTextureLUT.title = "LUT"; + LGraphTextureLUT.desc = "Apply LUT to Texture"; + + LGraphTextureLUT.prototype.onExecute = function() + { + var tex = this.getInputData(0); + + if(this.properties.precision === LGraphTexture.PASS_THROUGH ) + { + this.setOutputData(0,tex); + return; + } + + if(!tex) return; + + var lut_tex = this.getInputData(1); + if(!lut_tex) + { + this.setOutputData(0,tex); + return; + } + lut_tex.bind(0); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR ); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE ); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE ); + gl.bindTexture(gl.TEXTURE_2D, null); + + var intensity = this.properties.intensity; + if( this.isInputConnected(2) ) + this.properties.intensity = intensity = this.getInputData(2); + + this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision ); + + var mesh = Mesh.getScreenQuad(); + + this._tex.drawTo(function() { + tex.bind(0); + lut_tex.bind(1); + LGraphTextureLUT._shader.uniforms({u_texture:0, u_textureB:1, u_amount: intensity, uViewportSize:[tex.width,tex.height]}).draw(mesh); + }); + + this.setOutputData(0,this._tex); + } + + LGraphTextureLUT.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform sampler2D u_textureB;\n\ + uniform float u_amount;\n\ + \n\ + void main() {\n\ + lowp vec4 textureColor = clamp( texture2D(u_texture, v_coord), vec4(0.0), vec4(1.0) );\n\ + mediump float blueColor = textureColor.b * 63.0;\n\ + mediump vec2 quad1;\n\ + quad1.y = floor(floor(blueColor) / 8.0);\n\ + quad1.x = floor(blueColor) - (quad1.y * 8.0);\n\ + mediump vec2 quad2;\n\ + quad2.y = floor(ceil(blueColor) / 8.0);\n\ + quad2.x = ceil(blueColor) - (quad2.y * 8.0);\n\ + highp vec2 texPos1;\n\ + texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n\ + texPos1.y = 1.0 - ((quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\ + highp vec2 texPos2;\n\ + texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n\ + texPos2.y = 1.0 - ((quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\ + lowp vec4 newColor1 = texture2D(u_textureB, texPos1);\n\ + lowp vec4 newColor2 = texture2D(u_textureB, texPos2);\n\ + lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));\n\ + gl_FragColor = vec4( mix( textureColor.rgb, newColor.rgb, u_amount), textureColor.w);\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/LUT", LGraphTextureLUT ); + window.LGraphTextureLUT = LGraphTextureLUT; + + // Texture Mix ***************************************** + function LGraphTextureChannels() + { + this.addInput("Texture","Texture"); + + this.addOutput("R","Texture"); + this.addOutput("G","Texture"); + this.addOutput("B","Texture"); + this.addOutput("A","Texture"); + + this.properties = {}; + if(!LGraphTextureChannels._shader) + LGraphTextureChannels._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureChannels.pixel_shader ); + } + + LGraphTextureChannels.title = "Channels"; + LGraphTextureChannels.desc = "Split texture channels"; + + LGraphTextureChannels.prototype.onExecute = function() + { + var texA = this.getInputData(0); + if(!texA) return; + + if(!this._channels) + this._channels = Array(4); + + var connections = 0; + for(var i = 0; i < 4; i++) + { + if(this.isOutputConnected(i)) + { + if(!this._channels[i] || this._channels[i].width != texA.width || this._channels[i].height != texA.height || this._channels[i].type != texA.type) + this._channels[i] = new GL.Texture( texA.width, texA.height, { type: texA.type, format: gl.RGBA, filter: gl.LINEAR }); + connections++; + } + else + this._channels[i] = null; + } + + if(!connections) + return; + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + + var mesh = Mesh.getScreenQuad(); + var shader = LGraphTextureChannels._shader; + var masks = [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]]; + + for(var i = 0; i < 4; i++) + { + if(!this._channels[i]) + continue; + + this._channels[i].drawTo( function() { + texA.bind(0); + shader.uniforms({u_texture:0, u_mask: masks[i]}).draw(mesh); + }); + this.setOutputData(i, this._channels[i]); + } + } + + LGraphTextureChannels.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec4 u_mask;\n\ + \n\ + void main() {\n\ + gl_FragColor = vec4( vec3( length( texture2D(u_texture, v_coord) * u_mask )), 1.0 );\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/channels", LGraphTextureChannels ); + window.LGraphTextureChannels = LGraphTextureChannels; + + // Texture Mix ***************************************** + function LGraphTextureMix() + { + this.addInput("A","Texture"); + this.addInput("B","Texture"); + this.addInput("Mixer","Texture"); + + this.addOutput("Texture","Texture"); + this.properties = { precision: LGraphTexture.DEFAULT }; + + if(!LGraphTextureMix._shader) + LGraphTextureMix._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureMix.pixel_shader ); + } + + LGraphTextureMix.title = "Mix"; + LGraphTextureMix.desc = "Generates a texture mixing two textures"; + + LGraphTextureMix.widgets_info = { + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphTextureMix.prototype.onExecute = function() + { + var texA = this.getInputData(0); + + if(this.properties.precision === LGraphTexture.PASS_THROUGH ) + { + this.setOutputData(0,texA); + return; + } + + var texB = this.getInputData(1); + var texMix = this.getInputData(2); + if(!texA || !texB || !texMix) return; + + this._tex = LGraphTexture.getTargetTexture( texA, this._tex, this.properties.precision ); + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + + var mesh = Mesh.getScreenQuad(); + var shader = LGraphTextureMix._shader; + + this._tex.drawTo( function() { + texA.bind(0); + texB.bind(1); + texMix.bind(2); + shader.uniforms({u_textureA:0,u_textureB:1,u_textureMix:2}).draw(mesh); + }); + + this.setOutputData(0, this._tex); + } + + LGraphTextureMix.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_textureA;\n\ + uniform sampler2D u_textureB;\n\ + uniform sampler2D u_textureMix;\n\ + \n\ + void main() {\n\ + gl_FragColor = mix( texture2D(u_textureA, v_coord), texture2D(u_textureB, v_coord), texture2D(u_textureMix, v_coord) );\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/mix", LGraphTextureMix ); + window.LGraphTextureMix = LGraphTextureMix; + + // Texture Edges detection ***************************************** + function LGraphTextureEdges() + { + this.addInput("Tex.","Texture"); + + this.addOutput("Edges","Texture"); + this.properties = { invert: true, precision: LGraphTexture.DEFAULT }; + + if(!LGraphTextureEdges._shader) + LGraphTextureEdges._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureEdges.pixel_shader ); + } + + LGraphTextureEdges.title = "Edges"; + LGraphTextureEdges.desc = "Detects edges"; + + LGraphTextureEdges.widgets_info = { + "precision": { widget:"combo", values: LGraphTexture.MODE_VALUES } + }; + + LGraphTextureEdges.prototype.onExecute = function() + { + var tex = this.getInputData(0); + + if(this.properties.precision === LGraphTexture.PASS_THROUGH ) + { + this.setOutputData(0,tex); + return; + } + + if(!tex) return; + + this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision ); + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + + var mesh = Mesh.getScreenQuad(); + var shader = LGraphTextureEdges._shader; + var invert = this.properties.invert; + + this._tex.drawTo( function() { + tex.bind(0); + shader.uniforms({u_texture:0, u_isize:[1/tex.width,1/tex.height], u_invert: invert ? 1 : 0}).draw(mesh); + }); + + this.setOutputData(0, this._tex); + } + + LGraphTextureEdges.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_isize;\n\ + uniform int u_invert;\n\ + \n\ + void main() {\n\ + vec4 center = texture2D(u_texture, v_coord);\n\ + vec4 up = texture2D(u_texture, v_coord + u_isize * vec2(0.0,1.0) );\n\ + vec4 down = texture2D(u_texture, v_coord + u_isize * vec2(0.0,-1.0) );\n\ + vec4 left = texture2D(u_texture, v_coord + u_isize * vec2(1.0,0.0) );\n\ + vec4 right = texture2D(u_texture, v_coord + u_isize * vec2(-1.0,0.0) );\n\ + vec4 diff = abs(center - up) + abs(center - down) + abs(center - left) + abs(center - right);\n\ + if(u_invert == 1)\n\ + diff.xyz = vec3(1.0) - diff.xyz;\n\ + gl_FragColor = vec4( diff.xyz, center.a );\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/edges", LGraphTextureEdges ); + window.LGraphTextureEdges = LGraphTextureEdges; + + // Texture Depth ***************************************** + function LGraphTextureDepthRange() + { + this.addInput("Texture","Texture"); + this.addInput("Distance","number"); + this.addInput("Range","number"); + this.addOutput("Texture","Texture"); + this.properties = { distance:100, range: 50, high_precision: false }; + + if(!LGraphTextureDepthRange._shader) + LGraphTextureDepthRange._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureDepthRange.pixel_shader ); + } + + LGraphTextureDepthRange.title = "Depth Range"; + LGraphTextureDepthRange.desc = "Generates a texture with a depth range"; + + LGraphTextureDepthRange.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(!tex) return; + + var precision = gl.UNSIGNED_BYTE; + if(this.properties.high_precision) + precision = gl.half_float_ext ? gl.HALF_FLOAT_OES : gl.FLOAT; + + if(!this._temp_texture || this._temp_texture.type != precision || + this._temp_texture.width != tex.width || this._temp_texture.height != tex.height) + this._temp_texture = new GL.Texture( tex.width, tex.height, { type: precision, format: gl.RGBA, filter: gl.LINEAR }); + + //iterations + var distance = this.properties.distance; + if( this.isInputConnected(1) ) + { + distance = this.getInputData(1); + this.properties.distance = distance; + } + + var range = this.properties.range; + if( this.isInputConnected(2) ) + { + range = this.getInputData(2); + this.properties.range = range; + } + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + var mesh = Mesh.getScreenQuad(); + var shader = LGraphTextureDepthRange._shader; + var camera = Renderer._current_camera; + + this._temp_texture.drawTo( function() { + tex.bind(0); + shader.uniforms({u_texture:0, u_distance: distance, u_range: range, u_camera_planes: [Renderer._current_camera.near,Renderer._current_camera.far] }) + .draw(mesh); + }); + + this.setOutputData(0, this._temp_texture); + } + + LGraphTextureDepthRange.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_camera_planes;\n\ + uniform float u_distance;\n\ + uniform float u_range;\n\ + \n\ + float LinearDepth()\n\ + {\n\ + float n = u_camera_planes.x;\n\ + float f = u_camera_planes.y;\n\ + return (2.0 * n) / (f + n - texture2D(u_texture, v_coord).x * (f - n));\n\ + }\n\ + \n\ + void main() {\n\ + float diff = abs(LinearDepth() * u_camera_planes.y - u_distance);\n\ + float dof = 1.0;\n\ + if(diff <= u_range)\n\ + dof = diff / u_range;\n\ + gl_FragColor = vec4(dof);\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/depth_range", LGraphTextureDepthRange ); + window.LGraphTextureDepthRange = LGraphTextureDepthRange; + + // Texture Blur ***************************************** + function LGraphTextureBlur() + { + this.addInput("Texture","Texture"); + this.addInput("Iterations","number"); + this.addInput("Intensity","number"); + this.addOutput("Blurred","Texture"); + this.properties = { intensity: 1, iterations: 1, preserve_aspect: false, scale:[1,1] }; + + if(!LGraphTextureBlur._shader) + LGraphTextureBlur._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureBlur.pixel_shader ); + } + + LGraphTextureBlur.title = "Blur"; + LGraphTextureBlur.desc = "Blur a texture"; + + LGraphTextureBlur.max_iterations = 20; + + LGraphTextureBlur.prototype.onExecute = function() + { + var tex = this.getInputData(0); + if(!tex) return; + + var temp = this._temp_texture; + + if(!temp || temp.width != tex.width || temp.height != tex.height || temp.type != tex.type ) + { + //we need two textures to do the blurring + this._temp_texture = new GL.Texture( tex.width, tex.height, { type: tex.type, format: gl.RGBA, filter: gl.LINEAR }); + this._final_texture = new GL.Texture( tex.width, tex.height, { type: tex.type, format: gl.RGBA, filter: gl.LINEAR }); + } + + //iterations + var iterations = this.properties.iterations; + if( this.isInputConnected(1) ) + { + iterations = this.getInputData(1); + this.properties.iterations = iterations; + } + iterations = Math.min( Math.floor(iterations), LGraphTextureBlur.max_iterations ); + if(iterations == 0) //skip blurring + { + this.setOutputData(0, tex); + return; + } + + var intensity = this.properties.intensity; + if( this.isInputConnected(2) ) + { + intensity = this.getInputData(2); + this.properties.intensity = intensity; + } + + gl.disable( gl.BLEND ); + gl.disable( gl.DEPTH_TEST ); + var mesh = Mesh.getScreenQuad(); + var shader = LGraphTextureBlur._shader; + var scale = this.properties.scale || [1,1]; + + //blur sometimes needs an aspect correction + var aspect = LiteGraph.aspect; + if(!aspect && window.gl !== undefined) + aspect = gl.canvas.height / gl.canvas.width; + if(window.Renderer !== undefined) + aspect = window.Renderer._current_camera.aspect; + if(!aspect) + aspect = 1; + + //iterate + var start_texture = tex; + var aspect = this.properties.preserve_aspect ? aspect : 1; + for(var i = 0; i < iterations; ++i) + { + this._temp_texture.drawTo( function() { + start_texture.bind(0); + shader.uniforms({u_texture:0, u_intensity: 1, u_offset: [0, 1/start_texture.height * scale[1] ] }) + .draw(mesh); + }); + + this._temp_texture.bind(0); + this._final_texture.drawTo( function() { + shader.uniforms({u_texture:0, u_intensity: intensity, u_offset: [aspect/start_texture.width * scale[0], 0] }) + .draw(mesh); + }); + start_texture = this._final_texture; + } + + this.setOutputData(0, this._final_texture); + } + + LGraphTextureBlur.pixel_shader = "precision highp float;\n\ + precision highp float;\n\ + varying vec2 v_coord;\n\ + uniform sampler2D u_texture;\n\ + uniform vec2 u_offset;\n\ + uniform float u_intensity;\n\ + void main() {\n\ + vec4 sum = vec4(0.0);\n\ + vec4 center = texture2D(u_texture, v_coord);\n\ + sum += texture2D(u_texture, v_coord + u_offset * -4.0) * 0.05/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * -3.0) * 0.09/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * -2.0) * 0.12/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * -1.0) * 0.15/0.98;\n\ + sum += center * 0.16/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * 4.0) * 0.05/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * 3.0) * 0.09/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * 2.0) * 0.12/0.98;\n\ + sum += texture2D(u_texture, v_coord + u_offset * 1.0) * 0.15/0.98;\n\ + gl_FragColor = u_intensity * sum;\n\ + /*gl_FragColor.a = center.a*/;\n\ + }\n\ + "; + + LiteGraph.registerNodeType("texture/blur", LGraphTextureBlur ); + window.LGraphTextureBlur = LGraphTextureBlur; + + // Texture Webcam ***************************************** + function LGraphTextureWebcam() + { + this.addOutput("Webcam","Texture"); + this.properties = {}; + } + + LGraphTextureWebcam.title = "Webcam"; + LGraphTextureWebcam.desc = "Webcam texture"; + + + LGraphTextureWebcam.prototype.openStream = function() + { + //Vendor prefixes hell + navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); + window.URL = window.URL || window.webkitURL; + + if (!navigator.getUserMedia) { + //console.log('getUserMedia() is not supported in your browser, use chrome and enable WebRTC from about://flags'); + return; + } + + this._waiting_confirmation = true; + + // Not showing vendor prefixes. + navigator.getUserMedia({video: true}, this.streamReady.bind(this), onFailSoHard); + + var that = this; + function onFailSoHard(e) { + trace('Webcam rejected', e); + that._webcam_stream = false; + that.box_color = "red"; + }; + } + + LGraphTextureWebcam.prototype.streamReady = function(localMediaStream) + { + this._webcam_stream = localMediaStream; + //this._waiting_confirmation = false; + + var video = this._video; + if(!video) + { + video = document.createElement("video"); + video.autoplay = true; + video.src = window.URL.createObjectURL(localMediaStream); + this._video = video; + //document.body.appendChild( video ); //debug + //when video info is loaded (size and so) + video.onloadedmetadata = function(e) { + // Ready to go. Do some stuff. + console.log(e); + }; + } + } + + LGraphTextureWebcam.prototype.onDrawBackground = function(ctx) + { + if(!this.flags.collapsed || this.size[1] <= 20) + return; + + if(!this._video) + return; + + //render to graph canvas + ctx.save(); + if(!ctx.webgl) //reverse image + { + ctx.translate(0,this.size[1]); + ctx.scale(1,-1); + } + ctx.drawImage(this._video, 0, 0, this.size[0], this.size[1]); + ctx.restore(); + } + + LGraphTextureWebcam.prototype.onExecute = function() + { + if(this._webcam_stream == null && !this._waiting_confirmation) + this.openStream(); + + if(!this._video || !this._video.videoWidth) return; + + var width = this._video.videoWidth; + var height = this._video.videoHeight; + + var temp = this._temp_texture; + if(!temp || temp.width != width || temp.height != height ) + this._temp_texture = new GL.Texture( width, height, { format: gl.RGB, filter: gl.LINEAR }); + + this._temp_texture.uploadImage( this._video ); + this.setOutputData(0,this._temp_texture); + } + + LiteGraph.registerNodeType("texture/webcam", LGraphTextureWebcam ); + window.LGraphTextureWebcam = LGraphTextureWebcam; + + + + function LGraphCubemap() + { + this.addOutput("Cubemap","Cubemap"); + this.properties = {name:""}; + this.size = [LGraphTexture.image_preview_size, LGraphTexture.image_preview_size]; + } + + LGraphCubemap.prototype.onDropFile = function(data, filename, file) + { + if(!data) + { + this._drop_texture = null; + this.properties.name = ""; + } + else + { + if( typeof(data) == "string" ) + this._drop_texture = GL.Texture.fromURL(data); + else + this._drop_texture = GL.Texture.fromDDSInMemory(data); + this.properties.name = filename; + } + } + + LGraphCubemap.prototype.onExecute = function() + { + if(this._drop_texture) + { + this.setOutputData(0, this._drop_texture); + return; + } + + if(!this.properties.name) + return; + + var tex = LGraphTexture.getTexture( this.properties.name ); + if(!tex) + return; + + this._last_tex = tex; + this.setOutputData(0, tex); + } + + LGraphCubemap.prototype.onDrawBackground = function(ctx) + { + if( this.flags.collapsed || this.size[1] <= 20) + return; + + if(!ctx.webgl) + return; + + var cube_mesh = gl.meshes["cube"]; + if(!cube_mesh) + cube_mesh = gl.meshes["cube"] = GL.Mesh.cube({size:1}); + + //var view = mat4.lookAt( mat4.create(), [0,0 + } + + LiteGraph.registerNodeType("texture/cubemap", LGraphCubemap ); + window.LGraphCubemap = LGraphCubemap; + + +} //litegl.js defined \ No newline at end of file diff --git a/src/nodes/image.js b/src/nodes/image.js index ee5fc6eac..94db4c6a4 100644 --- a/src/nodes/image.js +++ b/src/nodes/image.js @@ -1,6 +1,105 @@ (function(){ + + +function GraphicsImage() +{ + this.inputs = []; + this.addOutput("frame","image"); + this.properties = {"url":""}; +} + +GraphicsImage.title = "Image"; +GraphicsImage.desc = "Image loader"; +GraphicsImage.widgets = [{name:"load",text:"Load",type:"button"}]; + + +GraphicsImage.prototype.onAdded = function() +{ + if(this.properties["url"] != "" && this.img == null) + { + this.loadImage(this.properties["url"]); + } +} + +GraphicsImage.prototype.onDrawBackground = function(ctx) +{ + if(this.img && this.size[0] > 5 && this.size[1] > 5) + ctx.drawImage(this.img, 0,0,this.size[0],this.size[1]); +} + + +GraphicsImage.prototype.onExecute = function() +{ + if(!this.img) + this.boxcolor = "#000"; + if(this.img && this.img.width) + this.setOutputData(0,this.img); + else + this.setOutputData(0,null); + if(this.img && this.img.dirty) + this.img.dirty = false; +} + +GraphicsImage.prototype.onPropertyChange = function(name,value) +{ + this.properties[name] = value; + if (name == "url" && value != "") + this.loadImage(value); + + return true; +} + +GraphicsImage.prototype.onDropFile = function(file, filename) +{ + var img = new Image(); + img.src = file; + this.img = img; +} + +GraphicsImage.prototype.loadImage = function(url) +{ + if(url == "") + { + this.img = null; + return; + } + + this.trace("loading image..."); + this.img = document.createElement("img"); + + var url = name; + if(url.substr(0,7) == "http://") + { + if(LiteGraph.proxy) //proxy external files + url = LiteGraph.proxy + url.substr(7); + } + + this.img.src = url; + this.boxcolor = "#F95"; + var that = this; + this.img.onload = function() + { + that.trace("Image loaded, size: " + that.img.width + "x" + that.img.height ); + this.dirty = true; + that.boxcolor = "#9F9"; + that.setDirtyCanvas(true); + } +} + +GraphicsImage.prototype.onWidget = function(e,widget) +{ + if(widget.name == "load") + { + this.loadImage(this.properties["url"]); + } +} + +LiteGraph.registerNodeType("graphics/image", GraphicsImage); + + + function ColorPalette() { this.addInput("f","number"); @@ -263,81 +362,6 @@ ImageFade.prototype.onExecute = function() LiteGraph.registerNodeType("graphics/imagefade", ImageFade); -function GraphicsImage() -{ - this.inputs = []; - this.addOutput("frame","image"); - this.properties = {"url":""}; -} - -GraphicsImage.title = "Image"; -GraphicsImage.desc = "Image loader"; -GraphicsImage.widgets = [{name:"load",text:"Load",type:"button"}]; - - -GraphicsImage.prototype.onAdded = function() -{ - if(this.properties["url"] != "" && this.img == null) - { - this.loadImage(this.properties["url"]); - } -} - - -GraphicsImage.prototype.onExecute = function() -{ - if(!this.img) - this.boxcolor = "#000"; - if(this.img && this.img.width) - this.setOutputData(0,this.img); - else - this.setOutputData(0,null); - if(this.img.dirty) - this.img.dirty = false; -} - -GraphicsImage.prototype.onPropertyChange = function(name,value) -{ - this.properties[name] = value; - if (name == "url" && value != "") - this.loadImage(value); - - return true; -} - -GraphicsImage.prototype.loadImage = function(url) -{ - if(url == "") - { - this.img = null; - return; - } - - this.trace("loading image..."); - this.img = document.createElement("img"); - this.img.src = "miniproxy.php?url=" + url; - this.boxcolor = "#F95"; - var that = this; - this.img.onload = function() - { - that.trace("Image loaded, size: " + that.img.width + "x" + that.img.height ); - this.dirty = true; - that.boxcolor = "#9F9"; - that.setDirtyCanvas(true); - } -} - -GraphicsImage.prototype.onWidget = function(e,widget) -{ - if(widget.name == "load") - { - this.loadImage(this.properties["url"]); - } -} - -LiteGraph.registerNodeType("graphics/image", GraphicsImage); - - function ImageCrop() { diff --git a/utils/deploy_files.txt b/utils/deploy_files.txt index 93aa7d2a4..022095d53 100644 --- a/utils/deploy_files.txt +++ b/utils/deploy_files.txt @@ -2,4 +2,6 @@ ../src/nodes/base.js ../src/nodes/interface.js ../src/nodes/math.js -../src/nodes/image.js \ No newline at end of file +../src/nodes/image.js +../src/nodes/gltextures.js +../src/nodes/glfx.js