Lab8

预览
taska(1)页面链接
 taska(2)页面链接
 taskb页面链接

taska. 在第七章基本纹理映射实验基础上，实现几何体上环境映射效果，可通过选择不同的天空盒纹理实现

根据用户选择的天空盒名称加载相应的纹理，并将其配置为立方体贴图。然后在着色器中使用这个立方体贴图来实现环境映射效果

function configureCubeMap(skyboxName) {
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);

    const faceInfos = [
        { target: gl.TEXTURE_CUBE_MAP_POSITIVE_X, url: skyboxName + '/pos-x.jpg' },
        { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_X, url: skyboxName + '/neg-x.jpg' },
        { target: gl.TEXTURE_CUBE_MAP_POSITIVE_Y, url: skyboxName + '/pos-y.jpg' },
        { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, url: skyboxName + '/neg-y.jpg' },
        { target: gl.TEXTURE_CUBE_MAP_POSITIVE_Z, url: skyboxName + '/pos-z.jpg' },
        { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, url: skyboxName + '/neg-z.jpg' },
    ];

    faceInfos.forEach((faceInfo) => {
        const { target, url } = faceInfo;

        // Load the texture for each face of the cube map
        const image = new Image();
        image.onload = function() {
            gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
            gl.texImage2D(target, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
            gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
        };
        image.src = url;
    });

    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
    gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
}

环境映射立方体的效果如图：

taska(1)页面链接

对于球体的天空盒纹理映射，还需要在着色器中使用立方体贴图，并在渲染过程中将其应用到球体上。

function render() {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // 绑定立方体贴图
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeMap);
    gl.uniform1i(gl.getUniformLocation(program, "uCubeMap"), 0);

    // 设置模型视图矩阵和投影矩阵
    var modelViewMatrix = mat4.create();
    var projectionMatrix = mat4.create();
    mat4.perspective(projectionMatrix, 45, canvas.width / canvas.height, 0.1, 100.0);
    mat4.lookAt(modelViewMatrix, [0, 0, 5], [0, 0, 0], [0, 1, 0]);

    gl.uniformMatrix4fv(gl.getUniformLocation(program, "uModelViewMatrix"), false, modelViewMatrix);
    gl.uniformMatrix4fv(gl.getUniformLocation(program, "uProjectionMatrix"), false, projectionMatrix);

    // 绘制球体
    drawSphere();

    requestAnimationFrame(render);
}

function drawSphere() {
    // 绑定顶点和法线缓冲区，设置属性指针等
    // ...
    gl.drawElements(gl.TRIANGLES, sphereIndexCount, gl.UNSIGNED_SHORT, 0);
}