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
})
