webgpu 初探 ​

/* 1.初始化adapter和device */
async function initwebgpu(canvas: HTMLCanvasElement) {
  // 判断浏览器是否支持gpu
  if (!navigator.gpu) {
    throw new Error(
      "你的浏览器不支持webgpu捏，请使用谷歌或edga浏览器的最新版本"
    );
  }

  // 生成adapter抽象代理
  const adapter = await navigator.gpu.requestAdapter({
    powerPreference: "high-performance",
  });

  if (!adapter) {
    throw new Error("没有找到webgpu adapter代理捏");
  }

  // 通过adapter请求逻辑实例device
  const device = await adapter.requestDevice();

  // 为canvas获取webgpu的上线问context
  const context = canvas.getContext("webgpu") as GPUCanvasContext;

  // 获取支持的颜色格式
  const format = navigator.gpu.getPreferredCanvasFormat
    ? navigator.gpu.getPreferredCanvasFormat()
    : context.getPreferredFormat(adapter);

  // 高刷支持（不懂）
  const devicePixelRatio = window.devicePixelRatio || 1;

  // canvas设置
  canvas.width = canvas.clientWidth * devicePixelRatio;
  canvas.height = canvas.clientHeight * devicePixelRatio;
  const size = { width: canvas.width, height: canvas.height };

  // 对context上下文进行配置
  context.configure({
    device,
    format,
    alphaMode: "opaque",
  });
  return { device, context, format, size };
}

/* 2.创建简单的渲染管线 */
async function initpipeline(
  device: GPUDevice,
  format: GPUTextureFormat
): Promise<GPURenderPipeline> {
  // descriptor是创建管线所必要的参数
  const descriptor: GPURenderPipelineDescriptor = {
    // 新版本增加成员，必要（不然会报错，先不管）
    layout: "auto",
    // 描述管线的顶点着色器，或者说是顶点shader？
    vertex: {
      module: device.createShaderModule({
        code: triangleVert,
      }),
      // shader的入口？
      entryPoint: "main",
    },
    // 描述与管线相关的原始属性（渲染是如何进行原始组装和光栅化的）
    primitive: {
      // topology: "triangle-list",
      topology: "line-strip",
      topology: "triangle-strip",

    },
    // 描述管线的着色器入口及其输出颜色
    fragment: {
      module: device.createShaderModule({
        code: redFrag,
      }),
      entryPoint: "main",
      targets: [{ format }],
    },
  };

  return await device.createRenderPipelineAsync(descriptor);
}

async function draw(
  device: GPUDevice,
  context: GPUCanvasContext,
  pipeline: GPURenderPipeline
) {
  // 获取命令encoder
  const commandEncoder = device.createCommandEncoder();
  // 获取可以被gpu操作的view buffer
  const view = context.getCurrentTexture().createView();
  // 设置渲染通道参数
  const renderPassDescriptor: GPURenderPassDescriptor = {
    // 设置颜色附件
    colorAttachments: [
      {
        view,
        clearValue: { r: 0, g: 0, b: 0, a: 1.0 },
        loadOp: "clear",
        storeOp: "store",
      },
    ],
  };
  // 设置renderpass
  const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
  // 使用命令对pipeline进行加载
  passEncoder.setPipeline(pipeline);
  passEncoder.draw(4);
  passEncoder.end();
  // 提交命令
  device.queue.submit([commandEncoder.finish()]);
}

 async function run() {
    const canvas = document.getElementById("cv");

    if (!canvas) throw new Error("没有画布元素");

    const { device, context, format } = await initwebgpu(canvas);
    const pipeline = await initpipeline(device, format);

    draw(device, context, pipeline);

  }
  run();

import * as pkg from "@orillusion/core";
const {
    Engine3D,
    Scene3D,
    AtmosphericComponent,
    Object3D,
    Camera3D,
    HoverCameraController,
    DirectLight,
    MeshRenderer,
    BoxGeometry,
    LitMaterial,
    View3D,
    ComponentBase,
    Color,
    Time,
    PostProcessingComponent,
    TAAPost
  } = pkg;

await Engine3D.init({
    canvasConfig: {
      canvas,
      // backgroundImage:`./img/gril.png`
      // devicePixelRatio:2,
    },
  });

let scene3D: Scene3D = new Scene3D();
  // add an Atmospheric sky enviroment
  let sky = scene3D.addComponent(AtmosphericComponent);
  
  // sky.sunY = 0.66
  // sky.fov=1
  // sky.name='stusky'

  // console.log(sky);

  // create camera
  let cameraObj: Object3D = new Object3D();

  let camera = cameraObj.addComponent(Camera3D);

  // adjust camera view
  camera.perspective(60, Engine3D.aspect, 1, 5000.0);
  // set camera controller
  let controller = cameraObj.addComponent(HoverCameraController);
  controller.setCamera(0, 0, 15);
  // add camera node

  scene3D.addChild(cameraObj);

  camera.viewPort.width = 566;

  // create light
  let light: Object3D = new Object3D();

  // add direct light component
  let component: DirectLight = light.addComponent(DirectLight);

  // adjust lighting
  light.rotationX = 45;
  light.rotationY = 30;
  component.lightColor = new Color(1.0, 0, 0, 1);
  component.intensity = 10;
  //  给灯光增加变换脚本
  component.object3D.addComponent(LightAnimation);

  // add light object
  scene3D.addChild(light);
  // create new object
  const obj: Object3D = new Object3D();
  // add MeshRenderer
  let mr: MeshRenderer = obj.addComponent(MeshRenderer);
  // set geometry
  mr.geometry = new BoxGeometry(5, 5, 5);
  // set material
  mr.material = new LitMaterial();
  // set rotation
  obj.rotationY = 115;
  // 给实体对象增加坐标移动脚本
  obj.addComponent(PathAnimation);
  // add object
  scene3D.addChild(obj);

 let view = new View3D();
  // scene3D.scaleX=1
  // scene3D.scaleY=10
  // scene3D.scaleZ=10
  // scene3D.rotationZ=11
  view.scene = scene3D;
  view.camera = camera;

  // start render
  Engine3D.startRenderView(view);

class LightAnimation extends ComponentBase {
    private light: DirectLight;
    private color: Color;

    protected start() {
      this.light = this.object3D.getComponent(DirectLight);
      console.log(this);

      this.color = this.light.lightColor;
    }

    onUpdate() {
      // this.color.r = Math.pow(Math.sin(Time.time + 1), 10);
      // this.color.r=20
      this.color.r += 0.0001;
      this.color.g += 0.0003;
      this.color.b += 0.0002;
      // this.color.g = Math.pow(Math.sin(Time.time + 0.003), 10);
      this.light.lightColor = this.color;
    }
  }
class PathAnimation extends ComponentBase {
    onUpdate() {
      this.object3D.x = Math.sin(Time.time * 0.001) * 2;
      this.object3D.y = Math.cos(Time.time * 0.001) * 2;
    }
  }

ngine3D.setting.render.postProcessing.taa.jitterSeedCount = 4;
  Engine3D.setting.render.postProcessing.taa.blendFactor = 0.1;
  Engine3D.setting.render.postProcessing.taa.sharpFactor = 0.3;
  Engine3D.setting.render.postProcessing.taa.sharpPreBlurFactor = 0.5;
  Engine3D.setting.render.postProcessing.taa.temporalJitterScale = 0.3;

   let postProcessing = scene3D.addComponent(PostProcessingComponent);
  postProcessing.addPost(TAAPost);