视差纹理是一种片段着色阶段增强材质表面凹凸细节的技术。
这里在WebGPU的实时渲染材质管线中实现了视差贴图计算,以便增强相关的纹理细节表现力。
当前示例源码github地址:
https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sample/ParallaxTexTest.ts
当前示例运行效果:
此示例基于此渲染系统实现,当前示例TypeScript源码如下:
export class ParallaxTexTest {
private mRscene = new RendererScene();
initialize(): void {
console.log("ParallaxTexTest::initialize() ...");
this.loadImg();
}
initSys(): void {
this.mRscene.initialize({
canvasWith: 512,
canvasHeight: 512,
mtplEnabled: true,
rpassparam:
{
multisampled: true
}
});
this.initScene();
this.initEvent();
}
private mPixels: Uint8ClampedArray;
private mPixelsW = 128;
private mPixelsH = 128;
getRandomColor(s?: number): ColorDataType {
if (s === undefined) {
s = 1.0;
}
let i = 5;
let j = Math.floor(Math.random() * this.mPixelsW);
let k = i * this.mPixelsW + j;
let vs = this.mPixels;
k *= 4;
let cs = [s * vs[k] / 255.0, s * vs[k + 1] / 255.0, s * vs[k + 2] / 255.0];
return