WebGL2与高级渲染

// 顶点着色器
#version 300 es
layout(location = 0) in vec3 aPosition;  // 使用 layout 限定符
layout(location = 1) in vec2 aTexCoord;

out vec2 vTexCoord;  // 替代 varying

uniform mat4 uMVP;

void main() {
    vTexCoord = aTexCoord;
    gl_Position = uMVP * vec4(aPosition, 1.0);
}

// 片元着色器
#version 300 es
precision highp float;

in vec2 vTexCoord;  // 替代 varying
out vec4 fragColor; // 替代 gl_FragColor

uniform sampler2D uTexture;

void main() {
    fragColor = texture(uTexture, vTexCoord); // 统一 texture() 函数
}

// WebGL 2 VAO 使用示例
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

// 以下状态会被 VAO 记录
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(0);

gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(1);

gl.bindVertexArray(null); // 解绑

// --- 渲染循环中 ---
function render() {
    gl.bindVertexArray(vao);   // 一键恢复所有顶点属性状态
    gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
    gl.bindVertexArray(null);
}

// 片元着色器 — 多输出
#version 300 es
precision highp float;

layout(location = 0) out vec4 fragColor;      // 输出到 COLOR_ATTACHMENT0
layout(location = 1) out vec4 fragNormal;     // 输出到 COLOR_ATTACHMENT1
layout(location = 2) out vec4 fragPosition;   // 输出到 COLOR_ATTACHMENT2

void main() {
    fragColor = vec4(diffuseColor, 1.0);
    fragNormal = vec4(normal * 0.5 + 0.5, 1.0);
    fragPosition = vec4(worldPosition, 1.0);
}

// 高斯模糊片元着色器（水平 Pass）
#version 300 es
precision highp float;

in vec2 vTexCoord;
out vec4 fragColor;

uniform sampler2D uTexture;
uniform vec2 uResolution;  // 纹理尺寸

// 高斯权重 (σ ≈ 4)
const float weights[5] = float[](0.227, 0.194, 0.122, 0.061, 0.024);

void main() {
    vec2 texOffset = 1.0 / uResolution;  // 一个像素的纹理偏移

    vec4 result = texture(uTexture, vTexCoord) * weights[0];

    // 正负偏移各采样 4 个像素
    for (int i = 1; i < 5; i++) {
        result += texture(uTexture, vTexCoord + vec2(texOffset.x * i, 0.0)) * weights[i];
        result += texture(uTexture, vTexCoord - vec2(texOffset.x * i, 0.0)) * weights[i];
    }

    fragColor = result;
}

// 亮度提取着色器
precision highp float;

varying vec2 vTexCoord;
uniform sampler2D uScene;
uniform float uThreshold; // 亮度阈值，通常 0.8-1.2

void main() {
    vec4 color = texture2D(uScene, vTexCoord);
    float brightness = dot(color.rgb, vec3(0.2126, 0.7152, 0.0722)); // 加权亮度

    if (brightness > uThreshold) {
        gl_FragColor = color;
    } else {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
}

// 最终合成着色器
precision highp float;

varying vec2 vTexCoord;
uniform sampler2D uScene;     // 原始场景纹理
uniform sampler2D uBloom;     // 模糊后的亮部纹理

void main() {
    vec4 sceneColor = texture2D(uScene, vTexCoord);
    vec4 bloomColor = texture2D(uBloom, vTexCoord);

    // 叠加 Bloom 效果
    gl_FragColor = sceneColor + bloomColor * 1.5;
}

// Sobel 边缘检测着色器
precision highp float;

varying vec2 vTexCoord;
uniform sampler2D uTexture;
uniform vec2 uResolution;

void main() {
    vec2 texel = 1.0 / uResolution;

    // 采样 9 个邻域像素
    float tl = texture2D(uTexture, vTexCoord + vec2(-texel.x, texel.y)).r;
    float t  = texture2D(uTexture, vTexCoord + vec2(0.0, texel.y)).r;
    float tr = texture2D(uTexture, vTexCoord + vec2(texel.x, texel.y)).r;
    float l  = texture2D(uTexture, vTexCoord + vec2(-texel.x, 0.0)).r;
    float r  = texture2D(uTexture, vTexCoord + vec2(texel.x, 0.0)).r;
    float bl = texture2D(uTexture, vTexCoord + vec2(-texel.x, -texel.y)).r;
    float b  = texture2D(uTexture, vTexCoord + vec2(0.0, -texel.y)).r;
    float br = texture2D(uTexture, vTexCoord + vec2(texel.x, -texel.y)).r;

    // Sobel 水平梯度
    float gx = -tl - 2.0*l - bl + tr + 2.0*r + br;
    // Sobel 垂直梯度
    float gy = -tl - 2.0*t - tr + bl + 2.0*b + br;

    float edge = sqrt(gx * gx + gy * gy);
    gl_FragColor = vec4(vec3(edge), 1.0);
}

// Reinhard 色调映射（最简单）
vec3 reinhardToneMapping(vec3 color) {
    return color / (color + vec3(1.0));
}

// ACES 电影色调映射（行业标准）
vec3 acesToneMapping(vec3 x) {
    float a = 2.51;
    float b = 0.03;
    float c = 2.43;
    float d = 0.59;
    float e = 0.14;
    return clamp((x * (a * x + b)) / (x * (c * x + d) + e), 0.0, 1.0);
}

// 应用色调映射后还需要 Gamma 校正
vec3 gammaCorrection(vec3 color) {
    return pow(color, vec3(1.0 / 2.2)); // sRGB Gamma ≈ 2.2
}

// 后处理框架 — 通用模板
class PostProcessPipeline {
    constructor(gl) {
        this.gl = gl;
        this.passes = [];
    }

    addPass(shaderSource, uniforms) {
        this.passes.push({
            shader: this.createShaderProgram(shaderSource),
            fbo: this.createFBO(),
            uniforms: uniforms
        });
    }

    render(sceneTexture) {
        let inputTexture = sceneTexture;

        for (let i = 0; i < this.passes.length; i++) {
            const pass = this.passes[i];
            const isLast = i === this.passes.length - 1;

            // 最后一个 Pass 输出到屏幕，其余输出到 FBO
            if (isLast) {
                this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
            } else {
                this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, pass.fbo.framebuffer);
            }

            this.gl.useProgram(pass.shader);
            this.gl.bindTexture(this.gl.TEXTURE_2D, inputTexture);

            // 设置 uniform
            for (const [name, value] of Object.entries(pass.uniforms)) {
                this.setUniform(pass.shader, name, value);
            }

            // 绘制全屏四边形
            this.drawFullScreenQuad();

            // 下一 Pass 的输入是当前 Pass 的输出
            inputTexture = pass.fbo.texture;
        }
    }
}

{
  "asset": { "version": "2.0", "generator": "Example Generator" },
  "scene": 0,
  "scenes": [
    { "nodes": [0] }
  ],
  "nodes": [
    { "mesh": 0, "name": "Cube" }
  ],
  "meshes": [
    {
      "primitives": [
        {
          "attributes": {
            "POSITION": 1,
            "NORMAL": 2,
            "TEXCOORD_0": 3
          },
          "indices": 0,
          "material": 0
        }
      ]
    }
  ],
  "accessors": [
    { "bufferView": 0, "componentType": 5123, "count": 36, "type": "SCALAR", "max": [23], "min": [0] },
    { "bufferView": 1, "componentType": 5126, "count": 24, "type": "VEC3", "max": [1,1,1], "min": [-1,-1,-1] }
  ],
  "bufferViews": [
    { "buffer": 0, "byteOffset": 0, "byteLength": 72, "target": 34963 },
    { "buffer": 0, "byteOffset": 72, "byteLength": 288, "target": 34962 }
  ],
  "buffers": [
    { "uri": "cube.bin", "byteLength": 360 }
  ],
  "materials": [
    {
      "pbrMetallicRoughness": {
        "baseColorTexture": { "index": 0 },
        "metallicFactor": 0.0,
        "roughnessFactor": 1.0
      }
    }
  ]
}

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

const loader = new GLTFLoader();

// 可选：配置 DRACO 解码器（压缩模型）
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
loader.setDRACOLoader(dracoLoader);

loader.load(
    'model.glb',       // glTF 文件路径
    (gltf) => {        // 加载成功回调
        const model = gltf.scene;
        scene.add(model);

        // 播放动画
        if (gltf.animations.length > 0) {
            const mixer = new THREE.AnimationMixer(model);
            const action = mixer.clipAction(gltf.animations[0]);
            action.play();
        }
    },
    (progress) => {    // 加载进度回调
        console.log(`Loading: ${(progress.loaded / progress.total * 100).toFixed(1)}%`);
    },
    (error) => {       // 加载错误回调
        console.error('Model loading failed:', error);
    }
);

function parseOBJ(text) {
    const positions = [];
    const normals = [];
    const texCoords = [];
    const faces = [];

    for (const line of text.split('\n')) {
        const parts = line.trim().split(/\s+/);
        const type = parts[0];

        if (type === 'v') {
            positions.push([parseFloat(parts[1]), parseFloat(parts[2]), parseFloat(parts[3])]);
        } else if (type === 'vn') {
            normals.push([parseFloat(parts[1]), parseFloat(parts[2]), parseFloat(parts[3])]);
        } else if (type === 'vt') {
            texCoords.push([parseFloat(parts[1]), parseFloat(parts[2])]);
        } else if (type === 'f') {
            // OBJ face format: v/vt/vn 或 v//vn 或 v
            const face = [];
            for (let i = 1; i < parts.length; i++) {
                const indices = parts[i].split('/');
                face.push({
                    position: parseInt(indices[0]) - 1,   // OBJ 索引从 1 开始
                    texCoord: indices[1] ? parseInt(indices[1]) - 1 : -1,
                    normal: indices[2] ? parseInt(indices[2]) - 1 : -1
                });
            }
            faces.push(face);
        }
    }

    // 将面数据展开为顶点数组
    const vertexPositions = [];
    const vertexNormals = [];
    const vertexTexCoords = [];
    const indices = [];
    const vertexMap = new Map();
    let nextIndex = 0;

    for (const face of faces) {
        for (const vertex of face) {
            const key = `${vertex.position}/${vertex.texCoord}/${vertex.normal}`;
            if (!vertexMap.has(key)) {
                vertexMap.set(key, nextIndex);
                vertexPositions.push(...positions[vertex.position]);
                if (vertex.normal >= 0) vertexNormals.push(...normals[vertex.normal]);
                if (vertex.texCoord >= 0) vertexTexCoords.push(...texCoords[vertex.texCoord]);
                nextIndex++;
            }
            indices.push(vertexMap.get(key));
        }
    }

    return {
        positions: new Float32Array(vertexPositions),
        normals: vertexNormals.length ? new Float32Array(vertexNormals) : null,
        texCoords: vertexTexCoords.length ? new Float32Array(vertexTexCoords) : null,
        indices: new Uint16Array(indices)
    };
}

FLOAT_VEC4: {
  value: 0x8B52,
  setter: function(location, v){
    gl.uniform3fv(location, v);  // ❌ 应为 uniform4fv
  }
},

// 调用处（2 个参数）
var setter = createUniformSetter(program, uniformInfo);

// 定义处（3 个参数）
function createUniformSetter(gl, program, uniformInfo) { ... }

// 第三列，z 轴基向量
target[8] = zAxis.x;
target[9] = zAxis.y;
target[10] = zAxis.z;
target[11] = 0;

// 第四列，坐标系原点位置 ❌ 索引 8-11 与上面重复！
target[8] = cameraPosition.x;
target[9] = cameraPosition.y;
target[10] = cameraPosition.z;
target[11] = 1;

target[12] = cameraPosition.x;
target[13] = cameraPosition.y;
target[14] = cameraPosition.z;
target[15] = 1;