元宇宙探索之路

元宇宙，或称为后设宇宙、形上宇宙、元界、魅他域、超感空间、虚空间，是一个聚焦于社交链接的 3D 虚拟世界之网络。关于元宇宙的讨论，主要是探讨一个持久化和去中心化的在线三维虚拟环境。此虚拟环境将可以通过虚拟现实眼镜、增强现实眼镜、手机、个人电脑和电子游戏机进入人造的虚拟世界。以上维基百科对于元宇宙的解释。

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');
const vertex = `
  attribute vec2 position;
  void main() {
  gl_Position = vec4(position, 1.0, 1.0);
  }
`;
const fragment = `
  precision mediump float;
  void main()
  {
  gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
  }  
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const points = new Float32Array([
  -1, -1,
  0, 1,
  1, -1,
]);
const bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
const vPosition = gl.getAttribLocation(program, 'position');
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);

   

•            模型边界
     
  
       
  
  •              问题描述：没有判断模型边界，导致模型可以超过合理范围去放大与缩小。     
    
  •              解决方式：从设计规范出发，开发与设计对齐规范，严格按照统一尺度输出模型。   
    
     
  
•            碰撞检测
     
  
       
  
  •              问题描述：没有做好碰撞检测，导致人物模型可以穿透场景模型。     
    
  •              解决方式：除了输出常规显示的模型，还需要输出不用于显示的低模，利用低模来实现碰撞检测，降低碰撞的计算量；添加寻路系统，当运动模型自动行走时，可以自动绕开障碍物模型。     
    
  •              优化前：            
    
  •              优化后：     
    
  • 
    
       
    
     
  
•            场景切换
     
  
       
  
  •              问题描述：场景切换时，镜头会旋转。     
    
  •              解决方式：切换场景时，需要对不展示的场景关闭控制。需要注意的是，在初始化场景时，通常会伴随着初始化控制，最好在构建函数的最后关闭控制，在当前场景下再开启控制，保证场景控制的唯一性。   
    
     
  
•            内存开支严重
     
  
       
  
  •              问题描述：内存占用率大，游戏运行一段时间后，手机会有发热和卡顿等现象。     
    
  •              解决方式：控制内存开销，切换场景时，清空其他场景，避免无效的内存占用。     
    
  •              优化前：            
    
  •              优化后：