- 博客(20)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 一个旋转cube,用了lookat，注释了其他的多余方法
/用于传输“model矩阵 乘以 view矩阵 乘以 projection矩阵”的结果矩阵（简称为mvp矩阵），并在每帧被更新。//------------wsgl代码-------------------//-------设置顶点--------------------------//usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)-- canvas：用来展示WebGPU渲染的结果 -->//顺序：平移--》旋转--》缩放。//引入gl-matrix.js库。//固定相机，透视投影。
2024-03-28 20:25:58
723
原创 一个旋转cube，用了lookat
/用于传输“model矩阵 乘以 view矩阵 乘以 projection矩阵”的结果矩阵（简称为mvp矩阵），并在每帧被更新。//------------wsgl代码-------------------//-------设置顶点--------------------------//usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)// 配置WebGPU上下文。//顺序：平移--》旋转--》缩放。//引入gl-matrix.js库。//4.开启深度测试。//4.开启深度测试。
2024-03-28 20:16:26
675
原创 一个静态cube，用lookat
/用于传输“model矩阵 乘以 view矩阵 乘以 projection矩阵”的结果矩阵（简称为mvp矩阵），并在每帧被更新。//------------wsgl代码-------------------//-------设置顶点--------------------------//usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)// 配置WebGPU上下文。//顺序：平移--》旋转--》缩放。//引入gl-matrix.js库。//4.开启深度测试。//4.开启深度测试。
2024-03-28 20:10:35
747
原创 一个旋转cube，没有用lookat
/用于传输“model矩阵 乘以 view矩阵 乘以 projection矩阵”的结果矩阵（简称为mvp矩阵），并在每帧被更新。//------------wsgl代码-------------------//-------设置顶点--------------------------//usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)// 配置WebGPU上下文。//顺序：平移--》旋转--》缩放。//引入gl-matrix.js库。//4.开启深度测试。//4.开启深度测试。
2024-03-28 20:09:21
433
原创 2d,正交投影，mat3.project 的使用
4, 5, 6, 6, 5, 7, // 顶部运行。8, 9, 10, 10, 9, 11, // 中间运行。0, 1, 2, 2, 1, 3, // 左栏。canvas.clientWidth, // 正确的。0, // 左边。0, // 顶部。400, // 靠近。-400, // 远的。//固定相机，正交投影。
2024-02-27 21:02:33
588
原创 3d，正交投影，所有面都一种颜色
6, 7, 18, 18, 7, 19, // 顶部梯级底部。10, 11, 22, 22, 11, 23, // 中间梯级底部。0, 1, 2, 2, 1, 3, // 左栏。0, 5, 12, 12, 5, 17, // 顶部。10, 3, 22, 22, 3, 15, // 右干。2, 3, 14, 14, 3, 15, // 底部。0, 2, 12, 12, 2, 14, // 左边。0, // 左边。
2024-02-27 21:01:35
758
原创 3d 深度贴图，背面剔除，各个面有独立颜色
{shaderLocation: 1, offset: 12, format: 'unorm8x4'}, // 顏色。canvas.clientWidth, // 正确的。0, // 左边。canvas.clientHeight, // 底部。0, // 顶部。400, // 靠近。-400, // 远的。// view: <- 渲染時填寫。//固定相机，正交投影。
2024-02-27 21:00:25
643
原创 mipmap 多级渐远
此时敌人在屏幕显示为20*20，400*400的纹理像素映射在20*20的像素内，一颗像素需要映射20*20的纹理像素，如果直接进行纹理过滤，那么在使用线性过滤的情况下，只会使用纹理坐标映射点的周围4颗纹理像素进行计算，那么其他的396颗纹理像素就没了参考价值，考虑极端情况下，如果纹理坐标映射点在人的头发，那么不就只是显示黑色了？多级渐远纹理背后的理念很简单：距观察者的距离超过一定的阈值，OpenGL会使用不同的多级渐远纹理，即最适合物体的距离的那个。同时，多级渐远纹理另一加分之处是它的性能非常好。
2024-02-10 20:14:57
1280
原创 2个旋转cube的例子
/用于传输“model矩阵 乘以 view矩阵 乘以 projection矩阵”的结果矩阵（简称为mvp矩阵），并在每帧被更新。//------------wsgl代码-------------------//-------设置顶点--------------------------//1,增加一个uniform buffer object（简称为ubo），//draw两次，分别设置对应的uniformBindGroup。//因为是固定相机，所以只需要计算一次projection矩阵。
2024-02-03 18:38:24
471
原创 利用uniform传递数据
arrayStride: 3 * 4,//一个顶点数据占用的字节长度，该缓冲区一个顶点包含xyz三个分量，每个数字是4字节浮点数，3*4字节长度。clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色。//@group(0)的参数0对应webgpu代码.getBindGroupLayout(0)参数0。
2024-01-16 21:20:20
393
原创 利用glmartix 4x4 矩阵
arrayStride: 3 * 4,//一个顶点数据占用的字节长度，该缓冲区一个顶点包含xyz三个分量，每个数字是4字节浮点数，3*4字节长度。//获取浏览器默认的颜色格式。clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色。size: vertexArray.byteLength,//顶点数据的字节长度。//usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)
2024-01-16 21:19:14
369
原创 画一个正方形
arrayStride: 3 * 4,//一个顶点数据占用的字节长度，该缓冲区一个顶点包含xyz三个分量，每个数字是4字节浮点数，3*4字节长度。clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色。// 该渲染通道renderPass输出的像素数据会存储到Canvas画布对应的颜色缓冲区(纹理视图对象)//usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)// 命令编码器.finish()创建命令缓冲区(生成GPU指令存入缓冲区)
2024-01-16 21:15:17
323
原创 利用2个Location
offset: 2*4//arrayStride表示每组顶点数据间隔字节数，offset表示读取改组的偏差字节数，没特殊需要一般设置0。offset: 0//arrayStride表示每组顶点数据间隔字节数，offset表示读取改组的偏差字节数，没特殊需要一般设置0。clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色。//usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)storeOp: 'store',//像素数据写入颜色缓冲区。
2024-01-16 21:11:49
336
原创 webgpu day1
arrayStride: 3 * 4,//一个顶点数据占用的字节长度，该缓冲区一个顶点包含xyz三个分量，每个数字是4字节浮点数，3*4字节长度。clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, //背景颜色。// 该渲染通道renderPass输出的像素数据会存储到Canvas画布对应的颜色缓冲区(纹理视图对象)//usage设置该缓冲区的用途(作为顶点缓冲区|可以写入顶点数据)// 命令编码器.finish()创建命令缓冲区(生成GPU指令存入缓冲区)
2024-01-16 21:08:42
288
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人