ปัญหาการแมปเงาของ WebGL รอบทิศทาง

ก่อนอื่นฉันอยากจะบอกว่าฉันได้อ่านบทความมากมายเกี่ยวกับการทำแผนที่เงาโดยใช้แผนที่ความลึกและ cubemaps และฉันเข้าใจว่ามันทำงานอย่างไรและฉันมีประสบการณ์การทำงานกับพวกเขาด้วยการใช้ OpenGL แต่ฉันมีปัญหาในการใช้งาน เทคนิคการทำแผนที่เงารอบทิศทางโดยใช้แหล่งกำเนิดแสงจุดเดียวในเครื่องมือกราฟิก 3 มิติของฉันชื่อ "EZ3" เอ็นจิ้นของฉันใช้ WebGL เป็น API กราฟิก 3D และ JavaScript เป็นภาษาการเขียนโปรแกรมสำหรับวิทยานิพนธ์ปริญญาตรีสาขาวิทยาศาสตร์คอมพิวเตอร์

โดยทั่วไปนี่คือวิธีที่ฉันใช้อัลกอริทึมการแมปเงาของฉัน แต่ฉันจะเน้นเฉพาะกรณีไฟจุดเพราะพวกเขาสามารถเก็บการแมปเงารอบทิศทาง

ครั้งแรกที่ฉันใช้งานการเลือกสรรด้านหน้าแบบนี้:

if (this.state.faceCulling !== Material.FRONT) {
    if (this.state.faceCulling === Material.NONE)
      gl.enable(gl.CULL_FACE);

    gl.cullFace(gl.FRONT);
    this.state.faceCulling = Material.FRONT;
  }

ประการที่สองฉันสร้างโปรแกรมความลึกเพื่อบันทึกค่าความลึกสำหรับใบหน้า cubemap แต่ละอันนี่คือรหัสโปรแกรมความลึกของฉันใน GLSL 1.0:

Vertex Shader:

precision highp float;

attribute vec3 position;

uniform mat4 uModelView;
uniform mat4 uProjection;

void main() {
  gl_Position = uProjection * uModelView * vec4(position, 1.0);
}

ส่วน Shader:

precision highp float;

vec4 packDepth(const in float depth) {
  const vec4 bitShift = vec4(256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0);
  const vec4 bitMask = vec4(0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0);
  vec4 res = mod(depth * bitShift * vec4(255), vec4(256)) / vec4(255);
  res -= res.xxyz * bitMask;
  return res;
}

void main() {
  gl_FragData[0] = packDepth(gl_FragCoord.z);
}

ประการที่สามนี่คือเนื้อหาของฟังก์ชัน JavaScript ของฉันที่ "เก็บถาวร" การแม็พเงารอบทิศทาง

program.bind(gl);

  for (i = 0; i < lights.length; i++) {
    light = lights[i];

    // Updates pointlight's projection matrix

    light.updateProjection();

    // Binds point light's depth framebuffer

    light.depthFramebuffer.bind(gl);

    // Updates point light's framebuffer in order to create it 
    // or if it's resolution changes, it'll be created again.

    light.depthFramebuffer.update(gl);

    // Sets viewport dimensions with depth framebuffer's dimensions

    this.viewport(new Vector2(), light.depthFramebuffer.size);

    if (light instanceof PointLight) {

      up = new Vector3();
      view = new Matrix4();
      origin = new Vector3();
      target = new Vector3();

      for (j = 0; j < 6; j++) {

    // Check in which cubemap's face we are ...

        switch (j) {
          case Cubemap.POSITIVE_X:
            target.set(1, 0, 0);
            up.set(0, -1, 0);
            break;
          case Cubemap.NEGATIVE_X:
            target.set(-1, 0, 0);
            up.set(0, -1, 0);
            break;
          case Cubemap.POSITIVE_Y:
            target.set(0, 1, 0);
            up.set(0, 0, 1);
            break;
          case Cubemap.NEGATIVE_Y:
            target.set(0, -1, 0);
            up.set(0, 0, -1);
            break;
          case Cubemap.POSITIVE_Z:
            target.set(0, 0, 1);
            up.set(0, -1, 0);
            break;
          case Cubemap.NEGATIVE_Z:
            target.set(0, 0, -1);
            up.set(0, -1, 0);
            break;
        }

    // Creates a view matrix using target and up vectors according to each face of pointlight's
    // cubemap. Furthermore, I translate it in minus light position in order to place
    // the point light in the world's origin and render each cubemap's face at this 
    // point of view

        view.lookAt(origin, target, up);
        view.mul(new EZ3.Matrix4().translate(light.position.clone().negate()));

    // Flips the Y-coordinate of each cubemap face
    // scaling the projection matrix by (1, -1, 1).

    // This is a perspective projection matrix which has:
    // 90 degress of FOV.
    // 1.0 of aspect ratio.
    // Near clipping plane at 0.01.
    // Far clipping plane at 2000.0.

        projection = light.projection.clone();
        projection.scale(new EZ3.Vector3(1, -1, 1));

    // Attaches a cubemap face to current framebuffer in order to record depth values for the face with this line
    // gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + j, id, 0);

        light.depthFramebuffer.texture.attach(gl, j);

    // Clears current framebuffer's color with these lines:
    // gl.clearColor(1.0,1.0,1.0,1.0);
    // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        this.clear(color);

    // Renders shadow caster meshes using the depth program

        for (k = 0; k < shadowCasters.length; k++)
          this._renderShadowCaster(shadowCasters[k], program, view, projection);
      }
    } else {
       // Directional light & Spotlight case ...
    }
  }

ประการที่สี่นี่คือวิธีที่ฉันคำนวณการทำแผนที่เงารอบทิศทางโดยใช้ cubemap เชิงลึกใน Vertex Shader และ Fragment Shader หลักของฉัน:

Vertex Shader:

precision highp float;

attribute vec3 position;

uniform mat4 uModel;
uniform mat4 uModelView;
uniform mat4 uProjection;

varying vec3 vPosition;

void main() {
  vPosition = vec3(uModel * vec4(position, 1.0));

  gl_Position = uProjection * uModelView * vec4(position, 1.0);
}

ส่วน Shader:

float unpackDepth(in vec4 color) {
    return dot(color, vec4(1.0 / (256.0 * 256.0 * 256.0), 1.0 / (256.0 * 256.0), 1.0 / 256.0, 1.0 ));
}

float pointShadow(const in PointLight light, const in samplerCube shadowSampler) {
    vec3 direction = vPosition - light.position;
    float vertexDepth = clamp(length(direction), 0.0, 1.0);
    float shadowMapDepth = unpackDepth(textureCube(shadowSampler, direction));

    return (vertexDepth > shadowMapDepth) ? light.shadowDarkness : 1.0;
}

ในที่สุดนี่คือผลลัพธ์ที่ฉันได้รับฉากของฉันมีระนาบลูกบาศก์และทรงกลม นอกจากนี้ทรงกลมสีแดงสดใสเป็นแหล่งกำเนิดแสงจุด:

อย่างที่คุณเห็นฉันดูเหมือนว่าจุดซ้อนขอบเฟรมแสงลึกนั้นไม่ได้ทำการแก้ไขที่ดีระหว่างใบหน้าของพวกเขา

จนถึงตอนนี้ฉันยังไม่รู้วิธีแก้ปัญหานี้

สารละลาย

หลังจากสองสามวันผมรู้ว่าผมได้รับการคำนวณเมทริกซ์ประมาณการของฉันโดยใช้มุม FOV องศาและมันควรจะเป็นเรเดียน ฉันทำการเปลี่ยนแปลงและตอนนี้ทุกอย่างใช้งานได้ดี การแก้ไขระหว่างใบหน้าของ cubemap กรอบความลึกของฉันตอนนี้สมบูรณ์แบบ ด้วยเหตุนี้จึงเป็นสิ่งสำคัญที่จะต้องจัดการทุกมุมของฟังก์ชันตรีโกณมิติในหน่วยเรเดียน

ยิ่งไปกว่านั้นฉันตระหนักว่าคุณสามารถคำนวณเมทริกซ์มุมมองของคุณได้เช่นที่ฉันพูดในคำถามและด้วยวิธีนี้

view.lookAt(position, target.add(position.clone()), up);

วิธีการนี้หมายความว่ามุมมองของคุณถูกวางไว้ที่กึ่งกลางของแสงสปอตไลท์และคุณแสดงในแต่ละทิศทางของ cubemap ของคุณ แต่ทิศทางเหล่านี้คืออะไร? ดีคำแนะนำเหล่านี้ถูกคำนวณเพิ่มแต่ละเป้าหมายที่ฉันอยู่ในบล็อกสวิตช์ (ตามใบหน้า cubemap แต่ละ) กับตำแหน่งของปอตไลท์ของคุณ

นอกจากนี้ไม่จำเป็นต้องสลับY-Coordinate ของเมทริกซ์การฉายภาพในกรณีนี้มันเป็นเมทริกซ์การฉายภาพเปอร์สเปคทีฟของสปอตไลท์ให้กับ GLSL shader ของคุณโดยไม่ต้องปรับมาตราส่วนด้วย (1, -1, 1) เพราะฉันทำงานด้วย พื้นผิวที่ไม่มีพิกัด Y ที่พลิกกลับฉันคิดว่าคุณควรพลิกพิกัด Y ของเมทริกซ์การฉายของสปอตไลท์เฉพาะในกรณีที่คุณทำงานกับพิกัด Y ของพื้นผิวที่พลิกดังนั้นเพื่อให้มีเอฟเฟกต์เงาแผนที่รอบทิศทางที่ถูกต้อง

ในที่สุดฉันจะออกจากที่นี่เป็นรุ่นสุดท้ายของอัลกอริทึมการทำแผนที่เงารอบทิศทางของฉันในด้าน CPU / GPU ด้าน CPU ฉันจะอธิบายทุกขั้นตอนที่คุณต้องทำเพื่อคำนวณแผนที่เงาที่ถูกต้องสำหรับใบหน้าของ cubemap แต่ละอัน ในอีกด้านหนึ่งของ GPU ฉันจะอธิบายฟังก์ชั่นจุดสุดยอด / ส่วนแบ่งของส่วนลึกของฉันและฟังก์ชั่นการทำแผนที่เงารอบทิศทางในชิ้นส่วนหลักของฉันนี้เพื่อช่วยคนที่เรียนรู้เทคนิคนี้หรือแก้ข้อสงสัยในอนาคตเกี่ยวกับอัลกอริทึมนี้ :

ซีพียู

  // Disable blending and enable front face culling.

  this.state.disable(gl.BLEND);

  this.state.enable(gl.CULL_FACE);
  this.state.cullFace(gl.FRONT);

  // Binds depth program

  program.bind(gl);

  // For each pointlight source do

  for (i = 0; i < lights.length; i++) {
    light = lights[i];

    // Get each pointlight's world position

    position = light.worldPosition();

    // Binds pointlight's depth framebuffer. Besides, in this function,
    // viewport's dimensions are set according to depth framebuffer's dimension.

    light.depthFramebuffer.bind(gl, this.state);

    // Updates point light's framebuffer in order to create it 
    // or if it's resolution have changed, it'll be created again.

    light.depthFramebuffer.update(gl);

    // Check in which cubemap's face we are ...

    for (j = 0; j < 6; j++) {
      switch (j) {
        case Cubemap.POSITIVE_X:
          target.set(1, 0, 0);
          up.set(0, -1, 0);
          break;
        case Cubemap.NEGATIVE_X:
          target.set(-1, 0, 0);
          up.set(0, -1, 0);
          break;
        case Cubemap.POSITIVE_Y:
          target.set(0, 1, 0);
          up.set(0, 0, 1);
          break;
        case Cubemap.NEGATIVE_Y:
          target.set(0, -1, 0);
          up.set(0, 0, -1);
          break;
        case Cubemap.POSITIVE_Z:
          target.set(0, 0, 1);
          up.set(0, -1, 0);
          break;
        case Cubemap.NEGATIVE_Z:
          target.set(0, 0, -1);
          up.set(0, -1, 0);
          break;
      }

      // Creates a view matrix using target and up vectors 
      // according to each face of pointlight's cubemap.

      view.lookAt(position, target.add(position.clone()), up);

      // Attaches cubemap's face to current framebuffer 
      // in order to record depth values in that direction.

      light.depthFramebuffer.texture.attach(gl, j);

      // Clears color & depth buffers of your current framebuffer

      this.clear();

      // Render each shadow caster mesh using your depth program

      for (k = 0; k < meshes.length; k++)
        this._renderMeshDepth(program, meshes[k], view, light.projection);
    }
  }

ในฟังก์ชั่น renderMeshDepth ฉันได้:

  // Computes pointlight's model-view matrix 

  modelView.mul(view, mesh.world);

  // Dispatch each matrix to the GLSL depth program

  program.loadUniformMatrix(gl, 'uModelView', modelView);
  program.loadUniformMatrix(gl, 'uProjection', projection);

  // Renders a mesh using vertex buffer objects (VBO)

  mesh.render(gl, program.attributes, this.state, this.extensions);

GPU

โปรแกรมความลึก Vertex Shader:

precision highp float;

attribute vec3 position;

uniform mat4 uModelView;
uniform mat4 uProjection;

void main() {
  gl_Position = uProjection * uModelView * vec4(position, 1.0);
}

ส่วนโปรแกรมความลึก:

precision highp float;

// The pack function distributes fragment's depth precision storing 
// it throughout (R,G,B,A) color channels and not just R color channel 
// as usual in shadow mapping algorithms. This is because I'm working
// with 8-bit textures and one color channel hasn't enough precision 
// to store a depth value.

vec4 pack(const in float depth) {
  const vec4 bitShift = vec4(255.0 * 255.0 * 255.0, 255.0 * 255.0, 255.0, 1.0);
  const vec4 bitMask = vec4(0.0, 1.0 / 255.0, 1.0 / 255.0, 1.0 / 255.0);

  vec4 res = fract(depth * bitShift);
  res -= res.xxyz * bitMask;

  return res;
}

void main() {
  // Packs normalized fragment's Z-Coordinate which is in [0,1] interval.

  gl_FragColor = pack(gl_FragCoord.z);
}

ฟังก์ชั่น Shadow Mapping รอบทิศทางในส่วนของส่วนหลักของฉัน:

// Unpacks fragment's Z-Coordinate which was packed 
// on the depth program's fragment shader.

float unpack(in vec4 color) {
   const vec4 bitShift = vec4(1.0 / (255.0 * 255.0 * 255.0), 1.0 / (255.0 * 255.0), 1.0 / 255.0, 1.0);
   return dot(color, bitShift);
}

// Computes Omnidirectional Shadow Mapping technique using a samplerCube
// vec3 lightPosition is your pointlight's position in world coordinates.
// vec3 vPosition is your vertex's position in world coordinates, in code
// I mean this -> vPosition = vec3(uModel * vec4(position, 1.0));
// where uModel is your World/Model matrix.

float omnidirectionalShadow(in vec3 lightPosition, in float bias, in float darkness, in samplerCube sampler) {
    vec3 direction = vPosition - lightPosition;
    float vertexDepth = clamp(length(direction), 0.0, 1.0);
    float shadowMapDepth = unpack(textureCube(sampler, direction)) + bias;

    return (vertexDepth > shadowMapDepth) ? darkness : 1.0;
}

ที่นี่คุณมีขั้นตอนวิธีการแสดงผลขั้นสุดท้าย

ขอให้สนุกการเข้ารหัสกราฟิกที่สวยงามโชคดี :)

CZ