ThreeJS Uniform

Uniforms are global GLSL variables. They are passed to shader programs.

Code Example

When declaring a uniform of a ShaderMaterial, it is declared by value or by object.

uniforms: {
	time: { value: 1.0 },
	resolution: new Uniform( new Vector2() )
};

Uniform types

A value property is required for each uniform. The type of the value must correspond to the type of the uniform variable in the GLSL code, as specified in the table below for the primitive GLSL types. Arrays and uniform structures are also supported. Primitive-type GLSL arrays must be specified as either an array of the corresponding THREE objects or as a flat array containing the data of all the objects. In other words, arrays cannot be used to represent GLSL primitives. This rule does not apply in a transitive sense. An array of vec2 arrays, each of which has a length of five vectors, must be an array of arrays, consisting of either five Vector2 objects or ten numbers.

Structured Uniforms

In your shader code, you may want to organise uniforms as structs at times. So three, the following style must be used. js can handle structured uniform data.

uniforms = {
	data: {
		value: {
			position: new Vector3(),
			direction: new Vector3( 0, 0, 1 )
		 }
	}
};

This definition can be mapped on the following GLSL code:

struct Data {
	vec3 position;
	vec3 direction;
};
uniform Data data;

Structured Uniforms with Arrays

It's also possible to manage structs in arrays. The syntax for this use case looks like so:

const entry1 = {
	position: new Vector3(),
	direction: new Vector3( 0, 0, 1 )
};
const entry2 = {
	position: new Vector3( 1, 1, 1 ),
	direction: new Vector3( 0, 1, 0 )
};


uniforms = {
	data: {
		value: [ entry1, entry2 ]
	}
};

This definition can be mapped on the following GLSL code:

struct Data {
	vec3 position;
	vec3 direction;
};


uniform Data data[ 2 ];

Constructor

Uniform( value : Object )

value -- An object containing the value to set up the uniform. It's type must be one of the Uniform Types described above.

Properties

.value : Object

Current value of the uniform.

Methods

.clone () : Uniform

Returns a clone of this uniform.

If the uniform's value property is an Object with a clone() method, this is used, otherwise, the value is copied by assignment. Array values are shared between cloned Uniforms.


Related Topics

ThreeJS Helpers 2

PolarGridHelper The PolarGridHelper is an object to define polar grids. Grids are two-dimensional arrays of lines. Code Example const radius = 10; const radials = 16; const circles = 8; const divisions = 64; const helper =...

4 minutes read.

ThreeJS Cameras

ArrayCamera ArrayCamera can be used to render a scene using a preset group of cameras quickly. This is an important feature of VR scene rendering performance. An array of sub cameras is...

6 minutes read.

ThreeJS Audio

It is used to create a non-positional (global ) audio object. Code Example: // create an AudioListener and add it to the camera const listener = new THREE.AudioListener(); camera.add( listener ); // create a global...

6 minutes read.

ThreeJS Loader 1

AnimationLoader Class for loading AnimationClips in JSON format. This uses the FileLoader internally for loading files. Code Example // instantiate a loader const loader = new THREE.AnimationLoader(); // load a resource loader.load( // resource URL 'animations/animation.js', // onLoad callback function...

8 minutes read.

ThreeJS Shadows

LightShadow Serves as a base class for the other shadow classes. Constructor LightShadow( camera : Camera ) camera - the light's view of the world. Create a new LightShadow. This is not intended to be...

7 minutes read.

ThreeJS Layers

A Layers object assigns an Object3D to one or more of the 32 layers numbered 0 to 31 - the layers are internally stored as a bit mask, and all...

1 minute read.

ThreeJS Uniform

Uniforms are global GLSL variables. They are passed to shader programs. Code Example When declaring a uniform of a ShaderMaterial, it is declared by value or by object. uniforms: { time: { value: 1.0...

2 minutes read.

ThreeJS Animation Systems

You may animate many aspects of your models with the three.js animation system, including the bones of a skinned and rigged model, morph targets, multiple material properties (colours, opacity, booleans),...

3 minutes read.

ThreeJS BufferAttribute

This class stores data for an attribute associated with a BufferGeometry (such as vertex positions, face indices, normals, colours, UVs, and any custom attributes), allowing for more efficient data passing...

4 minutes read.

ThreeJS Lines and Texts

Drawing Lines Let's say you want to draw a line or a circle, not a wireframe Mesh. First, we need to set up the renderer, scene, and camera. Here is the...

3 minutes read.

ThreeJS Math

Box2 Represents an axis-aligned bounding box (AABB) in 2D space. Constructor Box2( min : Vector2, max : Vector2 ) min - (optional) Vector2 representing the lower (x, y) boundary of the box. Default is...

48 minutes read.

ThreeJS Managers

DefaultLoadingManager When no custom manager is specified, most loaders use a global instance of the LoadingManager. This will suffice for most purposes, but there may be times when you want separate loading...

4 minutes read.

ThreeJS Material - Mesh

MeshBasicMaterial A material for drawing geometries in a simple shaded (flat or wireframe) way. This material is not affected by lights. Constructor MeshBasicMaterial( parameters : Object ) parameters - (optional) an object with one or...

24 minutes read.

ThreeJS AnimationMixer

The AnimationMixer is a player that allows you to play animations on a specific object in the scene. When many items in a scene are animated individually, each object may...

2 minutes read.

ThreeJS Compatibiliy Check and Running Locally

Even though this is becoming less of an issue, some devices or browsers may still be incompatible with WebGL. The method below enables you to check if it is supported...

3 minutes read.

ThreeJS Loaders 2

ImageBitmapLoader A loader that converts an image to an ImageBitmap. An ImageBitmap provides an asynchronous and resource-efficient path for preparing textures for WebGL rendering. ImageBitmapLoader, unlike FileLoader, does not prevent multiple concurrent...

8 minutes read.

ThreeJS InterleavedBuffer

The term "interleaved" refers to the packing of multiple attributes, possibly of different types (e.g., position, normal, uv, colour) into a single array buffer. Constructor InterleavedBuffer( array : TypedArray, stride : Integer...

3 minutes read.

ThreeJS Property Binding and Mixer

PropertyBinding Internally, this holds a reference to real property in the scene graph. Constructor PropertyBinding( rootNode : Object3D, path, parsedPath ) -- rootNode: -- path -- parsedPath (optional) Properties The properties are as follows: .path : Number.parsedPath...

2 minutes read.

ThreeJS AnimationClip

An AnimationClip is a group of keyframe tracks that may be reused to depict an animation. The "Animation System" page in the "Next Steps" part of the handbook provides an overview...

2 minutes read.

ThreeJS AnimationObjectGroup and Utils

AnimationObjectGroup A group of objects that receives a shared animation state. Usage Add items you'd normally send as 'root' to AnimationMixer's function Object() { [native code] } or clipAction method, and instead pass...

2 minutes read.