一个旋转cube，用了lookat

最新推荐文章于 2024-08-10 15:00:00 发布
最新推荐文章于 2024-08-10 15:00:00 发布
阅读量685 收藏 11
点赞数 9
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012290759/article/details/137123134
版权

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>てｓｔ</title>
</head>
 
<body>
    <!-- canvas：用来展示WebGPU渲染的结果 -->
    <canvas id="webgpu" width="500" height="500"></canvas>
    <script type="module">
       
 //chrome setting:
 //"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="D:\angular\webgpu\n" --disable-site-isolation-trials
 //
 
 //1,增加一个uniform buffer object（简称为ubo），
 //用于传输“model矩阵 乘以 view矩阵 乘以 projection矩阵”的结果矩阵（简称为mvp矩阵），并在每帧被更新
//2.设置顶点
//3.开启面剔除
//4.开启深度测试
 
        // 配置WebGPU上下文
        const adapter = await navigator.gpu.requestAdapter();
        const device = await adapter.requestDevice();
        const canvas = document.getElementById('webgpu');
        const context = canvas.getContext('webgpu');
        const format = navigator.gpu.getPreferredCanvasFormat();
        context.configure({
            device: device,
            format: format,
        });
 
 
     const cubeVertexArray2 = new Float32Array([
  // float4 position, float4 color, float2 uv,
  1, -1, 1, 1,   1, 0, 1, 1,  1, 1,
  -1, -1, 1, 1,  0, 0, 1, 1,  0, 1,
  -1, -1, -1, 1, 0, 0, 0, 1,  0, 0,
  1, -1, -1, 1,  1, 0, 0, 1,  1, 0,
  1, -1, 1, 1,   1, 0, 1, 1,  1, 1,
  -1, -1, -1, 1, 0, 0, 0, 1,  0, 0,

  1, 1, 1, 1,    1, 1, 1, 1,  1, 1,
  1, -1, 1, 1,   1, 0, 1, 1,  0, 1,
  1, -1, -1, 1,  1, 0, 0, 1,  0, 0,
  1, 1, -1, 1,   1, 1, 0, 1,  1, 0,
  1, 1, 1, 1,    1, 1, 1, 1,  1, 1,
  1, -1, -1, 1,  1, 0, 0, 1,  0, 0,

  -1, 1, 1, 1,   0, 1, 1, 1,  1, 1,
  1, 1, 1, 1,    1, 1, 1, 1,  0, 1,
  1, 1, -1, 1,   1, 1, 0, 1,  0, 0,
  -1, 1, -1, 1,  0, 1, 0, 1,  1, 0,
  -1, 1, 1, 1,   0, 1, 1, 1,  1, 1,
  1, 1, -1, 1,   1, 1, 0, 1,  0, 0,

  -1, -1, 1, 1,  0, 0, 1, 1,  1, 1,
  -1, 1, 1, 1,   0, 1, 1, 1,  0, 1,
  -1, 1, -1, 1,  0, 1, 0, 1,  0, 0,
  -1, -1, -1, 1, 0, 0, 0, 1,  1, 0,
  -1, -1, 1, 1,  0, 0, 1, 1,  1, 1,
  -1, 1, -1, 1,  0, 1, 0, 1,  0, 0,

  1, 1, 1, 1,    1, 1, 1, 1,  1, 1,
  -1, 1, 1, 1,   0, 1, 1, 1,  0, 1,
  -1, -1, 1, 1,  0, 0, 1, 1,  0, 0,
  -1, -1, 1, 1,  0, 0, 1, 1,  0, 0,
  1, -1, 1, 1,   1, 0, 1, 1,  1, 0,
  1, 1, 1, 1,    1, 1, 1, 1,  1, 1,

  1, -1, -1, 1,  1, 0, 0, 1,  1, 1,
  -1, -1, -1, 1, 0, 0, 0, 1,  0, 1,
  -1, 1, -1, 1,  0, 1, 0, 1,  0, 0,
  1, 1, -1, 1,   1, 1, 0, 1,  1, 0,
  1, -1, -1, 1,  1, 0, 0, 1,  1, 1,
  -1, 1, -1, 1,  0, 1, 0, 1,  0, 0,
]);
        
 //-------设置顶点--------------------------
//引入gl-matrix.js库
 import * as glMatrix from './dist/esm/index.js';

  // 定点缓冲区
  const vertexBuffer = device.createBuffer({
    size: cubeVertexArray2.byteLength, //顶点数据的字节长度
    //usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  });
 
  // 将顶点信息写入缓冲器
  device.queue.writeBuffer(vertexBuffer, 0, cubeVertexArray2);
  

//------------wsgl代码-------------------  
  const module = device.createShaderModule({
    label: 'triangle shaders with uniforms',
    code: `

struct Uniforms {
  modelViewProjectionMatrix : mat4x4f//这里不能用分号
};

@group(0) @binding(0) var<uniform> uniforms : Uniforms;

struct VertexOutput {
  @builtin(position) Position : vec4f,
  @location(0) fragUV : vec2f,
  @location(1) fragPosition: vec4f
};

@vertex
fn vs(@location(0) position : vec4f,@location(1) uv : vec2f) -> VertexOutput {
  var output : VertexOutput;
  output.Position =  uniforms.modelViewProjectionMatrix * position;
  output.fragUV = uv;
  output.fragPosition = 0.5 * (position + vec4f(1.0, 1.0, 1.0, 1.0));
  return output;
}

@fragment 
fn fs(@location(0) fragUV: vec2<f32>,@location(1) fragPosition: vec4<f32>) -> @location(0) vec4<f32> {
  return fragPosition;
}

`,
  });
 
 let cubePositionOffset=0;
 let cubeUVOffset=4*8;
 let cubeVertexSize=4*10;
 const pipeline = device.createRenderPipeline({
 layout: "auto",
    vertex: {
      module: module ,
      entryPoint: 'vs',
      buffers: [ // 为顶点着色器配置Buffer
        {
          arrayStride: cubeVertexSize,
          attributes: [
            {
              // position
              shaderLocation: 0,
              offset: cubePositionOffset,
              format: 'float32x4',
            },
            {
              // uv
              shaderLocation: 1,
              offset: cubeUVOffset,
              format: 'float32x2',
            },
          ],
        },
      ],
    },
    fragment: {
      module: module ,
      entryPoint: 'fs',
      targets: [
        {
          format: format,
        },
      ],
    },
    primitive: {
      topology: 'triangle-list',

      // Backface culling since the cube is solid piece of geometry.
      // Faces pointing away from the camera will be occluded by faces
      // pointing toward the camera.

//3.开启背面面剔除

      cullMode: 'back',
    },
    //multisample: {
    //  count: 4
    //},

    // Enable depth testing so that the fragment closest to the camera
    // is rendered in front.
    
    //4.开启深度测试
    depthStencil: {
      depthWriteEnabled: true,
      depthCompare: 'less',
      format: 'depth24plus',
    },
  });

 
const uniformBufferSize = 4 * 16; // 4x4 matrix
  const uniformBuffer = device.createBuffer({
    size: uniformBufferSize,
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
  });

const uniformBindGroup = device.createBindGroup({
    layout: pipeline.getBindGroupLayout(0),
    entries: [
      {
        binding: 0,
        resource: {
          buffer: uniformBuffer,
        },
      },
    ],
  });
  
 const depthTexture = device.createTexture({
    size: {
      width: canvas.width,
      height: canvas.height,
    },
    format: "depth24plus",
    //sampleCount: 4,
    usage: GPUTextureUsage.RENDER_ATTACHMENT
  });
 
 const renderPassDescriptor = {
    colorAttachments: [
      {
       // view: context.getCurrentTexture().createView(), // Assigned later
loadOp: 'clear',
        loadValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 },
       storeOp: 'store',
      },
    ],
    depthStencilAttachment: {
      view: depthTexture.createView(),
depthStoreOp: 'store',
depthClearValue: 1.0,
      depthLoadOp: "clear",
      depthLoadValue: 1.0,
     // depthStoreOp: 'store',
     // stencilLoadValue: 0,
      //stencilStoreOp: 'store',
    },
  };
  
  //固定相机，透视投影
   const aspect = Math.abs(canvas.width / canvas.height);
  let projectionMatrix = glMatrix.mat4.create();
  glMatrix.mat4.perspective(projectionMatrix, (2 * Math.PI) / 5, aspect, 1, 100.0);
 
   //计算mvp矩阵
  function getTransformationMatrix() {
  
  //顺序：平移--》旋转--》缩放
    let viewMatrix = glMatrix.mat4.create();
    glMatrix.mat4.translate(viewMatrix, viewMatrix, glMatrix.vec3.fromValues(0, 0, -5));
    let now = Date.now() / 1000;
    glMatrix.mat4.rotate(viewMatrix, viewMatrix, 1, glMatrix.vec3.fromValues(Math.sin(now), Math.cos(now), 0));

    let modelViewProjectionMatrix = glMatrix.mat4.create();
    //顺序：透视投影 x 旋转矩阵
    glMatrix.mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix);

    return modelViewProjectionMatrix;
  }
  //------------------
//==============================
// return mvp matrix from given aspect, position, rotation, scale
/*
function getMvpMatrix(
    aspect: number,
    position: {x:number, y:number, z:number},
    rotation: {x:number, y:number, z:number},
    scale: {x:number, y:number, z:number}
){
*/

const center = glMatrix.vec3.fromValues(0,0,0)
const up = glMatrix.vec3.fromValues(0,1,0)

  // default state
  //  let aspect = size.width / size.height
 

    
    /*
     let position;
    position.x=0;
    position.y=0
    position.z= -5 
    
    let scale;
    scale.x=1
    scale.y=1
    scale.z=1 
    
    let rotation;
    rotation.x= 0
    rotation.y= 0
    rotation.z= 0
    */

function getMvpMatrix(
    aspect,
    position,
    rotation ,
    scale
){
    // get modelView Matrix
    const modelViewMatrix = getModelViewMatrix(position, rotation, scale)
    // get projection Matrix
    const projectionMatrix = getProjectionMatrix(aspect,60 / 180 * Math.PI,0.1,100.0,{x:0, y:0, z:0})
    
    
    // get mvp matrix
    const mvpMatrix = glMatrix.mat4.create()
    glMatrix.mat4.multiply(mvpMatrix, projectionMatrix, modelViewMatrix)
    
    // return matrix as Float32Array
    return mvpMatrix;// as Float32Array
}

// return modelView matrix from given position, rotation, scale
/*
function getModelViewMatrix(
    position = {x:0, y:0, z:0},
    rotation = {x:0, y:0, z:0},
    scale = {x:1, y:1, z:1}
){
*/
function getModelViewMatrix(
    position ,
    rotation,
    scale
){
    // get modelView Matrix
    const modelViewMatrix = glMatrix.mat4.create()
    // translate position
    glMatrix.mat4.translate(modelViewMatrix, modelViewMatrix, glMatrix.vec3.fromValues(position.x, position.y, position.z))
    // rotate
    glMatrix.mat4.rotateX(modelViewMatrix, modelViewMatrix, rotation.x)
    glMatrix.mat4.rotateY(modelViewMatrix, modelViewMatrix, rotation.y)
    glMatrix.mat4.rotateZ(modelViewMatrix, modelViewMatrix, rotation.z)
    // scale
    glMatrix.mat4.scale(modelViewMatrix, modelViewMatrix, glMatrix.vec3.fromValues(scale.x, scale.y, scale.z))
   
    // return matrix as Float32Array
    return modelViewMatrix ;//as Float32Array
}


/*
function getProjectionMatrix(
    aspect: number,
    fov:number = 60 / 180 * Math.PI,
    near:number = 0.1,
    far:number = 100.0,
    position = {x:0, y:0, z:0}
){  
*/
function getProjectionMatrix(
    aspect,
    fov,
    near,
    far,
    position
){ 
    // create cameraview
    const cameraView = glMatrix.mat4.create()
    const eye = glMatrix.vec3.fromValues(position.x, position.y, position.z)
    glMatrix.mat4.translate(cameraView, cameraView, eye)
    glMatrix.mat4.lookAt(cameraView, eye, center, up)
    // get a perspective Matrix
    const projectionMatrix = glMatrix.mat4.create()
    glMatrix.mat4.perspective(projectionMatrix, fov, aspect, near, far)
    glMatrix.mat4.multiply(projectionMatrix, projectionMatrix, cameraView)
    // return matrix as Float32Array
    return projectionMatrix;// as Float32Array
}


//==============================

  function frame() {
  
//=================================
/*   
   const transformationMatrix = getTransformationMatrix();
    device.queue.writeBuffer(
      uniformBuffer,
      0,
      transformationMatrix.buffer,
      transformationMatrix.byteOffset,
      transformationMatrix.byteLength
    );
*/    
       let position = { x: 0, y: 0, z: -5 }
    let scale = { x: 1, y: 1, z: 1 }
  //  let rotation = { x: 0, y: 2, z: 3 }
    
    
    //-----------------
     // let viewMatrix = glMatrix.mat4.create();
   // glMatrix.mat4.translate(viewMatrix, viewMatrix, glMatrix.vec3.fromValues(0, 0, -5));
    let now = Date.now() / 1000;
   // glMatrix.mat4.rotate(viewMatrix, viewMatrix, 1, glMatrix.vec3.fromValues(Math.sin(now), Math.cos(now), 0));
    let rotation={x:Math.sin(now), y:Math.cos(now), z:0};
    //---------------------
    
     const mvpMatrix = getMvpMatrix(aspect, position, rotation, scale)
      
/*      device.queue.writeBuffer(
            pipelineObj.mvpBuffer,
            0,
            mvpMatrix.buffer
        );
        */
           device.queue.writeBuffer(
      uniformBuffer,
      0,
      mvpMatrix.buffer,
      mvpMatrix.byteOffset,
      mvpMatrix.byteLength
    );
        //=============================
    
    //必须在这里设置texture，否则保存
 renderPassDescriptor.colorAttachments[0].view = context
      .getCurrentTexture()
      .createView();

    const commandEncoder = device.createCommandEncoder();
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    passEncoder.setPipeline(pipeline);
    passEncoder.setBindGroup(0, uniformBindGroup);
    passEncoder.setVertexBuffer(0, vertexBuffer);
    passEncoder.draw(36, 1, 0, 0);
    passEncoder.end();
    device.queue.submit([commandEncoder.finish()]);
    requestAnimationFrame(frame);
  };
frame();
    </script>
</body>
 
</html>

zxdva9909asdfa3
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
gl-matrix中lookAt的作用
gaidandan的专栏
11-01 2974
参考链接：这里 WebGL绘图都是眼睛（摄像机）在z轴上，向z轴负方向（即屏幕方向）看去产生的视图： 我们并不能改变这个视线的方向。因此，为了能从别的角度来观察场景，我们只能对场景本身进行操作，例如我们要把眼睛从(0, 0, 0)点移动到(0, 0, 10)点，实质上可以通过，把整个场景向z轴负方向移动10来到达相同的效果。也就是说，我们可以通过对场景进行反向的几何变换来模拟眼睛的移动。但...
css 旋转cube
05-07
在CSS世界中，创建一个旋转的立方体效果是一项有趣且实用的技巧，它涉及到3D空间变换和动画。这个主题通常与HTML5结合使用，以实现动态的网页元素交互。让我们深入探讨如何利用CSS实现一个旋转立方体。 首先，我们...
OpenGL 入门（七）— Camera（摄像机）
qq_40120946的博客
02-04 1481
OpenGL本身没有摄像机(Camera)的概念，但我们可以通过把场景中的所有物体往相反方向移动的方式来模拟出摄像机，产生一种我们在移动的感觉，而不是场景在移动。名词介绍LookAt矩阵： 一种特殊类型的观察矩阵，它创建了一个坐标系，其中所有坐标都根据从一个位置正在观察目标的用户旋转或者平移。欧拉角(Euler Angles)： 被定义为偏航角(Yaw)，俯仰角(Pitch)，和滚转角(Roll)从而允许我们通过这三个值构造任何3D方向。观察空间(View Space)也叫摄像机空间（Camera Spac
y轴 旋转矩形，颜色插值显示
u012290759的博客
01-16 368
Threejs中文网:http://www.webgl3d.cn/
图形学介绍-3D转换
m0_37206001的博客
03-08 1162
学习图形学过程中看到来自Hobart and William Smith Colleges的David J. Eck教授编写的图形学介绍V1.3.0，读起来确实有不少的感悟。 第7.1节 3D 转换 我们已经在第 6 章看到了如何使用 WebGL 绘制图元，以及如何实现 2D 转换。 在 3D 中绘制图元是相同的，只是每个顶点有三个坐标而不是两个。 3D 中的转换也类似于 2D，但对于转换而言，第三个维度带来的复杂性增加是可观的。 本节介绍使用 WebGL 的 3D 图形的几何方面。 在下一节中，我们
基于gl-martix矩阵库和canvas 2d实现3d效果
那个西瓜有点甜
07-11 1392
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
一个旋转cube，没有用lookat
u012290759的博客
03-28 441
/用于传输“model矩阵 乘以 view矩阵 乘以 projection矩阵”的结果矩阵（简称为mvp矩阵），并在每帧被更新。//------------wsgl代码-------------------//-------设置顶点--------------------------//usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)// 配置WebGPU上下文。//顺序：平移--》旋转--》缩放。//引入gl-matrix.js库。//4.开启深度测试。//4.开启深度测试。
一个静态cube，用lookat
u012290759的博客
03-28 753
/用于传输“model矩阵 乘以 view矩阵 乘以 projection矩阵”的结果矩阵（简称为mvp矩阵），并在每帧被更新。//------------wsgl代码-------------------//-------设置顶点--------------------------//usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)// 配置WebGPU上下文。//顺序：平移--》旋转--》缩放。//引入gl-matrix.js库。//4.开启深度测试。//4.开启深度测试。
一个旋转cube,用了lookat，注释了其他的多余方法
u012290759的博客
03-28 729
/用于传输“model矩阵 乘以 view矩阵 乘以 projection矩阵”的结果矩阵（简称为mvp矩阵），并在每帧被更新。//------------wsgl代码-------------------//-------设置顶点--------------------------//usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)-- canvas：用来展示WebGPU渲染的结果 -->//顺序：平移--》旋转--》缩放。//引入gl-matrix.js库。//固定相机，透视投影。
xuanzhuan.rar_cube rotate_三维 旋转
09-20
标题中的"xuanzhuan.rar_cube rotate_三维 旋转"指的是一个关于三维图形旋转的程序或教程，其中“cube rotate”是关键，意味着该内容聚焦于立方体在三维空间中的旋转操作。结合描述，“可以旋转球体与正方体 三维...
注视 LookAt2
08-08
"注视 LookAt2" 是一个关于Unity3D游戏引擎中的一个关键功能的讨论，这个功能允许游戏对象（如摄像机）调整其方向以面对或"注视"另一个特定的游戏对象。在Unity3D中，`LookAt`是一个内置的函数，主要用于调整物体的...
STM32 CubeIDE使用教程.zip
01-23
安装完成后，启动CubeIDE，创建一个新的项目或打开已有项目。 STM32 CubeIDE的核心特性之一是STM32CubeMX配置工具。这个工具允许开发者快速配置微控制器的外设，如GPIO、ADC、定时器、串口等。在STM32CubeMX中，...
四川大学计算机图形学第二三次作业 旋转cube
12-21
在本项目中，我们主要探讨的是“四川大学计算机图形学第二三次作业——旋转cube”，这是一个基于WebGL技术的计算机图形学实践项目，旨在让学生掌握如何用编程方式创建和操纵3D对象，特别是立方体的旋转。这个作业...
HTML5+CSS3-HTML5入门
2302_77230857的博客
08-06 817
,<meta>,<link>,<style>等，都属于头部标签可容纳的子标签。该标签必须在<head>之中，，一个HTML文档只能包含一个<title>标签，<title>开始标签和
HTML5+JavaScript绘制彩虹和云朵
cnds123的专栏
08-10 405
HTML5+JavaScript绘制彩虹和云朵，改进版云彩能动——从左向右不停地移动
软件设计之HTML5
thm19990903的博客
08-04 1966
HTML：Hyper Text Markup Language 超文本标记语言。
1111111111111111111111
最新发布
08-13
1111111111111111
javascript笔试题参考整理(答案)(可编辑修改word版).docx
08-13
javascript笔试题参考整理(答案)(可编辑修改word版)
用java写一个3D的旋转鸡块
05-18
以下是一个简单的示例代码，可以实现一个旋转的魔方模型： ```java import javax.media.j3d.*; import javax.vecmath.*; public class RubiksCube extends Shape3D { private static final int NUM_FACES = 6; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值