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 Geometries-1

BoxGeometry BoxGeometry is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'. On creation, the cuboid is centered on the origin, with each edge parallel to...

7 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 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 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 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 Matrix Transformations

Three.js encodes 3D transformations using matrices for translations (position), rotations, and scaling. Every Object3D instance has a matrix that records the location, rotation, and scale of the object. This page...

2 minutes read.

ThreeJS Renderers

WebGLMultipleRenderTargets A special render target that enables a fragment shader to write to several textures. This approach is useful for advanced rendering techniques like post-processing or deferred rendering. Heads up: WebGLMultipleRenderTargets...

15 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 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 Testing with npm

This article explains how to install three.js in a node.js environment so that automated tests may be run. Tests can be done manually or with the help of automated CI...

4 minutes read.

ThreeJS Lights

Light Abstract base class for lights - all other light types inherit the properties and methods described here. Constructor Light( color : Integer, intensity : Float ) color - (optional) hexadecimal color of the...

10 minutes read.

ThreeJS Creating VR Content

This article gives a quick introduction of the main components of a three.js-based web-based VR application. Workflow      First, you have to include VRButton.js into your project. import { VRButton } from...

1 minute read.

ThreeJS Materials 3

RawShaderMaterial This class works just like ShaderMaterial, except that definitions of built-in uniforms and attributes are not automatically prepended to the GLSL shader code. Code Example const material = new THREE.RawShaderMaterial( {    ...

9 minutes read.

ThreeJS Object3D

This is the base class for most three.js objects, and it provides a set of properties and methods for manipulating objects in 3D space. It should be noted that this can...

9 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 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 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.

ThreeJS Raycaster

This class is intended to help with raycasting. Raycasting is used for a variety of purposes, including mouse picking (determining which objects in 3D space the mouse is over). Code Example const...

4 minutes read.

ThreeJS Helper 1

ArrowHelper A 3D arrow object for visualizing directions. Code Example const dir = new THREE.Vector3( 1, 2, 0 ); //normalize the direction vector (convert to vector of length 1) dir.normalize(); const origin = new THREE.Vector3( 0,...

5 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.