《Cocos 游戏开发高级编程》4.2 阴影与光照贴图

// shadow.ts —— 纯 TypeScript，零 cc 依赖
export interface Vec2 { x: number; y: number; }
export interface Rect { x: number; y: number; w: number; h: number; }

/** 返回矩形在点光源下投出的阴影四边形（顺时针四个点） */
export function shadowQuad(rect: Rect, light: Vec2, length: number): Vec2[] {
  const corners: Vec2[] = [
    { x: rect.x, y: rect.y },
    { x: rect.x + rect.w, y: rect.y },
    { x: rect.x + rect.w, y: rect.y + rect.h },
    { x: rect.x, y: rect.y + rect.h },
  ];
  const dir = corners.map((p) => {
    const dx = p.x - light.x;
    const dy = p.y - light.y;
    const len = Math.hypot(dx, dy) || 1;
    return { x: dx / len, y: dy / len };
  });

  // 找「张角最大」的一对相邻角 —— 它们构成轮廓边
  let edge = 0;
  let minDot = 2;
  for (let i = 0; i < 4; i++) {
    const j = (i + 1) % 4;
    const dot = dir[i].x * dir[j].x + dir[i].y * dir[j].y;
    if (dot < minDot) { minDot = dot; edge = i; }
  }
  const j = (edge + 1) % 4;
  const a = corners[edge];
  const b = corners[j];
  return [
    a,
    b,
    { x: b.x + dir[j].x * length, y: b.y + dir[j].y * length },
    { x: a.x + dir[edge].x * length, y: a.y + dir[edge].y * length },
  ];
}

// shadow.test.ts —— vitest
import { describe, it, expect } from 'vitest';
import { shadowQuad } from './shadow';

describe('2D 阴影几何', () => {
  const rect = { x: 0, y: 0, w: 32, h: 32 };

  it('光源在左时，阴影向右延伸', () => {
    const q = shadowQuad(rect, { x: -100, y: 16 }, 200);
    const maxX = Math.max(...q.map((p) => p.x));
    expect(maxX).toBeGreaterThan(rect.w);
  });

  it('永远返回四个点', () => {
    expect(shadowQuad(rect, { x: -100, y: 16 }, 200)).toHaveLength(4);
  });

  it('光源在上方时，阴影向下延伸', () => {
    const q = shadowQuad(rect, { x: 16, y: -100 }, 200);
    const maxY = Math.max(...q.map((p) => p.y));
    expect(maxY).toBeGreaterThan(rect.h);
  });
});

import { _decorator, Camera, Color, Component, Layers, RenderTexture } from 'cc';

const { ccclass, property, requireComponent } = _decorator;

@ccclass('ShadowCasterCamera')
@requireComponent(Camera)
export class ShadowCasterCamera extends Component {
  @property
  shadowSize = 512;

  private _rt: RenderTexture | null = null;

  onEnable(): void {
    const rt = new RenderTexture();
    rt.reset({ width: this.shadowSize, height: this.shadowSize });
    this._rt = rt;

    const cam = this.getComponent(Camera);
    if (!cam) return;
    cam.targetTexture = rt;
    // 只让相机看见投射体所在的那一层，其余层被裁掉
    cam.visibility = Layers.makeMaskInclude([Layers.Enum.DEFAULT]);
    cam.clearFlags = Camera.ClearFlag.SOLID_COLOR;
    cam.clearColor = new Color(0, 0, 0, 0);
  }

  onDisable(): void {
    const cam = this.getComponent(Camera);
    if (cam) cam.targetTexture = null;
    this._rt?.destroy();
    this._rt = null;
  }
}

{
  "assets/textures/lightmaps/level01_lm.png": "白天光照贴图",
  "assets/textures/lightmaps/level01_lm_night.png": "夜晚光照贴图",
  "assets/materials/lightmap-additive.mtl": "加法混合材质",
  "userData": { "type": "texture", "wrapMode": "clamp-to-edge" }
}

// bake.ts —— 纯 TypeScript 烘焙器骨架，零 cc 依赖
export interface Vec2 { x: number; y: number; }

export interface Light {
  pos: Vec2;
  radius: number;
  color: [number, number, number]; // 0–1
}

export interface BakeOptions {
  lights: Light[];
  ambient: number; // 环境光下限，避免纯黑
}

/** 把多个点光源烘焙进一张 RGBA 光照贴图 */
export function bake(
  width: number, height: number, opts: BakeOptions,
): Uint8Array {
  const out = new Uint8Array(width * height * 4);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let r = opts.ambient;
      let g = opts.ambient;
      let b = opts.ambient;
      for (const l of opts.lights) {
        const d = Math.hypot(x - l.pos.x, y - l.pos.y);
        if (d >= l.radius) continue;
        const t = 1 - d / l.radius;
        const att = t * t; // 平方衰减，与 4.1 一致
        r += l.color[0] * att;
        g += l.color[1] * att;
        b += l.color[2] * att;
      }
      const i = (y * width + x) * 4;
      out[i] = Math.min(255, r * 255);
      out[i + 1] = Math.min(255, g * 255);
      out[i + 2] = Math.min(255, b * 255);
      out[i + 3] = 255;
    }
  }
  return out;
}

// bake.test.ts —— vitest
import { describe, it, expect } from 'vitest';
import { bake } from './bake';

describe('光照烘焙', () => {
  it('输出尺寸正确', () => {
    const px = bake(8, 8, { lights: [], ambient: 0.1 });
    expect(px.length).toBe(8 * 8 * 4);
  });

  it('光源正下方比远处亮', () => {
    const px = bake(64, 64, {
      lights: [{ pos: { x: 32, y: 32 }, radius: 40, color: [1, 1, 1] }],
      ambient: 0,
    });
    const center = px[(32 * 64 + 32) * 4];
    const corner = px[0];
    expect(center).toBeGreaterThan(corner);
  });

  it('超过半径只有环境光', () => {
    const px = bake(8, 8, {
      lights: [{ pos: { x: -999, y: -999 }, radius: 1, color: [1, 1, 1] }],
      ambient: 0.2,
    });
    expect(px[0]).toBe(Math.round(0.2 * 255));
  });
});