[카테고리:] Three.JS

const scenePass = pass(scene, camera)
scenePass.setMRT(mrt({
    output: output,
    normalFlat: normalFlat,
    normal: normalWorld
}));

const sobelPass1 = sobel(scenePass.getTextureNode('normal')).pow(4);
const sobelPass2 = sobel(scenePass.getTextureNode('normalFlat'));
renderPipeline.outputNode = scenePass.getTextureNode('output').add(
    sobelPass1.max(sobelPass2)
);

(todo) sobelPass1에 의미있는 외곽선만을 남기기 위한 pow(4) 연산 대신 remapClamp(0.2, 1, 0, 1)로 대체해 테스트해 볼 것. 참고로 pow 연산은 1보다 작은 값을 더 0에 가깝게 만들고 1보다 큰 값은 더 크게 만들어 주는 것으로 이해하면 쉽다.

attribute를 위한 데이터인 Buffer Attribte를 생성하는 방식은 기존과 동일합니다.

const count = geometry.attributes.position.count
const randomArray = new Float32Array(count)

for (let i = 0; i < count; i++)
    randomArray[i] = Math.random()

const randomBuffer = new THREE.BufferAttribute(randomArray, 1)

// KEY POINT ->
geometry.setAttribute('random', randomBuffer)
const random = attribute('random')
// <-

material.colorNode = random

위의 코드는 다음 코드처럼 좀더 짧고 효과적으로 변경될 수 있습니다.

const count = geometry.attributes.position.count
const randomArray = new Float32Array(count)

for (let i = 0; i < count; i++)
    randomArray[i] = Math.random()

const randomBuffer = new THREE.BufferAttribute(randomArray, 1)

// KEY POINT ->
const random = bufferAttribute(randomBuffer, 'float')
// <-

material.colorNode = random

const renderer = new THREE.WebGPURenderer({
    canvas: canvas,
    antialias: true,
    // forceWebGL: true 
});

renderer.inspector = new Inspector();

renderer.inspector.console.addMessage("info", "정보 메세지...");
renderer.inspector.console.addMessage("warn", "경고성 메세지...");
renderer.inspector.console.addMessage("error", "에러 메세지...");

렌더러의 forceWebGL을 활성화해도 작동합니다. addMessage의 첫번째 인자는 반드시 info, warn, error 문자열이 와야 하며 이외의 값이 지정되면 출력하지 않습니다. 상기 코드의 출력 결과는 다음과 같습니다.

three.js는 Mesh 등과 같은 객체에 사용자 데이터를 넣기 위한 userData 속성이 있습니다. 이처럼 userData 속성에 저장된 값을 쉐이더에서 참조할 수 있도록 해주는 노드가 userData 노드입니다. 사용 예시는 다음과 같습니다.

mesh.userData.한글 = new THREE.Color('#ffff00')
material.outputNode = vec4(userData('한글'), 1)

이렇게 사용된 Mesh 객체를 통해 userData의 값이 변경되면 자동으로 TSL 코드를 통해 반영됩니다.