1.0.0Merge two Float32Arrays.
Float32Array:
randomize order of an array
(Array | Float32Array):
shuffled array
output a stacktrace to the console
get op shortname: only last part of fullname and without version
current time in milliseconds
string:
make an ajax request
Keyframed interpolated animation.
Available Easings:
CONSTANTS.ANIM.EASING_LINEAR CONSTANTS.ANIM.EASING_ABSOLUTE CONSTANTS.ANIM.EASING_SMOOTHSTEP CONSTANTS.ANIM.EASING_SMOOTHERSTEP CONSTANTS.ANIM.EASING_CUBICSPLINE CONSTANTS.ANIM.EASING_CUBIC_IN CONSTANTS.ANIM.EASING_CUBIC_OUT CONSTANTS.ANIM.EASING_CUBIC_INOUT CONSTANTS.ANIM.EASING_EXPO_IN CONSTANTS.ANIM.EASING_EXPO_OUT CONSTANTS.ANIM.EASING_EXPO_INOUT CONSTANTS.ANIM.EASING_SIN_IN CONSTANTS.ANIM.EASING_SIN_OUT CONSTANTS.ANIM.EASING_SIN_INOUT CONSTANTS.ANIM.EASING_BACK_IN CONSTANTS.ANIM.EASING_BACK_OUT CONSTANTS.ANIM.EASING_BACK_INOUT CONSTANTS.ANIM.EASING_ELASTIC_IN CONSTANTS.ANIM.EASING_ELASTIC_OUT CONSTANTS.ANIM.EASING_BOUNCE_IN CONSTANTS.ANIM.EASING_BOUNCE_OUT CONSTANTS.ANIM.EASING_QUART_IN CONSTANTS.ANIM.EASING_QUART_OUT CONSTANTS.ANIM.EASING_QUART_INOUT CONSTANTS.ANIM.EASING_QUINT_IN CONSTANTS.ANIM.EASING_QUINT_OUT CONSTANTS.ANIM.EASING_QUINT_INOUT
var anim=new CABLES.Anim();
anim.setValue(0,0); // set value 0 at 0 seconds
anim.setValue(10,1); // set value 1 at 10 seconds
anim.getValue(5); // get value at 5 seconds - this returns 0.5
a link is a connection between two ops/ports -> one input and one output port
returns the port of the link, which is not port
unlink/remove this link from all ports
data is coming into and out of ops through input and output ports
const myPort=op.inString("String Port");
get ui attributes
myPort.getUiAttribs();
direction of port (input(0) or output(1))
copy over a uiattrib from an external connected port to another port
inArray.onLinkChanged=()=>
{
if(inArray) inArray.copyLinkedUiAttrib("stride", outArray);
};
change listener for input value ports, overwrite to react to changes
const myPort=op.inString("MyPort");
myPort.onChange=function()
{
console.log("was changed to: ",myPort.get());
}
remove port
set ui attributes
myPort.setUiAttribs({greyout:true});
get ui attribute
myPort.setUiAttribs("values");
get value of port
set value of port / will send value to all linked ports (only for output ports)
remove all links from port
remove all link from port
return port name
return port name or title
return link, which is linked to otherPort
removes link, which is linked to otherPort
returns true if port is linked to otherPort
trigger the linked port (usually invoked on an output function port)
CABLES.CONSTANTS.OP.OP_PORT_TYPE_VALUE = 0; CABLES.CONSTANTS.OP.OP_PORT_TYPE_FUNCTION = 1; CABLES.CONSTANTS.OP.OP_PORT_TYPE_OBJECT = 2; CABLES.CONSTANTS.OP.OP_PORT_TYPE_TEXTURE = 2; CABLES.CONSTANTS.OP.OP_PORT_TYPE_ARRAY = 3; CABLES.CONSTANTS.OP.OP_PORT_TYPE_DYNAMIC = 4; CABLES.CONSTANTS.OP.OP_PORT_TYPE_STRING = 5;
Number:
type of port
set callback, which will be executed when port was triggered (usually output port)
op the class of all operators
access file attachments as String values
// set shader source to attached files (files are called shader.vert / shader.frag)
shader.setSource(attachments.shader_vert,attachments.shader_frag);
overwrite this to prerender shader and meshes / will be called by op loadingStatus
overwrite this to initialize your op
setUiAttrib possible values:
warning - warning message - showing up in op parameter panel error - error message - showing up in op parameter panel extendTitle - op title extension, e.g. [ + ]
op.setUiAttrib({"extendTitle":str});
show op error message - set message to null to remove error message
enable/disable op
remove port from op
show a warning of this op is not a child of parentOpName
refresh op parameters, if current op is selected
Implement to render 2d canvas based graphics from in an op
delay an asset loading task, mainly to wait for ui to be finished loading and showing, and only then start loading assets
add patch into html element (will create canvas and set size to fill containerElement)
keeping this for backwards compatibility in older exports before using eventtarget
Patch class, contains all operators,values,links etc. manages loading and running of the whole patch
see PatchConfig
CABLES.patch=new CABLES.Patch(
{
patch:pStr,
glCanvasId:'glcanvas',
glCanvasResizeToWindow:true,
canvas:{powerPreference:"high-performance"},
prefixAssetPath:'/assets/',
prefixJsPath:'/js/',
onError:function(e){console.log(e);}
glslPrecision:'highp'
});
pauses patch execution
resumes patch execution
set volume [0-1]
get asset path
get js path
has variable
Variable:
variable
cancel patch execution and quit showing an errormessage
invoke pre rendering of ops
stop, dispose and cleanup patch
unlink event - a link was deleted
configuration object for loading a patch
(String?)
: prefix for path to assets
(String?)
: path to assets
(String?)
: path to javascript files
(String?)
: dom element id of canvas element
(Function?)
: called when an error occurs
(Function?)
: called when patch finished loading all assets
(Function?)
: called when patch rendered it's first frame
(Boolean?)
: resize canvas automatically to window size
(Boolean?)
: do requestAnimationFrame set to false if you want to trigger exec() from outside (only do if you know what you are doing)
(Boolean?)
: clear canvas in transparent color every frame
(Boolean?)
: clear depth every frame
(Boolean?)
: enable/disable validation of shaders *
(Boolean?)
(Number?)
: 0 for maximum possible frames per second
(String?)
: default precision for glsl shader
cables gl context/state manager
pop viewPort stack
push a shader to the shader stack
push a shader to the shader stack
pop current used shader from shader stack
pop current used shader from shader stack
push a framebuffer to the framebuffer stack
push a framebuffer to the framebuffer stack
get current framebuffer
Framebuffer:
current framebuffer or null
pop framebuffer stack
Framebuffer:
current framebuffer or null
log warning to console if the rendering of one frame has not been started / handy to check for async problems
execute the callback next frame, once
push depth testing enabled state
push depth write enabled state
push depth testing enabled state
push depth write enabled state
pop depth testing state
pop depth writing state
pop face culling enabled state
pop depth writing state
pop face culling enabled state
push face culling face enabled state
push face culling face side
push face culling face enabled state
push face culling face side
pop face culling face side
pop face culling face side
enable / disable depth testing
like gl.depthFunc(boolean);
pop depth testing and set the previous state
pop depth compare func
enable / disable blend like gl.enable(gl.BLEND); / gl.disable(gl.BLEND);
pop blend state and set the previous state
pop predefined blendmode / switch back to previous blendmode
enable / disable stencil testing
pop stencil test state and set the previous state
should an op now draw helpermeshes
set cursor
Current projection matrix
Current model matrix
Current view matrix
push a matrix to the projection matrix stack
pop projection matrix stack
mat4:
current projectionmatrix
push a matrix to the model matrix stack
// see source code of translate op:
cgl.pushModelMatrix();
mat4.translate(cgl.mMatrix,cgl.mMatrix, vec);
trigger.trigger();
cgl.popModelMatrix();
pop model matrix stack
mat4:
current modelmatrix
get model matrix
mat4:
current modelmatrix
push a matrix to the view matrix stack
pop view matrix stack
mat4:
current viewmatrix
pop depth testing state
cables webgpu context/state manager
pop viewPort stack
push a shader to the shader stack
push a shader to the shader stack
pop current used shader from shader stack
pop current used shader from shader stack
push a framebuffer to the framebuffer stack
push a framebuffer to the framebuffer stack
get current framebuffer
Framebuffer:
current framebuffer or null
pop framebuffer stack
Framebuffer:
current framebuffer or null
log warning to console if the rendering of one frame has not been started / handy to check for async problems
execute the callback next frame, once
push depth testing enabled state
push depth write enabled state
push depth testing enabled state
push depth write enabled state
pop depth testing state
pop depth writing state
pop face culling enabled state
pop depth writing state
pop face culling enabled state
push face culling face enabled state
push face culling face side
push face culling face enabled state
push face culling face side
pop face culling face side
pop face culling face side
enable / disable depth testing
like gl.depthFunc(boolean);
pop depth testing and set the previous state
pop depth compare func
enable / disable blend like gl.enable(gl.BLEND); / gl.disable(gl.BLEND);
pop blend state and set the previous state
pop predefined blendmode / switch back to previous blendmode
enable / disable stencil testing
pop stencil test state and set the previous state
should an op now draw helpermeshes
set cursor
Current projection matrix
Current model matrix
Current view matrix
push a matrix to the projection matrix stack
pop projection matrix stack
mat4:
current projectionmatrix
push a matrix to the model matrix stack
// see source code of translate op:
cgl.pushModelMatrix();
mat4.translate(cgl.mMatrix,cgl.mMatrix, vec);
trigger.trigger();
cgl.popModelMatrix();
pop model matrix stack
mat4:
current modelmatrix
get model matrix
mat4:
current modelmatrix
push a matrix to the view matrix stack
pop view matrix stack
mat4:
current viewmatrix
pop depth testing state
LoadingStatus class, manages asynchronous loading jobs
Part of the Web Audio API, the AudioBuffer interface represents a short audio asset residing in memory.
Part of the Web Audio API, the AudioNode interface is a generic interface for representing an audio processing module.
The AudioContext interface represents an audio-processing graph built from audio modules linked together
Checks if a global audio context has been created and creates it if necessary. This audio context can be used for native Web Audio as well as Tone.js ops. Associates the audio context with Tone.js if it is being used
Returns the audio context.
Before createAudioContext must have been called at least once.
It most cases you should use createAudioContext, which just returns the audio context
when it has been created already.
Creates an audio in port for the op with name portName
When disconnected it will disconnect the previous connected audio node
from the op's audio node.
(CABLES.Port | undefined):
The newly created audio in port or
undefined
if there was an error
Sometimes it is necessary to replace a node of a port, if so all
connections to this node must be disconnected and connections to the new
node must be made.
Can be used for both Audio ports as well as AudioParam ports
if used with an AudioParam pass e.g. synth.frequency as newNode
Creates an audio param in port for the op with name portName. The port accepts other audio nodes as signals as well as values (numbers) When the port is disconnected it will disconnect the previous connected audio node from the op's audio node and restore the number value set before.
(CABLES.Port | undefined):
The newly created port, which takes care of (dis-)connecting on its own, or
undefined
if there was an error
Loads an audio file and updates the loading indicators when cables is run in the editor.
Measuring time
toggle between play/pause state
set current time
(re)starts the timer
pauses the timer
var shader=new CGL.Shader(cgl,'MinimalMaterial');
shader.setSource(attachments.shader_vert,attachments.shader_frag);
enable an extension for the shader
copy all uniform values from another shader
copy current shader
any:
newShader
easily enable/disable a define without a value
add a define to a shader, e.g. #define DO_THIS_THAT 1
remove a define from a shader
remove a module from shader
add a module
add a struct & its uniforms to the fragment shader
Object:
const shader = new CGL.Shader(cgl, 'MinimalMaterial');
shader.setSource(attachments.shader_vert, attachments.shader_frag);
shader.addUniformStructFrag("Light", "uniformLight", [
{ "type": "3f", "name": "position", "v1": null },
{ "type": "4f", "name": "color", "v1": inR, v2: inG, v3: inB, v4: inAlpha }
]);
add a struct & its uniforms to the vertex shader
CGL.Uniform:
const shader = new CGL.Shader(cgl, 'MinimalMaterial');
shader.setSource(attachments.shader_vert, attachments.shader_frag);
shader.addUniformStructVert("Light", "uniformLight", [
{ "type": "3f", "name": "position", "v1": null },
{ "type": "4f", "name": "color", "v1": inR, v2: inG, v3: inB, v4: inAlpha }
]);
add a struct & its uniforms to the both shaders. PLEASE NOTE: it is not possible to add the same struct to both shaders when it contains ANY integer members.
Object:
const shader = new CGL.Shader(cgl, 'MinimalMaterial');
shader.setSource(attachments.shader_vert, attachments.shader_frag);
shader.addUniformStructBoth("Light", "uniformLight", [
{ "type": "3f", "name": "position", "v1": null },
{ "type": "4f", "name": "color", "v1": inR, v2: inG, v3: inB, v4: inAlpha }
]);
push a texture on the stack. those textures will be bound when binding the shader. texture slots are automatically set
pop last texture
pop all textures
webgl renderable 3d object
const cgl=this._cgl
const mesh=new CGL.Mesh(cgl, geometry);
function render()
{
mesh.render(cgl.getShader());
}
set geometry for mesh
set geometry for mesh
update vertices only from a geometry
update texture coordinates only from a geometry
update normals only from a geometry
update vertex indices / faces
draw mesh to screen
A Texture
// generate a 256x256 pixel texture of random colors
const size=256;
const data = new Uint8Array(size*size*4);
for(var x=0;x<size*size*4;x++) data[ x*4+3]=255;
const tex=new CGL.Texture(cgl);
tex.initFromData(data,size,size,CGL.Texture.FILTER_NEAREST,CGL.Texture.WRAP_REPEAT);
delete texture. use this when texture is no longer needed
bounding box
get biggest number of maxX,maxY,maxZ
size of bounding box
center of bounding box
center x
center y
center z
minimum x
minimum y
minimum z
maximum x
maximum y
maximum z
returns a copy of the bounding box
a geometry contains all information about a mesh, vertices, texturecoordinates etc. etc.
// create a triangle with all attributes
const geom=new Geometry("triangle"),
geom.vertices = [
0.0, sizeH.get(), 0.0,
-sizeW.get(), -sizeH.get(), 0.0,
sizeW.get(), -sizeH.get(), 0.0 ];
geom.vertexNormals = [
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
0.0, 0.0, 1.0 ];
geom.tangents = [
1,0,0,
1,0,0,
1,0,0 ];
geom.biTangents = [
0,1,0,
0,1,0,
0,1,0 ];
geom.texCoords = [
0.5, 0.0,
1.0, 1.0,
0.0, 1.0, ];
geom.verticesIndices = [
0, 1, 2 ];
flip normals
flip order of vertices in geom faces
clear all buffers/set them to length 0
set vertices
set texcoords
merge a different geometry into the this geometry
create a copy of the geometry
Calculaten normals
Calculates tangents & bitangents with the help of uv-coordinates. Adapted from Lengyel, Eric. “Computing Tangent Space Basis Vectors for an Arbitrary Mesh”. Terathon Software 3D Graphics Library. https://fenix.tecnico.ulisboa.pt/downloadFile/845043405449073/Tangent%20Space%20Calculation.pdf
remove all vertex indizes, vertices array will contain 3*XYZ for every triangle
a framebuffer
Shader uniforms
types:
f - float 2f - vec2 3f - vec3 4f - vec4 i - integer t - texture m4 - mat4, 4x4 float matrix f[] - array of floats 2f[] - array of float vec2 3f[] - array of float vec3 4f[] - array of float vec4
// bind float uniform called myfloat and initialize with value 1.0
const unir=new CGL.Uniform(shader,'f','myfloat',1.0);
unir.setValue(1.0);
// bind float uniform called myfloat and automatically set it to input port value
const myPort=op.inFloat("input");
const pv=new CGL.Uniform(shader,'f','myfloat',myPort);
multiply to get radians from degree, e.g. 360 * CGL.DEG2RAD
to get degrees from radians, e.g. 3.14 * CGL.RAD2DEG
get normalized mouse wheel delta (including browser specific adjustment)
Number:
normalized delta
Used to match HTML entities and HTML characters.