Class: Points | Points

Points()

Main class Points, this is the entry point of an application with this library.

Constructor

new Points()

Source:: points.js, line 36

Example

import Points from 'points';
const points = new Points('canvas');

let renderPasses = [
    new RenderPass(vert1, frag1, compute1),
    new RenderPass(vert2, frag2, compute2)
];

await points.init(renderPasses);
update();

function update() {
    points.update();
    requestAnimationFrame(update);
}

Members

canvas HTMLCanvasElement

Reference to the canvas assigned in the constructor

Source:: points.js, line 2170

depthWriteEnabled

Depth sort of elements is true by default. To allow transparency and a custom type of sort, set this as false;

Source:: points.js, line 2240

fitWindow

If the canvas has a fixed size e.g. 800x800, fitWindow will fill the available window space.

Source:: points.js, line 2223

Example

if (await points.init(renderPasses)) {
     points.fitWindow = isFitWindowData.isFitWindow;
     update();
 }

fullscreen Boolean

Triggers the app to run in full screen mode

Source:: points.js, line 2196

Example

points.fullscreen = true

renderPasses

Get the active list of RenderPass

Source:: points.js, line 1249

Methods

addEventListener(name, callback, structSize)

Listens for an event dispatched from WGSL code

Parameters:

Name	Type	Default	Description
`name`	String		Number that represents an event Id
`callback`	function		function to be called when the event occurs
`structSize`	Number	`1`	size of the array data to be returned

Source:: points.js, line 934

Example

// the event name will be reflected as a variable name in the shader
// and a data variable that starts with the name
points.addEventListener('click_event', data => {
    // response action in JS
     const [a, b, c, d] = data;
     console.log({a, b, c, d});
}, 4); // data will have 4 items

// wgsl string
 if(params.mouseClick == 1.){
     // we update our event response data with something we need
     // on the js side
     // click_event_data has 4 items to fill
     click_event_data[0] = params.time;
     // Same name of the Event
     // we fire the event with a 1
     // it will be set to 0 in the next frame
     click_event.updated = 1;
 }js

addRenderPass(renderPass, params)

Injects a render pass after all the render passes added by the user.

Parameters:

Name	Type	Description
`renderPass`	RenderPass
`params`	Object

Source:: points.js, line 1228

asyncinit(renderPasses) → Boolean

One time function call to initialize the shaders.

Parameters:

Name	Type	Description
`renderPasses`	RenderPass[]	Collection of RenderPass, which contain Vertex, Compute and Fragment shaders.

Source:: points.js, line 1164

Returns:

false | undefined

Type:: Boolean

Example

await points.init(renderPasses)

setAudio(name, path, volume, loop, autoplay) → HTMLAudioElement

Assigns an audio FrequencyData to a StorageMap.
Calling setAudio creates a Storage with name in the wgsl shaders.
From this storage you can read the audio data sent to the shader as numeric values.
Values in audio.data are composed of integers on a scale from 0..255

Parameters:

Name	Type	Description
`name`	string	name of the Storage and prefix of the length variable e.g. `[name]Length`.
`path`	string	audio file address in a web server
`volume`	Number
`loop`	boolean
`autoplay`	boolean

Source:: points.js, line 793

Returns:

Type:: HTMLAudioElement

Example

const audio = points.setAudio('audio', 'audiofile.ogg', volume, loop, autoplay);

// wgsl
let audioX = audio.data[ u32(uvr.x * params.audioLength)] / 256;js

setBindingTexture(writeName, readName, writeIndex, readIndex, size) → Object

Special texture where data can be written to it in the Compute Shader and read from in the Fragment Shader OR from a RenderPass to another. If you use writeIndex and readIndex it will share data between RenderPasses Is a one way communication method. Ideal to store data to it in the Compute Shader and later visualize it in the Fragment Shader.

Parameters:

Name	Type	Description
`writeName`	string	name of the variable in the compute shader
`readName`	string	name of the variable in the fragment shader
`writeIndex`	number	RenderPass allowed to write into `outputTex`
`readIndex`	number	RenderPass allowed to read from `computeTexture`
`size`	number, 2[]	dimensions of the texture, by default screen size

Source:: points.js, line 879

Returns:

Type:: Object

Example

points.setBindingTexture('outputTex', 'computeTexture');

// wgsl string
//// compute
textureStore(outputTex, GlobalId.xy, rgba);
//// fragment
let value = texturePosition(computeTexture, imageSampler, position, uv, false);js

setConstant(name, value, structName) → Object

Create a WGSL const initialized from JS. Useful to set a value you can't initialize in WGSL because you don't have the value yet. The constant will be ready to use on the WGSL shder string.

Parameters:

Name	Type	Description
`name`	String
`value`	string Number
`structName`	String

Source:: points.js, line 261

Returns:

Type:: Object

Example

points.setConstant('NUMPARTICLES', 64, 'f32')

// wgsl string
// this should print `NUMPARTICLES` and be ready to use.
const NUMPARTICLES:f32 = 64; // this will be hidden to the developer

// your code:
const particles = array<Particle, NUMPARTICLES>();js side

setLayers(numLayers, shaderType)

Layers of data made of vec4f. This creates a storage array named layers of the size of the screen in pixels;

Parameters:

Name	Type	Description
`numLayers`	Number
`shaderType`	GPUShaderStage

Source:: points.js, line 433

Example

points.setLayers(2);

// wgsl string
var point = textureLoad(image, vec2<i32>(ix,iy), 0);
layers[0][pointIndex] = point;
layers[1][pointIndex] = point;js

setMeshDensity(numColumns, numRows)

Establishes the density of the base mesh, by default 1x1, meaning two triangles. The final number of triangles is numColumns * numRows * 2 ( 2 being the triangles )

Parameters:

Name	Type	Description
`numColumns`	Number	quads horizontally
`numRows`	Number	quads vertically

Source:: points.js, line 1072

Example

points.setMeshDensity(20,20);

// wgsl string
//// vertex shader
var modifiedPosition = position;
modifiedPosition.w = modifiedPosition.w + sin(f32(vertexIndex) * (params.time) * .01) * .1;

return defaultVertexBody(modifiedPosition, color, uv);js

setSampler(name, descriptor) → Object

Creates a sampler to be sent to the shaders. Internally it will be a GPUSampler

Parameters:

Name	Type	Description
`name`	string	Name of the `sampler` to be called in the shaders.
`descriptor`	GPUSamplerDescriptor	`Object` with properties that affect the image. See example below.

Source:: points.js, line 476

Returns:

Type:: Object

Example

const descriptor = {
 addressModeU: 'repeat',
 addressModeV: 'repeat',
 magFilter: 'nearest',
 minFilter: 'nearest',
 mipmapFilter: 'nearest',
 //maxAnisotropy: 10,
}

points.setSampler('imageSampler', descriptor);

// wgsl string
let value = texturePosition(image, imageSampler, position, uvr, true);js

setStorage(name, structName, read, shaderType) → Object

Creates a persistent memory buffer across every frame call. See GPUBuffer
Meaning it can be updated in the shaders across the execution of every frame.
It can have almost any type, like f32 or vec2f or even array.

Parameters:

Name	Type	Description
`name`	string	Name that the Storage will have in the shader
`structName`	string	Name of the struct already existing on the shader. This will be the type of the Storage.
`read`	boolean	if this is going to be used to read data back
`shaderType`	GPUShaderStage	this tells to what shader the storage is bound

Source:: points.js, line 307

Returns:

Type:: Object

Examples

points.setStorage('result', 'f32');

// wgsl string
result[index]  = 128.;js

points.setStorage('colors', 'array<vec3f, 6>');

// wgsl string
colors[index] = vec3f(248, 208, 146) / 255;js

setStorageMap(name, arrayData, structName, read, shaderType)

Creates a persistent memory buffer across every frame call that can be updated. See GPUBuffer
Meaning it can be updated in the shaders across the execution of every frame.
It can have almost any type, like f32 or vec2f or even array.
The difference with setStorage is that this can be initialized with data.

Parameters:

Name	Type	Default	Description
`name`	string		Name that the Storage will have in the shader.
`arrayData`	Uint8Array.<ArrayBuffer> Number[] Number		array with the data that must match the struct.
`structName`	string		Name of the struct already existing on the shader. This will be the type of the Storage.
`read`	boolean	`false`	if this is going to be used to read data back.
`shaderType`	GPUShaderStage		this tells to what shader the storage is bound

Source:: points.js, line 370

Example

const firstMatrix = [
    2, 4 , // 2 rows 4 columns
    1, 2, 3, 4,
    5, 6, 7, 8
];
const secondMatrix = [
    4, 2, // 4 rows 2 columns
    1, 2,
    3, 4,
    5, 6,
    7, 8
];

// Matrix should exist as a struct in the wgsl shader
points.setStorageMap('firstMatrix', firstMatrix, 'Matrix');
points.setStorageMap('secondMatrix', secondMatrix, 'Matrix');
points.setStorage('resultMatrix', 'Matrix', true); // this reads data back

// wgsl string
struct Matrix {
    size : vec2f,
    numbers: array<f32>,
}

resultMatrix.size = vec2(firstMatrix.size.x, secondMatrix.size.y);js examples/data1

setTexture2d(name, copyCurrentTexture, shaderType, renderPassIndex) → Object

Creates a texture_2d in the shaders.
Used to write data and then print to screen.
It can also be used for write the current render pass (what you see on the screen) to this texture, to be used in the next cycle of this render pass; meaning you effectively have the previous frame data before printing the next one.

Parameters:

Name	Type	Description
`name`	String	Name to call the texture in the shaders.
`copyCurrentTexture`	boolean	If you want the fragment output to be copied here.
`shaderType`	GPUShaderStage	To what GPUShaderStage you want to exclusively use this variable.
`renderPassIndex`	Number	If using `copyCurrentTexture` this tells which RenderPass it should get the data from. If not set then it will grab the last pass.

Source:: points.js, line 531

Returns:

Type:: Object

Example

points.setTexture2d('feedbackTexture', true);

// wgsl string
var rgba = textureSampleLevel(
    feedbackTexture, feedbackSampler,
    vec2f(f32(GlobalId.x), f32(GlobalId.y)),
    0.0
);js

asyncsetTextureImage(name, path, shaderType) → Object

Loads an image as texture_2d and then it will be available to read data from in the shaders.
Supports web formats like JPG, PNG.

Parameters:

Name	Type	Default	Description
`name`	string		identifier it will have in the shaders
`path`	string		image address in a web server
`shaderType`	GPUShaderStage	`null`	in what shader type it will exist only

Source:: points.js, line 585

Returns:

Type:: Object

Example

await points.setTextureImage('image', './../myimage.jpg');

// wgsl string
let rgba = texturePosition(image, imageSampler, position, uvr, true);js

asyncsetTextureImageArray(name, paths, shaderType)

Load images as texture_2d_array

Parameters:

Name	Type	Description
`name`	string	id of the wgsl variable in the shader
`paths`	Array	image addresses in a web server
`shaderType`	GPUShaderStage

Source:: points.js, line 669

asyncsetTextureString(name, text, path, size, offset, shaderType) → Object

Loads a text string as a texture.
Using an Atlas or a Spritesheet with UTF-16 chars (path) it will create a new texture that contains only the text characters.
Characters in the atlas path must be in order of the UTF-16 chars.
It can have missing characters at the end or at the start, so the offset is added to take account for those chars.
For example, A is 65, but if one character is removed before the letter A, then offset is -1

Parameters:

Name	Type	Default	Description
`name`	String		id of the wgsl variable in the shader
`text`	String		text you want to load as texture
`path`	String		atlas to grab characters from, image address in a web server
`size`	Object		size of a individual character e.g.: `{x:10, y:20}`
`offset`	Number	`0`	how many characters back or forward it must move to start
`shaderType`	GPUShaderStage	`null`	To what GPUShaderStage you want to exclusively use this variable.

Source:: points.js, line 655

Returns:

Type:: Object

Example

await points.setTextureString(
    'textImg',
    'Custom Text',
    './../img/inconsolata_regular_8x22.png',
    size,
    -32
);

// wgsl string
let textColors = texturePosition(textImg, imageSampler, position, uvr, true);js

asyncsetTextureVideo(name, path, shaderType) → Object

Loads a video as texture_externaland then it will be available to read data from in the shaders. Supports web formats like mp4 and webm.

Parameters:

Name	Type	Description
`name`	string	id of the wgsl variable in the shader
`path`	string	video address in a web server
`shaderType`	GPUShaderStage

Source:: points.js, line 712

Returns:

Type:: Object

Example

await points.setTextureVideo('video', './../myvideo.mp4');

// wgsl string
let rgba = textureExternalPosition(video, imageSampler, position, uvr, true);js

asyncsetTextureWebcam(name, shaderType) → Object

Loads webcam as texture_externaland then it will be available to read data from in the shaders.

Parameters:

Name	Type	Description
`name`	String	id of the wgsl variable in the shader
`shaderType`	GPUShaderStage

Source:: points.js, line 746

Returns:

Type:: Object

Example

await points.setTextureWebcam('video');

// wgsl string
et rgba = textureExternalPosition(video, imageSampler, position, uvr, true);js

setUniform(name, value, structName) → Object

Sets a param (predefined struct already in all shaders) as uniform to send to all shaders. A Uniform is a value that can only be changed from the outside (js side, not the wgsl side), and unless changed it remains consistent.

Parameters:

Name	Type	Default	Description
`name`	string		name of the Param, you can invoke it later in shaders as `Params.[name]`
`value`	Number Boolean Number[]		Single number or a list of numbers. Boolean is converted to Number.
`structName`	string	`null`	type as `f32` or a custom struct. Default `f32`.

Source:: points.js, line 202

Returns:

Type:: Object

Example

 points.setUniform('color0', options.color0, 'vec3f');
 points.setUniform('color1', options.color1, 'vec3f');
 points.setUniform('scale', options.scale, 'f32');

// wgsl string
let color0 = vec4(params.color0/255, 1.);
let color1 = vec4(params.color1/255, 1.);
let finalColor:vec4f = mix(color0, color1, params.scale);js

asyncupdate()

Method executed on each requestAnimationFrame. Here's where all the calls to update data will be executed.

Source:: points.js, line 1984

Example

await points.init(renderPasses);
update();

function update() {
    points.update();
    requestAnimationFrame(update);
}

updateUniforms(arr)

Updates a list of uniforms

Parameters:

Name	Type	Description
`arr`	{name:String, value:Number}[]	object array of the type: `{name, value}`

Source:: points.js, line 229