沉浸式探索 WebGL 2.0 中的 OIT 权重WebGL

2023-10-29 07:45:27

揭开 OIT 权重的奥秘

次序无关透明度(OIT)技术是一种新型的透明处理算法，可用于在3D场景中渲染半透明或透明的物体，而无需按照对象的先后顺序进行绘制。这使得透明混合的效果更加逼真，并且允许在场景中放置更多的半透明物体。

OIT 权重是一个控制每个片段中透明度量的关键因子。当 OIT 权重设置为 1 时，片段将完全透明，而当 OIT 权重设置为 0 时，片段将完全不透明。

代码揭秘：WebGL 2.0 OIT 权重实战

// 创建WebGL2的WebGLRenderingContext
var gl = canvas.getContext('webgl2');

// 创建渲染目标纹理，并设置浮点格式
var renderTargetTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, renderTargetTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, width, height, 0, gl.RGBA, gl.FLOAT, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// 创建帧缓冲区，并附上渲染目标纹理
var framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, renderTargetTexture, 0);

// 创建OIT渲染程序，包括顶点着色器和片段着色器
var program = gl.createProgram();
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// 设置顶点着色器代码
gl.shaderSource(vertexShader, vertexShaderSource);

// 设置片段着色器代码
gl.shaderSource(fragmentShader, fragmentShaderSource);

// 编译着色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

// 附加着色器到程序
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// 链接程序
gl.linkProgram(program);

// 使用程序
gl.useProgram(program);

// 设置OIT权重uniform变量
var weightLocation = gl.getUniformLocation(program, "weight");
gl.uniform1f(weightLocation, weight);