WebGPU图形编程（5）：构建一个线框球体<学习引自徐博士教程>

一、前提

在代码开始之前，你需要自行准备配置环境文件或者你可以去GitHub下载简单配置好的文件：https://github.com/zhiwenhao-0807/webgpu.git

如果你对刚开始如何配置环境疑惑，可以去跟着第一篇博客去学习：https://www.cnblogs.com/wenhao0807/p/15806359.html

1.1认知

本节要实现一个球体线框三维实体，就需要对球坐标系有一个初步的认知，如果你有图形基础，可以看出图中采用的是右手坐标系；

创建球体线框，可以使用UV球体方法来创建，u代表经度（纵向）v代表纬度（横向），u和v在球体表面形成了网格，因为我们是创建线框，所以先要创建一个单位网格，一个单位网格由四条线段组成，但你只需要绘制两条实线段就可以了，你可以想象一下，遍历图中两条实线段，按照球体排列平铺就可以形成线框球体，如果你把四条都绘制出来，当然也可以生成线框球体，但会有重叠部分，并且多余绘制会浪费资源消耗；

好的，前提的一些基础概念说完了，接下来开始编程部分！

 二、编程部分

在编程开始之前，我想要简单一一说明下src下各工程文件的含义，相比之前对比，本节多了wireframe.ts和math-func.ts两个文件，并且代码结构有了相应的变化

helper.ts:和之前代码一致，没有改变，主要用途是封装一些基本调用GPU的方法，gl-matrix转换方法，供调用，它是通用的；

main.ts:主要代码文件，主要实现三维的功能渲染，本节main代码中，你可以看到代码量其实非常少，三维对象创建和矩阵转换被封装为wireframe和math-func两个文件

math-func.ts:用来做球体点位的矩阵转换；

shader.ts:着色器代码，<但着色器代码是文本类形式，没有提示代码块的功能，所以我们之前都把着色器代码转移到pipeline描述>

vertex_data.ts:描述封装单元格线段函数，在main调用；

wireframe.ts:三维对象创建，主要描述buffer、pipeline、bindgroup、renderpass,<这个文件包含了大量着色器和渲染代码>

大致流程，你可以理解为：矩阵转换球体顶点数据(math-func)—>绘制单元格线段、并遍历球体顶点数据(vertex_data)—>缓冲区描述及着色器设计和渲染(wireframe)—>调用封装好的顶点数据和着色器渲染动画(main)

 

 2.1.创建math-func.ts<矩阵转换为球体顶点数据>

import { vec3 } from "gl-matrix";

export const SpherePosition = (radius:number,theta:number,phi:number,center:vec3 = [0,0,0]) =>{
    const snt = Math.sin(theta*Math.PI/180);
    const cnt = Math.cos(theta*Math.PI/180);
    const snp = Math.sin(phi*Math.PI/180);
    const cnp = Math.cos(phi*Math.PI/180);
    return vec3.fromValues(radius*snt*cnp+center[0],radius*cnt+center[1],-radius*snt*snp+center[2]);
}

 2.2.创建vertex_data.ts<绘制单元块线段，并按照球体顶点数据遍历线段>

import { SpherePosition } from "./math-func";
import { vec3 } from "gl-matrix";

export const SphereWireframeData = (radius:number,u:number,v:number,center:vec3 =[0,0,1]) =>{
    if(u<2 || v<2)return;
    let pts =[];
    let pt:vec3;
    for(let i=0;i<u;i++){
        let pt1:vec3[]=[];
        for(let j=0;j<v;j++){
            pt =SpherePosition(radius,i*180/(u-1),j*360/(v-1),center);
            pt1.push(pt);
        }
        pts.push(pt1);
    }
   

    let p = [] as any;
let p0,p1,p2,p3;
for(let i=0;i<u-1;i++){
    for(let j=0;j<v-1;j++){
        p0=pts[i][j];
        p1=pts[i+1][j];
        p3=pts[i][j+1];
        p.push([
            p0[0],p0[1],p0[2],p1[0],p1[1],p1[2],
            p0[0],p0[1],p0[2],p3[0],p3[1],p3[2]
        ]);
    }
   
}
return new Float32Array(p.flat());
}

2.3.创建wifeframe.ts<缓冲区创建和着色器描述>

如果你按照前面的教程一步一步学习过来的，你去看代码结构并不会懵，如果你看不懂没关系，我的建议是慢慢来，先把代码copy，完成实现；之后你再详细去看webgpu的API。

我简单说一下这个代码的流程，import(调用其他已经实现的类/方法)—>CreateWireframe(定义一个异步函数)—>shader\pipeline(进行着色器和管线函数声明创建)—>uniform data(虽然叫统一数据，但这个代码块里包含模型和透视矩阵的设计)—>rotation\camera(声明对象旋转和相机)—>uniform buffer and layout(创建buffer并且进行资源绑定)—>draw(渲染管线、绘制顶点数据)

//这是一个通用文件，可以为不同的三维对象创建线框，例如：球体、圆柱体、圆环
import { InitGPU,CreateGPUBuffer,CreateGPUBufferUint,CreateTransforms,CreateViewProjection,CreateAnimation } from "./helper";
import { Shaders } from "./shaders";
import { vec3,mat4 } from "gl-matrix";
const createCamera=require('3d-view-controls');

export const CreateWireframe =async (wireframeData:Float32Array,isAnimation=true)=> {  //wireframeData是一个输入变量，来自mian第7行

    const gpu =await InitGPU();
    const device =gpu.device;
//create vertex buffers
const numberOfVertices=wireframeData.length/3;
const vertexBuffer = CreateGPUBuffer(device,wireframeData);

const shader =Shaders();  //引用Shaders文件，在当前文件描述着色器代码
const pipeline = device.createRenderPipeline({ //创建控制顶点和片段着色器阶段管线代码块
    vertex:{
        module:device.createShaderModule({
            code:shader.vertex
        }),
        entryPoint:"main",
        buffers:[{
            arrayStride:12,
            attributes:[{
                shaderLocation:0,
                format:"float32x3",
                offset:0
        }]
    }]  
},
        fragment:{
            module:device.createShaderModule({
                code:shader.fragment
            }),
            entryPoint:"main",
            targets:[
                {
                    format:gpu.format as GPUTextureFormat
                }
            ]
        },
        primitive:{
            topology:"line-list",
        }
});    
        
//create uniform data
const modelMatrix = mat4.create();
const mvpMatrix = mat4.create();
let vMatrix = mat4.create();
let vpMatrix = mat4.create();
const vp =CreateViewProjection(gpu.canvas.width/gpu.canvas.height);
vpMatrix=vp.viewProjectionMatrix;

//add rotation and camera
let rotation =vec3.fromValues(0,0,0);
var camera = createCamera(gpu.canvas,vp.cameraOption);

//create uniform buffer and layout
const uniformBuffer = device.createBuffer({
    size:64,
    usage:GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});

const uniformBindGroup =device.createBindGroup({
    layout:pipeline.getBindGroupLayout(0),
    entries:[{
        binding:0,
        resource:{
            buffer:uniformBuffer,
            offset:0,
            size:64
        }
    }]
});

let textureView = gpu.context.getCurrentTexture().createView();
const renderPassDescription = {
    colorAttachments:[{
        view:textureView,
        loadValue:{r:0.2,g:0.247,b:0.314,a:1.0}, //backgroud color
        storeOp:'store'
    }]
};

function draw(){
    if(!isAnimation){
        if(camera.tick()){
            const pMatrix = vp.projectionMatrix;
            vMatrix = camera.matrix;
            mat4.multiply(vpMatrix,pMatrix,vMatrix);
        }
    }
    CreateTransforms(modelMatrix,[0,0,0],rotation);
    mat4.multiply(mvpMatrix,vpMatrix,modelMatrix);
    device.queue.writeBuffer(uniformBuffer,0,mvpMatrix as ArrayBuffer);

    textureView = gpu.context.getCurrentTexture().createView();
    renderPassDescription.colorAttachments[0].view = textureView;
    const commandEncoder = device.createCommandEncoder();
    const renderPass = commandEncoder.beginRenderPass(renderPassDescription as GPURenderPassDescriptor)
    
    renderPass.setPipeline(pipeline);    //渲染管线
    renderPass.setVertexBuffer(0,vertexBuffer);  //渲染顶点缓冲区
    renderPass.setBindGroup(0,uniformBindGroup); //渲染资源绑定组
    renderPass.draw(numberOfVertices);  //渲染顶点
    renderPass.endPass();  //结束渲染通道编码器

    device.queue.submit([commandEncoder.finish()]);
}
CreateAnimation(draw,rotation,isAnimation);
}

 2.4.main.ts文件<这是src最后一步，调用前面所有的函数方法实现>

import { CreateWireframe } from './wireframe';
import { SphereWireframeData } from './vertex_data';
import { vec3 } from 'gl-matrix';
import $ from 'jquery';

const Create3DObject = async (radius:number, u:number, v:number, center:vec3, isAnimation:boolean) => {
    const wireframeData = SphereWireframeData(radius, u, v, center) as Float32Array;
    await CreateWireframe(wireframeData, isAnimation);
}

let radius = 2;  //半径
let u = 20;   //u横向等分
let v = 15;   //v纵向等分
let center:vec3 = [0,0,0];  //中心位置
let isAnimation = true;   //球体自动旋转

Create3DObject(radius, u, v, center, isAnimation);

$('#id-radio input:radio').on('click', function(){
    let val = $('input[name="options"]:checked').val();
    if(val === 'animation') isAnimation = true;
    else isAnimation = false;
    Create3DObject(radius, u, v, center, isAnimation);
});

$('#btn-redraw').on('click', function(){
    const val = $('#id-center').val();
    center = val?.toString().split(',').map(Number) as vec3;
    radius = parseFloat($('#id-radius').val()?.toString() as string);
    u = parseInt($('#id-u').val()?.toString() as string);
    v = parseInt($('#id-v').val()?.toString() as string);
    Create3DObject(radius, u, v, center, isAnimation);  
});

2.5.index.html<最后就写你的网页布局和调用打包的bundle.js>

<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>WebGPU Step-by-Step 13</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
   <style>
      .grid {
      display: grid;
      height: 100%;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 100%;
   }
   .grid1 {
      display: grid;
      height: 35px;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 35px;
   }
   .item1 {
      grid-column: 1/3;
   }
   .item2 {
      grid-column: 3/9;
   }
   .item3 {
      grid-column: 1/3;
   }
   .item4 {
      grid-column: 3/8;
   }
   
   </style>
   <div style="margin-left:20px;">  
      <h1>Sphere Wireframe</h1><br>

      <div class="grid">
         <div class="item1">
            <h2>Motion Control</h2>
            <div id="id-radio">
               <label><input type="radio" name="options" value="animation" checked>Animation</label>
               <label style="margin-left:30px;"><input type="radio" name="options" value="camera">Camera Control</label>   
            </div>
            <br>
            <h2>Set Parameters</h2>  
            <div class="grid1">
               <div class="item3">center</div>
               <div class="item4">
                  <input id="id-center" type="text" value="0, 0, 0" />
               </div>
            </div>
            <div class="grid1">
               <div class="item3">radius</div>
               <div class="item4">
                  <input id="id-radius" type="text" value="2" />
               </div>
            </div>
            <div class="grid1">
               <div class="item3">u</div>
               <div class="item4">
                  <input id="id-u" type="text" value="20" />
               </div>
            </div>
            <div class="grid1">
               <div class="item3">v</div>
               <div class="item4">
                  <input id="id-v" type="text" value="15" />
               </div>
            </div>
            <br><button type="button" id="btn-redraw"><b>Redraw</b></button>
         </div>
         <div class="item2">
            <canvas id="canvas-webgpu" width="640" height="480"></canvas>
         </div>
      </div>
   </div>

   <script src="main.bundle.js"></script>
</body>
</html>

三、 至此你的所有代码完毕，最后展示出来应该是下图