import { WebGLDevice } from '@maxellabs/rhi';

// 获取画布元素
const canvas = document.getElementById('canvas') as HTMLCanvasElement;

// 创建WebGL设备
const device = new WebGLDevice(canvas, {
  antialias: true,
  alpha: true,
  depth: true,
  stencil: false,
  powerPreference: 'high-performance'
});

// 获取设备信息
const deviceInfo = device.getInfo();
console.log('WebGL版本:', deviceInfo.backend);
console.log('最大纹理尺寸:', deviceInfo.maxTextureSize);

import { Vector3, Matrix4, Quaternion } from '@maxellabs/math';

// 创建3D向量
const position = Vector3.create(1, 2, 3);
const direction = Vector3.create(0, 0, 1);

// 向量运算
const distance = position.getLength();
const normalized = position.normalized();
const dotProduct = Vector3.dot(position, direction);

// 矩阵变换
const matrix = new Matrix4();
matrix.perspective(45, canvas.width / canvas.height, 0.1, 1000);
matrix.translate(new Vector3(0, 0, -5));
matrix.rotateY(Math.PI / 4);

// 应用矩阵变换到向量
const transformed = Vector3.create(1, 0, 0);
transformed.applyMatrix(matrix);

import { WebGLDevice, RHIBufferUsage, RHIPrimitiveTopology } from '@maxellabs/rhi';
import { Vector3 } from '@maxellabs/math';

// 创建顶点数据（三角形）
const vertices = new Float32Array([
  // 位置(x, y, z)
  -0.5, -0.5, 0.0,
   0.5, -0.5, 0.0,
   0.0,  0.5, 0.0
]);

// 创建顶点缓冲区
const vertexBuffer = device.createBuffer({
  size: vertices.byteLength,
  usage: RHIBufferUsage.VERTEX,
  hint: 'static',
  initialData: vertices
});

// 创建着色器
const vertexShader = device.createShaderModule({
  code: `
    attribute vec3 aPosition;
    uniform mat4 uModelViewProjection;
    void main() {
      gl_Position = uModelViewProjection * vec4(aPosition, 1.0);
    }
  `,
  language: 'glsl',
  stage: 'vertex'
});

const fragmentShader = device.createShaderModule({
  code: `
    precision mediump float;
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
  `,
  language: 'glsl',
  stage: 'fragment'
});

// 创建渲染管线
const pipeline = device.createRenderPipeline({
  vertexShader,
  fragmentShader,
  primitiveTopology: RHIPrimitiveTopology.TRIANGLE_LIST,
  vertexLayout: {
    buffers: [{
      stride: 12, // 3个float * 4字节
      attributes: [{
        name: 'aPosition',
        format: 'float32x3',
        offset: 0,
        shaderLocation: 0
      }]
    }]
  }
});

// 渲染循环
function render() {
  const commandEncoder = device.createCommandEncoder();
  const renderPass = commandEncoder.beginRenderPass({
    colorAttachments: [{
      view: canvas.getContext('webgl')!.getParameter(canvas.getContext('webgl')!.FRAMEBUFFER),
      loadOp: 'clear',
      storeOp: 'store',
      clearColor: [0.1, 0.1, 0.1, 1.0]
    }]
  });
  
  renderPass.setPipeline(pipeline);
  renderPass.setVertexBuffer(0, vertexBuffer);
  renderPass.draw(3, 1, 0, 0);
  renderPass.end();
  
  device.submit([commandEncoder.finish()]);
  requestAnimationFrame(render);
}

render();

import { Vector3 } from '@maxellabs/math';

// 启用对象池
import { MathConfig } from '@maxellabs/math/config/mathConfig';
MathConfig.setObjectPoolEnabled(true);

// 预分配对象池
Vector3.preallocate(1000);

// 使用对象池创建向量
function processVectors() {
  const vectors: Vector3[] = [];
  
  for (let i = 0; i < 1000; i++) {
    // 从对象池创建向量
    const vec = Vector3.create(
      Math.random() * 2 - 1,
      Math.random() * 2 - 1,
      Math.random() * 2 - 1
    );
    
    // 处理向量
    vec.normalize();
    vec.scale(2.0);
    
    vectors.push(vec);
  }
  
  // 使用完成后释放回对象池
  vectors.forEach(vec => Vector3.release(vec));
  
  // 获取对象池统计信息
  const stats = Vector3.getPoolStats();
  console.log('对象池统计:', stats);
}

processVectors();

import { Engine } from '@maxellabs/engine';
import { WebGLDevice } from '@maxellabs/rhi';
import { Vector3, Matrix4 } from '@maxellabs/math';

// 创建引擎实例
const engine = new Engine({
  canvas: 'canvas',
  targetFrameRate: 60,
  enableVSync: true,
  antialias: true,
  debug: true
});

// 初始化引擎
await engine.initialize();

// 获取场景管理器
const sceneManager = engine.getSceneManager();

// 创建场景
const scene = sceneManager.createScene('main-scene');

// 创建相机节点
const cameraNode = scene.createNode('camera');
cameraNode.position = new Vector3(0, 0, 5);
cameraNode.lookAt(new Vector3(0, 0, 0));

// 创建立方体节点
const cubeNode = scene.createNode('cube');
cubeNode.position = new Vector3(0, 0, 0);

// 添加旋转动画
cubeNode.addComponent({
  name: 'rotation',
  update: (deltaTime: number) => {
    cubeNode.rotation.y += deltaTime * 0.5;
    cubeNode.rotation.x += deltaTime * 0.3;
  }
});

// 启动引擎
engine.start();

// 监听引擎事件
engine.addEventListener('update', (event) => {
  const { deltaTime } = event;
  
  // 获取性能统计
  const stats = engine.getPerformanceStats();
  console.log('FPS:', engine.getFrameRate());
  console.log('平均帧时间:', stats.averageFrameTime + 'ms');
});

// 处理窗口大小变化
window.addEventListener('resize', () => {
  const canvas = document.getElementById('canvas') as HTMLCanvasElement;
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  // 更新相机投影矩阵
  const aspect = canvas.width / canvas.height;
  cameraNode.camera.setProjectionMatrix(Matrix4.perspective(45, aspect, 0.1, 1000));
});

import { WebGLDevice, RHITextureFormat, RHITextureUsage } from '@maxellabs/rhi';

// 创建纹理
const texture = device.createTexture({
  width: 512,
  height: 512,
  format: RHITextureFormat.RGBA8_UNORM,
  usage: RHITextureUsage.SAMPLED | RHITextureUsage.COPY_DST,
  dimension: '2d'
});

// 加载图像数据
const image = new Image();
image.src = 'texture.jpg';
image.onload = () => {
  // 创建画布来获取图像数据
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext('2d')!;
  ctx.drawImage(image, 0, 0);
  
  const imageData = ctx.getImageData(0, 0, image.width, image.height);
  texture.update(imageData.data);
};

// 创建采样器
const sampler = device.createSampler({
  magFilter: 'linear',
  minFilter: 'linear',
  mipmapFilter: 'linear',
  addressModeU: 'repeat',
  addressModeV: 'repeat'
});

// 在着色器中使用纹理
const fragmentShader = device.createShaderModule({
  code: `
    precision mediump float;
    uniform sampler2D uTexture;
    varying vec2 vTexCoord;
    void main() {
      gl_FragColor = texture2D(uTexture, vTexCoord);
    }
  `,
  language: 'glsl',
  stage: 'fragment'
});

// 创建光源节点
const lightNode = scene.createNode('directional-light');
lightNode.position = new Vector3(5, 5, 5);
lightNode.lookAt(new Vector3(0, 0, 0));

// 添加光源组件
lightNode.addComponent({
  name: 'directional-light',
  color: new Vector3(1, 1, 1),
  intensity: 1.0,
  castShadow: true,
  shadowMapSize: 1024,
  shadowBias: 0.001,
  shadowRadius: 2.0
});

// 创建阴影接收平面
const planeNode = scene.createNode('ground-plane');
planeNode.position = new Vector3(0, -2, 0);
planeNode.scale = new Vector3(10, 1, 10);

// 添加阴影接收材质
planeNode.addComponent({
  name: 'shadow-receiver',
  receiveShadow: true,
  material: {
    type: 'standard',
    color: new Vector3(0.8, 0.8, 0.8),
    roughness: 0.8,
    metalness: 0.2
  }
});

// 在着色器中计算光照
const lightingShader = device.createShaderModule({
  code: `
    precision mediump float;
    uniform vec3 uLightDirection;
    uniform vec3 uLightColor;
    uniform float uLightIntensity;
    varying vec3 vNormal;
    varying vec3 vPosition;
    
    void main() {
      vec3 normal = normalize(vNormal);
      vec3 lightDir = normalize(-uLightDirection);
      
      // 漫反射光照
      float diff = max(dot(normal, lightDir), 0.0);
      vec3 diffuse = diff * uLightColor * uLightIntensity;
      
      // 环境光
      vec3 ambient = vec3(0.1, 0.1, 0.1);
      
      gl_FragColor = vec4(ambient + diffuse, 1.0);
    }
  `,
  language: 'glsl',
  stage: 'fragment'
});

import { Vector3, Quaternion } from '@maxellabs/math';

// 创建动画关键帧
interface KeyFrame {
  time: number;
  position: Vector3;
  rotation: Quaternion;
  scale: Vector3;
}

const keyFrames: KeyFrame[] = [
  {
    time: 0,
    position: Vector3.create(-5, 0, 0),
    rotation: Quaternion.identity(),
    scale: Vector3.create(1, 1, 1)
  },
  {
    time: 1,
    position: Vector3.create(0, 2, 0),
    rotation: Quaternion.fromAxisAngle(Vector3.Y, Math.PI / 2),
    scale: Vector3.create(1.5, 1.5, 1.5)
  },
  {
    time: 2,
    position: Vector3.create(5, 0, 0),
    rotation: Quaternion.fromAxisAngle(Vector3.Y, Math.PI),
    scale: Vector3.create(1, 1, 1)
  }
];

// 创建动画组件
const animationComponent = {
  name: 'keyframe-animation',
  keyFrames: keyFrames,
  currentTime: 0,
  duration: 2,
  loop: true,
  
  update: (deltaTime: number) => {
    this.currentTime += deltaTime;
    
    if (this.loop && this.currentTime > this.duration) {
      this.currentTime = this.currentTime % this.duration;
    }
    
    // 找到当前时间前后的关键帧
    let prevFrame = this.keyFrames[0];
    let nextFrame = this.keyFrames[this.keyFrames.length - 1];
    
    for (let i = 0; i < this.keyFrames.length - 1; i++) {
      if (this.currentTime >= this.keyFrames[i].time && 
          this.currentTime <= this.keyFrames[i + 1].time) {
        prevFrame = this.keyFrames[i];
        nextFrame = this.keyFrames[i + 1];
        break;
      }
    }
    
    // 计算插值因子
    const frameDuration = nextFrame.time - prevFrame.time;
    const t = frameDuration > 0 ? (this.currentTime - prevFrame.time) / frameDuration : 0;
    
    // 插值位置
    const position = Vector3.lerp(
      prevFrame.position,
      nextFrame.position,
      t
    );
    
    // 球面线性插值旋转
    const rotation = Quaternion.slerp(
      prevFrame.rotation,
      nextFrame.rotation,
      t
    );
    
    // 插值缩放
    const scale = Vector3.lerp(
      prevFrame.scale,
      nextFrame.scale,
      t
    );
    
    // 应用到节点
    cubeNode.position = position;
    cubeNode.rotation = rotation;
    cubeNode.scale = scale;
  }
};

// 添加动画组件到节点
cubeNode.addComponent(animationComponent);