// 獲取 canvas 元素的引用
const canvas = document.getElementById("canvas");

// 從 canvas 獲取 WebGPU 上下文
const context = canvas.getContext("webgpu");
// 從上下文中獲取默認適配器 (GPU)
const adapter = await context.getAdapter();
// 從適配器獲取設備（GPU 的邏輯表示）
const device = await adapter.requestDevice();
// 從上下文中創建交換鏈（一組用于顯示幀的緩沖區）
const swapChainFormat = "bgra8unorm";
const swapChain = context.configureSwapChain({
  device,
  format: swapChainFormat,
});
// 從設備創建著色器模塊（著色器代碼的容器）
const shaderModule = device.createShaderModule({
  code: `
    // 頂點著色器
    [[stage(vertex)]]
    fn main([[builtin(vertex_index)]] index: u32) -> [[builtin(position)]] vec4<f32> {
      // 定義三角形頂點的位置
      var positions: array<vec2<f32>, 3> = array<vec2<f32>, 3>(
        vec2<f32>(0.0, 0.5),
        vec2<f32>(-0.5, -0.5),
        vec2<f32>(0.5, -0.5),
      );
      // 返回當前頂點的位置
      return vec4<f32>(positions[index], 0.0, 1.0);
    }
    // 片段著色器
    [[stage(fragment)]]
    fn main() -> [[location(0)]] vec4<f32> {
      // 返回三角形的顏色（紅色）
      return vec4<f32>(1.0, 0.0, 0.0, 1.0);
    }
  `,
});
// 從設備創建管道（用于渲染的一系列操作）
const pipeline = device.createRenderPipeline({
  // 指定頂點階段（著色器模塊和入口點）
  vertex: {
    module: shaderModule,
    entryPoint: "main",
  },
  // 指定片段階段（著色器模塊和入口點）
  fragment: {
    module: shaderModule,
    entryPoint: "main",
    // 指定輸出格式和位置
    targets: [
      {
        format: swapChainFormat,
      },
    ],
  },
  // 指定原始拓撲（頂點如何連接）
  primitive: {
    topology: "triangle-list",
  },
});

// 從設備創建命令編碼器（用于記錄命令的輔助對象）
const commandEncoder = device.createCommandEncoder();

// 從交換鏈中獲取當前紋理（緩沖區）
const texture = swapChain.getCurrentTexture();

// 從命令編碼器創建渲染通道（一組用于渲染的命令）
const renderPass = commandEncoder.beginRenderPass({
  // 指定輸出紋理和顏色
  colorAttachments: [
    {
      view: texture.createView(),
      loadValue: [0.5, 0.5, 0.5, 1], // gray
      storeOp: "store",
    },
  ],
});

// 為渲染過程設置 pipeline
renderPass.setPipeline(pipeline);

// 繪制三角形（3 個頂點，1 個實例）
renderPass.draw(3, 1, 0, 0);

// 結束渲染過程
renderPass.endPass();

// 從命令編碼器獲取命令緩沖區（命令的容器）
const commandBuffer = commandEncoder.finish();

// 將命令緩沖區提交到設備隊列（要執行的命令列表）
device.queue.submit([commandBuffer]);

// 請求一個動畫幀來渲染下一幀
requestAnimationFrame(render);

const engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();


const scene = new BABYLON.Scene(engine);

const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);

const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);

const material = new BABYLON.StandardMaterial("material", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0);

sphere.material = material;

engine.runRenderLoop(() => {
    scene.render();
});

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGPURenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

const engine = Filament.Engine.create(canvas);

const scene = engine.createScene();

const camera = engine.createCamera();

const view = engine.createView();
view.setCamera(camera);
view.setScene(scene);

const skybox = engine.createSkyFromKtx('venetian_crossroads_2k_ibl.ktx');
scene.setSkybox(skybox);

const indirectLight = engine.createIblFromKtx('venetian_crossroads_2k_ibl.ktx');
scene.setIndirectLight(indirectLight);

const material = engine.createMaterial('lit.filamat');

const renderable = Filament.EntityManager.get().create();
scene.addEntity(renderable);

Filament.fetch('DamagedHelmet.glb', (buffer) => {
  const loader = new Filament.gltfio.AssetLoader(engine);
  const asset = loader.createAssetFromBinary(buffer);
  loader.delete();
  asset.getEntities().forEach((entity) => {
    scene.addEntity(entity);
  });
});

function render() {
  requestAnimationFrame(render);
  view.setViewport([0, 0, canvas.width, canvas.height]);
  renderer.render(view);
}
render();

import * as tf from '@tensorflow/tfjs';

import '@tensorflow/tfjs-backend-webgpu';

await tf.ready();

tf.setBackend('webgpu');

const a = tf.tensor([1, 2, 3, 4]);
const b = tf.tensor([5, 6, 7, 8]);

const c = a.add(b);
c.print();