Textures

In order to use a texture as the color, the texture data needs to be provided as a uniform to the shader and the color needs to be sampled from the texture on each fragment.

import { texture2d, uniformSampler2d, float, varyingVec2, Sampler2D, Vec2Node, attributes }  from "@hology/core/shader-nodes"
import * as THREE from 'three'

const sampler: Sampler2D = uniformSampler2d('image')
const coord: Vec2Node = varyingVec2(attributes.uv)
const color: RgbaNode = texture2d(sampler, coord)

const texture = new THREE.TextureLoader().load( "path/to/texture.jpg" )

const material = new NodeShaderMaterial({
    color: color,
    uniforms: { image: { value: texture } }
})

If the texture is already available when creating the shader such as when it is passed in to a shader material via a parameter, then you can use the textureSampler2d function to create a sampler. By passing in the texture directly to this function, the texture does not also need to be added as a uniform.

import { texture2d, textureSampler2d, float, varyingVec2, Sampler2D, Vec2Node, attributes }  from "@hology/core/shader-nodes"
import * as THREE from 'three'

const texture = new THREE.TextureLoader().load( "path/to/texture.jpg" )

const sampler: Sampler2D = textureSampler2d(texture)
const coord: Vec2Node = varyingVec2(attributes.uv)
const color: RgbaNode = sampler.sample(coord)

const material = new NodeShaderMaterial({
    color: color
})