API Reference

Class List

TransformFeedback

This object allows you to configure and use the transform feedback feature (WebGL2 only). How to use:

  1. First, check that you're on WebGL2, by looking at the `app.graphicsDevice.webgl2`` value.
  2. Define the outputs in your vertex shader. The syntax is out vec3 out_vertex_position, note that there must be out_ in the name. You can then simply assign values to these outputs in VS. The order and size of shader outputs must match the output buffer layout.
  3. Create the shader using TransformFeedback.createShader(device, vsCode, yourShaderName).
  4. Create/acquire the input vertex buffer. Can be any VertexBuffer, either manually created, or from a Mesh.
  5. Create the TransformFeedback object: var tf = new TransformFeedback(inputBuffer). This object will internally create an output buffer.
  6. Run the shader: tf.process(shader). Shader will take the input buffer, process it and write to the output buffer, then the input/output buffers will be automatically swapped, so you'll immediately see the result.
// *** shader asset ***
attribute vec3 vertex_position;
attribute vec3 vertex_normal;
attribute vec2 vertex_texCoord0;
out vec3 out_vertex_position;
out vec3 out_vertex_normal;
out vec2 out_vertex_texCoord0;
void main(void) {
    // read position and normal, write new position (push away)
    out_vertex_position = vertex_position + vertex_normal * 0.01;
    // pass other attributes unchanged
    out_vertex_normal = vertex_normal;
    out_vertex_texCoord0 = vertex_texCoord0;
}
// *** script asset ***
var TransformExample = pc.createScript('transformExample');

// attribute that references shader asset and material
TransformExample.attributes.add('shaderCode', { type: 'asset', assetType: 'shader' });
TransformExample.attributes.add('material', { type: 'asset', assetType: 'material' });

TransformExample.prototype.initialize = function() {
    var device = this.app.graphicsDevice;
    var mesh = pc.createTorus(device, { tubeRadius: 0.01, ringRadius: 3 });
    var node = new pc.GraphNode();
    var meshInstance = new pc.MeshInstance(mesh, this.material.resource, node);
    var model = new pc.Model();
    model.graph = node;
    model.meshInstances = [ meshInstance ];
    this.app.scene.addModel(model);

    // if webgl2 is not supported, TF is not available
    if (!device.webgl2) return;
    var inputBuffer = mesh.vertexBuffer;
    this.tf = new pc.TransformFeedback(inputBuffer);
    this.shader = pc.TransformFeedback.createShader(device, this.shaderCode.resource, "tfMoveUp");
};

TransformExample.prototype.update = function(dt) {
    if (!this.app.graphicsDevice.webgl2) return;
    this.tf.process(this.shader);
};

Summary

Static Methods

createShader

Creates a transform feedback ready vertex shader from code.

Properties

inputBuffer

The current input buffer.

outputBuffer

The current output buffer.

Methods

destroy

Destroys the transform feedback helper object.

process

Runs the specified shader on the input buffer, writes results into the new buffer, then optionally swaps input/output.

Details

Static Methods

createShader(graphicsDevice, vsCode, name)

Creates a transform feedback ready vertex shader from code.

Parameters

graphicsDeviceGraphicsDevice

The graphics device used by the renderer.

vsCodestring

Vertex shader code. Should contain output variables starting with "out_".

namestring

Unique name for caching the shader.

Returns

Shader

A shader to use in the process() function.

Constructor

TransformFeedback(inputBuffer, [usage])

Create a new TransformFeedback instance.

Parameters

inputBufferVertexBuffer

The input vertex buffer.

usagenumber

The optional usage type of the output vertex buffer. Can be:

Defaults to BUFFER_GPUDYNAMIC (which is recommended for continuous update).

Properties

VertexBufferinputBuffer

The current input buffer.

VertexBufferoutputBuffer

The current output buffer.

Methods

destroy()

Destroys the transform feedback helper object.

process(shader, [swap])

Runs the specified shader on the input buffer, writes results into the new buffer, then optionally swaps input/output.

Parameters

shaderShader

A vertex shader to run. Should be created with TransformFeedback.createShader.

swapboolean

Swap input/output buffer data. Useful for continuous buffer processing. Default is true.