一个旋转cube，没有用lookat

最新推荐文章于 2024-07-11 16:52:21 发布
最新推荐文章于 2024-07-11 16:52:21 发布
阅读量436 收藏 19
点赞数 25
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012290759/article/details/137122951
版权
本文介绍了如何在现代浏览器中利用WebGPUAPI创建一个3D立方体渲染示例，包括设置uniformbuffer对象（ubo）、顶点数据、WebGLshaders以及GPU矩阵变换，展示了如何进行渲染管线配置和图形效果控制。
摘要由CSDN通过智能技术生成

<!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;
  }
  //------------------


  function frame() {
    const transformationMatrix = getTransformationMatrix();
    device.queue.writeBuffer(
      uniformBuffer,
      0,
      transformationMatrix.buffer,
      transformationMatrix.byteOffset,
      transformationMatrix.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
关注
  • 25
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
xuanzhuan.rar_cube rotate_三维 旋转
09-20
标题中的"xuanzhuan.rar_cube rotate_三维 旋转"指的是一个关于三维图形旋转的程序或教程，其中“cube rotate”是关键，意味着该内容聚焦于立方体在三维空间中的旋转操作。结合描述，“可以旋转球体与正方体 三维...
css 旋转cube
05-07
在CSS世界中，创建一个旋转的立方体效果是一项有趣且实用的技巧，它涉及到3D空间变换和动画。这个主题通常与HTML5结合使用，以实现动态的网页元素交互。让我们深入探讨如何利用CSS实现一个旋转立方体。 首先，我们...
一个做好UVW贴图的1立方米的cube正方体
10-03
一个做好UVW贴图的1立方米的cube正方体，导入unity3d可以正常贴图
STM32CubeIDE使用指南 英文版
06-13
STM32CubeIDE 使用指南 STM32CubeIDE 是一个全面的多操作系统开发工具，属于 STM32Cube 软件生态系统的一部分。...STM32CubeIDE 是一个功能强大且易于使用的开发工具，能够帮助用户快速开发基于 STM32 的产品。
STM32 CubeIDE使用教程.zip
01-23
安装完成后，启动CubeIDE，创建一个新的项目或打开已有项目。 STM32 CubeIDE的核心特性之一是STM32CubeMX配置工具。这个工具允许开发者快速配置微控制器的外设，如GPIO、ADC、定时器、串口等。在STM32CubeMX中，...
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文件（第一列为横坐标，第二列为样本点，第一行为两列的标题）拟合曲线以及均值+方差。
用java写一个3D的旋转鸡块
05-18
这是一个比较复杂的问题，需要使用Java的3D图形库来实现。以下是一个简单的示例代码，可以实现一个旋转的魔方模型： ```java import javax.media.j3d.*; import javax.vecmath.*; public class RubiksCube extends Shape3D { private static final int NUM_FACES = 6; private static final int NUM_CUBES_PER_SIDE = 3; private static final float CUBE_SIZE = 0.5f; private static final float FACE_SIZE = CUBE_SIZE * NUM_CUBES_PER_SIDE; private Transform3D rotationTransform; public RubiksCube() { // 创建一个立方体数组，表示魔方的所有小立方体 Box[][][] cubes = new Box[NUM_CUBES_PER_SIDE][NUM_CUBES_PER_SIDE][NUM_CUBES_PER_SIDE]; // 创建每个小立方体并将其添加到数组中 for (int i = 0; i < NUM_CUBES_PER_SIDE; i++) { for (int j = 0; j < NUM_CUBES_PER_SIDE; j++) { for (int k = 0; k < NUM_CUBES_PER_SIDE; k++) { Vector3f translation = new Vector3f( (i - 1) * CUBE_SIZE, (j - 1) * CUBE_SIZE, (k - 1) * CUBE_SIZE); cubes[i][j][k] = new Box(CUBE_SIZE, CUBE_SIZE, CUBE_SIZE, createAppearance()); Transform3D translationTransform = new Transform3D(); translationTransform.setTranslation(translation); TransformGroup cubeTransformGroup = new TransformGroup(); cubeTransformGroup.setTransform(translationTransform); cubeTransformGroup.addChild(cubes[i][j][k]); addChild(cubeTransformGroup); } } } // 创建旋转变换 rotationTransform = new Transform3D(); rotationTransform.rotY(Math.PI / 4.0); } // 创建外观 private Appearance createAppearance() { Appearance appearance = new Appearance(); // 设置材质属性 Material material = new Material(); material.setDiffuseColor(1.0f, 1.0f, 1.0f); material.setShininess(64.0f); appearance.setMaterial(material); return appearance; } // 旋转魔方 public void rotate() { Transform3D currentTransform = new Transform3D(); getTransform(currentTransform); currentTransform.mul(rotationTransform); setTransform(currentTransform); } } ``` 这个代码创建了一个 `RubiksCube` 类，它继承自 `Shape3D`。它包含了一个立方体数组，每个小立方体都是一个 `Box` 实例，它们被组合成一个完整的魔方模型。 在构造函数中，我们创建了每个小立方体，并将它们添加到立方体数组中。然后我们将每个小立方体包装在一个 `TransformGroup` 中，这样我们可以对整个魔方模型进行变换。 最后，我们创建了一个旋转变换 `rotationTransform`，并在 `rotate()` 方法中应用它，以旋转整个魔方模型。你可以在你的程序中使用这个类来创建一个3D的旋转鸡块。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值