Skip to main content
Version: Phaser v4.0.0

NoiseCell3D

A NoiseCell3D Game Object.

This game object is a quad which displays cellular noise. You can manipulate this object like any other, make it interactive, and use it in filters and masks to create visually stunning effects.

Behind the scenes, a NoiseCell3D is a Phaser.GameObjects.Shader using a specific shader program.

Cellular noise, also called Worley Noise or Voronoi Noise, consists of a pattern of cells. This is good for modeling natural phenomena like waves, clouds, or scales.

You can set the color and transparency, cell count, variation, and seed value of the noise. You can change the detail level by increasing noiseIterations. You can change the noise mode to output sharp edges, soft edges, or flat colors for the cells.

You can scroll the noise by animating the noiseOffset property.

You can set noiseNormalMap to output a normal map. This is a quick way to add texture for lighting.

The 3D version of NoiseCell has one extra dimension: Z. The shader only renders the XY slice through the noise field. Because the centers of cells typically lie elsewhere in the hypervolume, cells appear with variation in brightness. You can scroll on the Z axis to shift the slice, smoothly changing the cell pattern.

Constructor

new NoiseCell3D(scene, [config], [x], [y], [width], [height])

Parameters

nametypeoptionaldefaultdescription
scenePhaser.SceneNoThe Scene to which this Game Object belongs.
configPhaser.Types.GameObjects.NoiseCell3D.NoiseCell3DQuadConfigYesThe configuration for this Game Object.
xnumberYes0The horizontal position of this Game Object in the world.
ynumberYes0The vertical position of this Game Object in the world.
widthnumberYes128The width of the Game Object.
heightnumberYes128The height of the Game Object.

Scope: static

Extends

Phaser.GameObjects.Shader

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L12
Since: 4.0.0

Inherited Members​

From Phaser.GameObjects.Components.BlendMode:

From Phaser.GameObjects.Components.ComputedSize:

From Phaser.GameObjects.Components.Depth:

From Phaser.GameObjects.Components.Filters:

From Phaser.GameObjects.Components.Origin:

From Phaser.GameObjects.Components.ScrollFactor:

From Phaser.GameObjects.Components.Transform:

From Phaser.GameObjects.Components.Visible:

From Phaser.GameObjects.GameObject:

From Phaser.GameObjects.Shader:

Public Members​

keepAwake​

keepAwake: boolean​

Description:

Whether to jitter shader inputs to force continuous high precision. This is an advanced setting.

Chromium browsers seem to switch between WebGL rendering modes, which changes the precision available to the noise shader. This can change the noise calculation, causing parts of the output to flicker unpredictably. The keepAwake setting adds an imperceptible amount to the offset during rendering, which seems to force Chromium to be consistent and eliminate the flickering.

Don't disable this unless you know what you're doing. It prevents an unpredictable problem that might not appear in your browser or device, but will appear for other users.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L356
Since: 4.0.0

noiseCells​

noiseCells: Array.<number>​

Description:

The number of cells in each dimension.

This must be an array of 3 numbers.

Try to keep the cell count between 2 and about an eighth of the resolution of the texture. A cell count of 1 has no room to vary. A cell count greater than the resolution of the texture will essentially be expensive white noise.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L99
Since: 4.0.0

noiseColorEnd​

noiseColorEnd: Phaser.Display.Color​

Description:

The color of the edge of the cells.

The default is white. You can set any color, and change the alpha.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L316
Since: 4.0.0

noiseColorStart​

noiseColorStart: Phaser.Display.Color​

Description:

The color of the middle of the cells.

The default is black. You can set any color, and change the alpha.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L305
Since: 4.0.0

noiseIterations​

noiseIterations: number​

Description:

How many octaves of noise to apply. This adds fine detail to the noise, at the cost of performance.

Each octave of noise has twice the resolution, and contributes half as much to the output.

This value should be an integer of 1 or higher. Values above 5 or so have increasingly little effect. Each iteration has a cost, so only use as much as you need!

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L207
Since: 4.0.0

noiseMode​

noiseMode: number​

Description:

What mode to output the noise in.

  • 0: Sharp boundaries between cells.

  • 1: Index mode. Cells have a single flat color.

    The color assigned to each cell is random and may not be unique across cells.

  • 2: Smooth boundaries between cells.

    Use noiseSmoothing to control smoothness.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L229
Since: 4.0.0

noiseNormalMap​

noiseNormalMap: boolean​

Description:

Whether to convert the noise output to a normal map.

This works properly with noise modes 0 and 2, which form curves.

Control the curvature strength with noiseNormalScale.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L269
Since: 4.0.0

noiseNormalScale​

noiseNormalScale: number​

Description:

Curvature strength of normal map output. This is used when noiseNormalMap is enabled.

The default is 1. Higher values produce more curvature; lower values are flatter.

Surface angle is determined by the rate of change of the noise. Noise with more iterations tends to change more rapidly, thus have more pronounced normals.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L283
Since: 4.0.0

noiseOffset​

noiseOffset: Array.<number>​

Description:

The offset of the noise in each dimension: [ x, y, z ]. Animate x and y to scroll the noise pattern. Animate z to smoothly change the noise pattern.

This must be an array of 3 numbers.

Moving too far from 0 will introduce floating-point precision issues. This can cause the noise to appear blocky. We start to see obvious blockiness at offsets of a few thousand, so stay below that.

You can evolve the noise pattern by scrolling the Z axis. However, this will eventually meet those floating-point precision issues.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L152
Since: 4.0.0

noiseSeed​

noiseSeed: Array.<number>​

Description:

Seed values for the noise. Vary these to change the shape of cells in the pattern. A different seed creates a completely different pattern.

This must be an array of 12 numbers.

Noise seed values should be fairly small. Numbers between 0 and 1, or 0 and 12, are recommended. Very large seed values may lose floating-point precision and cause the noise to appear blocky.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L332
Since: 4.0.0

noiseSmoothing​

noiseSmoothing: number​

Description:

How much smoothing to apply in smoothing mode.

The default value is 1, which applies moderate smoothing between cells. The value is a factor. Values from 0-1 reduce the smoothing. Values above 1 intensify the smoothing. Intensification slows above 4 or so.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L249
Since: 4.0.0

noiseVariation​

noiseVariation: Array.<number>​

Description:

How much each cell can vary from its grid position. High values break further from the grid.

At 0, cells are perfectly square. At 1, cells are fully chaotic. Never go higher than 1, as this can distort the cell matrix so much that the nearest cell is outside the sampling range, causing seams in the noise.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L186
Since: 4.0.0

noiseWrap​

noiseWrap: Array.<number>​

Description:

How many cells wide the pattern is.

By default, this is set to the same dimensions as noiseCells. This causes the output to wrap seamlessly at the edges. To restore wrapping if you changed settings, call this.wrapNoise().

A lower value causes the output to repeat.

A higher value breaks visible wrapping. The cell pattern still repeats off-camera. Try to keep this value as low as possible, as it helps avoid floating-point precision errors.

This must be an array of 3 numbers.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L121
Since: 4.0.0

Inherited Methods​

From Phaser.Events.EventEmitter:

From Phaser.GameObjects.Components.BlendMode:

From Phaser.GameObjects.Components.ComputedSize:

From Phaser.GameObjects.Components.Depth:

From Phaser.GameObjects.Components.Filters:

From Phaser.GameObjects.Components.GetBounds:

From Phaser.GameObjects.Components.Origin:

From Phaser.GameObjects.Components.RenderSteps:

From Phaser.GameObjects.Components.ScrollFactor:

From Phaser.GameObjects.Components.Transform:

From Phaser.GameObjects.Components.Visible:

From Phaser.GameObjects.GameObject:

From Phaser.GameObjects.Shader:

Public Methods​

randomizeNoiseSeed​

<instance> randomizeNoiseSeed()​

Description:

Randomize the noise seed, creating a unique pattern.

Returns: Phaser.GameObjects.NoiseCell3D - This game object.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L446
Since: 4.0.0

setNoiseColor​

<instance> setNoiseColor([start], [end])​

Description:

Set the colors of the noise, from a variety of color formats.

  • A number is expected to be a 24 or 32 bit RGB or ARGB value.

  • A string is expected to be a hex code.

  • An array of numbers is expected to be RGB or RGBA in the range 0-1.

  • A Color object can be used.

Parameters:

nametypeoptionaldefaultdescription
startnumber | stringArray.<number>Phaser.Display.ColorYes
endnumber | stringArray.<number>Phaser.Display.ColorYes

Returns: Phaser.GameObjects.NoiseCell3D - This game object.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L380
Since: 4.0.0

wrapNoise​

<instance> wrapNoise()​

Description:

Set the noise texture to wrap seamlessly.

This sets noiseWrap to equal noiseCells in all dimensions.

Returns: Phaser.GameObjects.NoiseCell3D - This game object.

Source: src/gameobjects/noise/noisecell3d/NoiseCell3D.js#L463
Since: 4.0.0