Class: RenderPass

RenderPass(vertexShader, fragmentShader, computeShader, workgroupCountX, workgroupCountY, workgroupCountZ, init)

A RenderPass is a way to have a block of shaders to pass to your application pipeline and these render passes will be executed in the order you pass them in the Points#init method.

Constructor

new RenderPass(vertexShader, fragmentShader, computeShader, workgroupCountX, workgroupCountY, workgroupCountZ, init)

A collection of Vertex, Compute and Fragment shaders that represent a RenderPass. This is useful for PostProcessing.

Parameters:

Name	Type	Description
`vertexShader`	String	WGSL Vertex Shader in a String.
`fragmentShader`	String	WGSL Fragment Shader in a String.
`computeShader`	String	WGSL Compute Shader in a String.
`workgroupCountX`	String	Workgroup amount in X.
`workgroupCountY`	String	Workgroup amount in Y.
`workgroupCountZ`	String	Workgroup amount in Z.
`init`	function	Method to add custom uniforms or storage (points.set* methods). This is made for post processing multiple `RenderPass`. The method `init` will be called to initialize the buffer parameters.

Source:: RenderPass.js, line 101

Examples

import Points, { RenderPass } from 'points';
// vert, frag and compute are strings with the wgsl shaders.
let renderPasses = [
    new RenderPass(vert1, frag1, compute1),
    new RenderPass(vert2, frag2, compute2)
];
// we pass the array of renderPasses
await points.init(renderPasses);

const waves = new RenderPass(vertexShader, fragmentShader, null, 8, 8, 1, (points, params) => {
    points.setSampler('renderpass_feedbackSampler', null);
    points.setTexture2d('renderpass_feedbackTexture', true);
    points.setUniform('waves_scale', params.scale || .45);
    points.setUniform('waves_intensity', params.intensity || .03);
});
waves.required = ['scale', 'intensity'];init param example

Members

bundle

Render Bundle for performance

Source:: RenderPass.js, line 585

clearValue

Sets the color used to clear the RenderPass before drawing. (only if loadOp is set to clear) default: black

Source:: RenderPass.js, line 523

computeShader

get the compute shader content

Source:: RenderPass.js, line 254

cullMode

Triangles to discard. Default BACK. Use class CullMode

Source:: RenderPass.js, line 558

depthWriteEnabled

Controls whether your fragment shader can write to the depth buffer. By default true. To allow transparency and a custom type of sort, set this as false;

Source:: RenderPass.js, line 490

descriptor GPURenderPassDescriptor

Source:: RenderPass.js, line 531

device

Device reference to check if RenderBundle needs to be rebuilt

Source:: RenderPass.js, line 596

fragmentShader

get the fragment shader content

Source:: RenderPass.js, line 261

frontFace

Direction of the triangles. Counter Clockwise (CCW) or Clockwise (CW) Default CCW. Use class frontFace

Source:: RenderPass.js, line 573

index

Get the current RenderPass index order in the pipeline. When you add a RenderPass to the constructor or via Points#addRenderPass, this is the order it receives.

Source:: RenderPass.js, line 236

instanceCount

Number of instances that will be created of the current mesh (Vertex Buffer) in this RenderPass. This means if you have a quad, it will create instanceCount number of independent quads on the screen. Useful for instanced particles driven by a Storage buffer.

Source:: RenderPass.js, line 424

loadOp

Controls if the last RenderPass data is preserved on screen or cleared. Default LoadOp#CLEAR

Source:: RenderPass.js, line 508

meshes

For internal purposes ids and names of the meshes

Source:: RenderPass.js, line 1174

params

Parameters specifically for Post RenderPass

Source:: RenderPass.js, line 445

params

Source:: RenderPass.js, line 452

required

List of buffer names that are required for this RenderPass so if it shows them in the console.

Source:: RenderPass.js, line 413

topology

To render as Triangles, lines or points. Use class PrimitiveTopology

Source:: RenderPass.js, line 544

vertexShader

get the vertex shader content

Source:: RenderPass.js, line 247

workgroupCountX

How many workgroups are in the X dimension.

Source:: RenderPass.js, line 352

workgroupCountX

Source:: RenderPass.js, line 359

workgroupCountY

How many workgroups are in the Y dimension.

Source:: RenderPass.js, line 366

workgroupCountY

Source:: RenderPass.js, line 373

workgroupCountZ

How many workgroups are in the Z dimension.

Source:: RenderPass.js, line 380

workgroupCountZ

Source:: RenderPass.js, line 387

Methods

addCube(name, coordinate, dimensions, color)

Adds a mesh cube

Parameters:

Name	Type	Description
`name`	String	The name will show up in the `mesh` Uniform.
`coordinate`	Object
`dimensions`	Object
`color`	Object

Source:: RenderPass.js, line 741

Example

renderPass.addCube('base_cube').instanceCount = NUMPARTICLES;

addCylinder(name, coordinate, radius, height, radialSegments, cap, color) → Object

Adds a Cylinder mesh

Parameters:

Name	Type	Default	Description
`name`	String		The name will show up in the `mesh` Uniform.
`coordinate`	Object
`radius`	Number	`0.5`
`height`	Number	`1`
`radialSegments`	Number	`32`
`cap`	Boolean	`true`
`color`	Object

Source:: RenderPass.js, line 1013

Returns:

Type:: Object

Example

renderPass.addCylinder('myCylinder');

addMesh(name, vertices, colors, uvs, normals)

Add a external mesh with the provided required data.

Parameters:

Name	Type	Description
`name`	String	The name will show up in the `mesh` Uniform.
`vertices`	{x:Number, y:Number, z:Number}[]
`colors`	{r:Number, g:Number, b:Number, a:Number}[]
`uvs`	{u:Number, v:Number}[]
`normals`	Number[]

Source:: RenderPass.js, line 1141

Example

const url = '../models/monkey.glb';
const data = await loadAndExtract(url);
const { positions, colors, uvs, normals, indices, colorSize, texture } = data[0]
renderPass.addMesh('monkey', positions, colors, colorSize, uvs, normals, indices)
renderPass.depthWriteEnabled = true;

addPlane(name, coordinate, dimensions, color, segments)

Adds a mesh quad

Parameters:

Name	Type	Description
`name`	String	The name will show up in the `mesh` Uniform.
`coordinate`	Object
`dimensions`	Object
`color`	Object
`segments`	Object	mesh subdivisions

Source:: RenderPass.js, line 665

Example

renderPass.addPlane('plane', { x: 0, y: 0, z: 0 }, { width: 2, height: 2 }).instanceCount = NUMPARTICLES;

addSphere(name, coordinate, color, radius, segments, rings)

Adds a mesh sphere

Parameters:

Name	Type	Default	Description
`name`	String		The name will show up in the `mesh` Uniform.
`coordinate`	Object
`color`	Object
`radius`	Number	`1`
`segments`	Number	`16`
`rings`	Number	`12`

Source:: RenderPass.js, line 840

Example

renderPass.addSphere('sphere').instanceCount = 100;

addTorus(name, coordinate, radius, tube, radialSegments, tubularSegments, color) → Object

Adds a Torus mesh

Parameters:

Name	Type	Default	Description
`name`	String		The name will show up in the `mesh` Uniform.
`coordinate`	Object
`radius`	Number	`1`
`tube`	Number	`0.4`
`radialSegments`	Number	`32`
`tubularSegments`	Number	`24`
`color`	Object

Source:: RenderPass.js, line 924

Returns:

Type:: Object

Example

renderPass.addTorus('myTorus');

init(points)

Function where the init parameter (set in the constructor) is executed and this call will pass the parameters that the RenderPass requires to run.

Parameters:

Name	Type	Description
`points`	Points	instance of Points to call set* functions like Points#setUniform and others.

Source:: RenderPass.js, line 398