一个旋转cube,用了lookat，注释了其他的多余方法

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

<!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)

    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() {

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

      /*   旧的方法，也是可以的，计算投影的时候，没用lookat

         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
关注
  • 19
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
xuanzhuan.rar_cube rotate_三维 旋转
09-20
标题中的"xuanzhuan.rar_cube rotate_三维 旋转"指的是一个关于三维图形旋转的程序或教程，其中“cube rotate”是关键，意味着该内容聚焦于立方体在三维空间中的旋转操作。结合描述，“可以旋转球体与正方体 三维...
Cube-IQ-使用方法_图文说明_使用步骤.docx
05-05
若容器数量不确定，可输入一个较大的值，优化后，系统会自动更新“已用”字段（used）显示实际使用的容器数量。 接着是“添加包装箱”步骤，同样输入装载顺序 seq 和数量 qty。优化后，“已装载”字段（loaded）会...
css 旋转cube
05-07
在CSS世界中，创建一个旋转的立方体效果是一项有趣且实用的技巧，它涉及到3D空间变换和动画。这个主题通常与HTML5结合使用，以实现动态的网页元素交互。让我们深入探讨如何利用CSS实现一个旋转立方体。 首先，我们...
STM32CUBEIDE ADC在DMA模式下扫描多个通道
03-02
"STM32CUBEIDE10_ADC_DMA"可能包含了一个示例项目，展示了如何配置ADC和DMA以扫描多个通道。这个项目中，readme.txt文件会提供有关如何编译和运行代码的指导，以及可能的注意事项和功能解释。 7. **调试与优化** ...
这是一个，用vc++写的，旋转的立体图行.zip
01-30
标题中的“这是一个，用vc++写的，旋转的立体图行.zip”表明这是一个使用Microsoft Visual C++（简称VC++）开发的项目，项目的核心功能是显示一个可以旋转的三维立体图形。在VC++环境中，开发者通常使用MFC...
HTML5新增的input元素属性：placeholder、required、autofocus、min、max等
pan_junbiao的博客
07-08 550
HTML5 大幅度地增加与改良了 input 元素的属性，可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。 placeholder 属性：当用户没有输入值时，输入型控件可以通过placeholder 属性向用户显示描述说明或者提示信息。使用placeholder 属性只需要将说明性文字作为该属性的值即可。除了普通的文本输入框，email、number、url 等其他类型的输入框也都支持placeholder 属性。
html5——表单
jiuyuexixi的博客
07-10 1136
html5——表单
html5——CSS基础选择器
jiuyuexixi的博客
07-11 396
html5——CSS基础选择器
常见算法介绍和算法刷题（含解析与代码）.txt
07-15
常见算法介绍和算法刷题（含解析与代码） 算法介绍 算法是一种解决问题的方法，通过使用算法，我们可以将问题转换为计算机可以执行的指令。常见的算法包括排序算法、搜索算法、图算法、动态规划算法等。 排序算法 1. 冒泡排序（Bubble Sort） 冒泡排序是一种简单的排序算法，它通过重复地走访要排序的数据，来找出其中最小的数据，并把它移到最前面。 示例代码： def bubble_sort(arr): n = len(arr) for i in range(n-1): for j in range(0, n-i-1): if arr[j] > arr[j+1]: arr[j], arr[j+1] = arr[j+1], arr[j] return arr 2. 快速排序（Quick Sort） 快速排序是一种常用的排序算法，它通过选择一个 pivot 元素作为枢纽，并将其他元素分配到枢纽的两侧。 示例代码： def quick_sort(arr): if len(a
oracle常用函数及语法
07-15
多年积累Oracle常见的优化措施及自定义函数库
SQLServr优化.docx
07-15
数据库
7.15练习（linux网络运维，云计算）
最新发布
07-15
练习
MyCat安装详细安装的文档
07-15
MyCat安装详细安装的文档
SQL中的主键和外键.doc
07-15
数据库
Maven的安装与配置.pdf
07-15
maven安装与配置
爬虫是一种自动化的技术，用于从互联网上获取数据 爬虫可以用来爬取网页内容、获取搜索引擎结果、分析网站结构等
07-15
爬虫开发入门案例教程 爬虫是一种自动化的技术，用于从互联网上获取数据。爬虫可以用来爬取网页内容、获取搜索引擎结果、分析网站结构等。爬虫的开发需要考虑到网站的 Terms of Service、避免被阻止、处理数据等问题。 在本教程中，我们将使用 Python 语言和 Scrapy 框架，开发一个简单的爬虫案例，帮助读者快速入门爬虫开发。 Hardware ###Hardware列表 计算机 Python 语言 Scrapy 框架 爬虫软件（例如 Scrapyshell） ###硬件连接 无需硬件连接，爬虫开发主要是软件开发。 Software ###软件列表 Python 语言 Scrapy 框架 Scrapyshell 爬虫软件 ###软件编写 在 Scrapyshell 爬虫软件中，新建一个项目，选择 "Scrapy" 作为框架。在 "Project" 窗口中，添加以下代码： import scrapy class MySpider(scrapy.Spider): name = "my_spider" start_urls = [
2024-CT产品售前专家-GB10-124.pdf
07-15
GB10-124
联轴器，欧洲市场研究报告2024-2030.docx
07-15
联轴器，欧洲市场研究报告2024-2030.docx
拟合曲线以及均值+方差
07-15
实现对CSV文件（第一列为横坐标，第二列为样本点，第一行为两列的标题）拟合曲线以及均值+方差。
unity中在指定位置用代码生产 一个cube并改变其材质
04-02
在上面的示例中，我们首先在`Start()`方法中使用`GameObject.CreatePrimitive()`方法在`(0, 0, 0)`位置生成一个Cube。然后我们获取Cube的`Renderer`组件并更改其材质为我们指定的新材质。您可以将`newMaterial`字段...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值