Skip to main content

Shaders

import testVertexShader from './shaders/test/vertex.glsl'
import testFragmentShader from './shaders/test/fragment.glsl'

const geometry = new THREE.PlaneBufferGeometry(1, 1, 32, 32)
const material = new THREE.RawShaderMaterial({
    vertexShader: testVertexShader,
    fragmentShader: testFragmentShader,
})

const mesh = new THREE.Mesh(geometry, material)
src/shaders/test/vertex.glsl
attribute vec3 position;

uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;

void main() {
    gl_Position = projectionMatrix * viewMatrix * vec4(position, 1.0);
}
src/shaders/test/fragment.glsl
precision mediump float;

void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

Add attribute to geometry​

script.js
const geometry = new THREE.PlaneBufferGeometry(1, 1, 32, 32)

const count = geometry.attributes.position.count
const randoms = new Floar32Array(count)
// 1 .. how many values to consume per vertex
geometry.setAttribute('my_attribute', new THREE.BufferAttribute(randoms, 1))
vertex.glsl
attribute float my_attribute;

void main() {
}

Send data from vertex to fragment shader​

vertex.glsl
varying float out_my_attribute;

void main() {
    out_my_attribute = my_attribute;
}
fragment.glsl
varying float out_my_attribute;

void main() {
    out_my_attribute = my_attribute;
}

Uniforms​

const material = new THREE.RawShaderMaterial({
    /* .. */
    uniforms: {
        myFloat: { value: 10 }
        myVector2: { value: new THREE.Vector2(1, 2) }
        uTime: { value: 0 }
        uColor: { value: new THREE.Color('orange') }
    }
})

const clock = new THREE.Clock()

const tick = () => {
    const elapsedTime = clock.getElapsedTime()
    material.uniforms.uTime.value = elapsedTime
}

Loading Textures​

script.js
const textureLoader = new THREE.TextureLoader()
// That's inside the static folder
const flagTexture = textureLoader.load('/textures/flag.png')

const material = new THREE.RawShaderMaterial({
    /* .. */
    uniforms:
    {
        uTexture: { value: flagTexture }
    }
})
vertex.glsl
attribute vec2 uv;

varying vec2 vUv;

void main() {
    vUv = uv;
}
fragment.glsl
uniform sampler2D uTexture;

varying vec2 vUv;

void main() {
    vec4 textureColor = texture2D(uTexture, vUv);
    gl_FragColor = textureColor;
}

See also​