一、首先修改你的index.html文件

请注意主要在html页面修改添加的是需要加选择项："triangle-list"和"triangle-strip",如果你不理解这两个关键词，移步查看webgpu文档：https://www.orillusion.com/zh/webgpu.html#primitive-state 的第10.3.2节Primitive state查看原始状态可以创建哪些图元。

 1 <!DOCTYPE html>

 2 <head>

 3    <meta charset="utf-8">

 4    <meta http-equiv="X-UA-Compatible" content="IE=edge">

 5    <title>WebGPU Step-by-Step 6</title>

 6    <meta name="description" content="">

 7    <meta name="viewport" content="width=device-width, initial-scale=1">

 8 </head>

 9

10 <body>

11     <div>

12        <h1> Create Triangle Primitives</h1><br> <!--主标题-->

13        <label><b>Select a primitive type:</Select></b></label>

14        <select id = "id-primitive">

15           <option value="triangle-list"> triangle-list</option>

16           <option value="triangle-strip"> triangle-strip</option>

17

18        </select>

19        <br><br>

20        <canvas id="canvas-webgpu" width="640" height="480"></canvas><!--使用canvas画布来绘制webgpu图形-->

21     </div>

22    <script src="main.bundle.js"></script><!--脚本调用打包的bundle.js-->

23 </body>

24 </html>

二、接下来修改添加shaders文件代码

主要就是修改vertex和fragment添加为9个顶点和9个颜色，满足triangle顶点要求。

 1 export const Shaders = () => {

 2     const vertex = `

 3     struct Output {

 4         [[builtin(position)]] Position : vec4<f32>;

 5         [[location(0)]] vColor : vec4<f32>;

 6     };

 7

 8     [[stage(vertex)]]

 9     fn main([[builtin(vertex_index)]] VertexIndex: u32) -> Output {

10         var pos : array<vec2<f32>, 9> = array<vec2<f32>, 9>(

11             vec2<f32>(-0.63,  0.80),

12             vec2<f32>(-0.65,  0.20),

13             vec2<f32>(-0.20,  0.60),

14             vec2<f32>(-0.37, -0.07),

15             vec2<f32>( 0.05,  0.18),

16             vec2<f32>(-0.13, -0.40),

17             vec2<f32>( 0.30, -0.13),

18             vec2<f32>( 0.13, -0.64),

19             vec2<f32>( 0.70, -0.30)

20         );

21

22         var color : array<vec3<f32>, 9> = array<vec3<f32>, 9>(

23             vec3<f32>(1.0, 0.0, 0.0),

24             vec3<f32>(0.0, 1.0, 0.0),

25             vec3<f32>(0.0, 0.0, 1.0),

26             vec3<f32>(1.0, 0.0, 0.0),

27             vec3<f32>(0.0, 1.0, 0.0),

28             vec3<f32>(0.0, 0.0, 1.0),

29             vec3<f32>(1.0, 0.0, 0.0),

30             vec3<f32>(0.0, 1.0, 0.0),

31             vec3<f32>(0.0, 0.0, 1.0),

32         );

33

34         var output: Output;

35         output.Position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);

36         output.vColor = vec4<f32>(color[VertexIndex], 1.0);

37         return output;

38     }`

39

40     const fragment = `

41         [[stage(fragment)]]

42         fn main([[location(0)]] vColor: vec4<f32>) -> [[location(0)]] vec4<f32> {

43             return vColor;

44         }

45     `;

46     return {vertex, fragment};

47 }

三、修改添加main.ts文件

主要是你的primitiveType需要对应"triangle-list"（每三个顶点创建一个三角形）和"triangle-strip"（先创建一个三角形，之后每添加一个顶点就会添加一个三角形）

import $ from 'jquery';

import { CheckWebGPU } from './helper';

import { Shaders } from './sharder';

const CreatePrimitive = async (primitiveType = 'triangle-list') => {

    const checkgpu = CheckWebGPU();

    if(checkgpu.includes('Your current browser does not support WebGPU!')){

        console.log(checkgpu);

        throw('Your current browser does not support WebGPU!');

    }

    let indexFormat = undefined;

    if(primitiveType === 'triangle-strip'){

        indexFormat = 'uint32'

    }

    const canvas = document.getElementById('canvas-webgpu') as HTMLCanvasElement;

    const adapter = await navigator.gpu.requestAdapter() as GPUAdapter;  //创建一个adapter(适配器)去调用适配器

    const device = await adapter.requestDevice() as GPUDevice;  //实例化对象，设备可以创建缓存、纹理、渲染管线、着色器模块

    const context = canvas.getContext('webgpu') as unknown as GPUCanvasContext;

    const format = 'bgra8unorm';

    /*const swapChain = context.configureSwapChain({

        device: device,

        format: format,

    });*/

    context.configure({     //

        device: device,

        format: format,

    });

    const shader = Shaders();

    const pipeline = device.createRenderPipeline({

        vertex: {

            module: device.createShaderModule({

                code: shader.vertex    //调用顶点着色器代码

            }),

            entryPoint: "main"   //入口函数

        },

        fragment: {

            module: device.createShaderModule({

                code: shader.fragment   //调用片元着色器代码

            }),

            entryPoint: "main",   //入口函数

            targets: [{

                format: format as GPUTextureFormat     //即上文的最终渲染色彩格式

            }]

        },

        primitive:{    //绘制模式

           topology: primitiveType as GPUPrimitiveTopology,

           stripIndexFormat: indexFormat as GPUIndexFormat  //按照三角形绘制

        }

    });

    const commandEncoder = device.createCommandEncoder();   //创建指令编码器CommandEncoder

    const textureView = context.getCurrentTexture().createView();

    const renderPass = commandEncoder.beginRenderPass({  //创建渲染通道，让指令开启渲染管道

        colorAttachments: [{

            view: textureView,

            loadValue: { r: 0.5, g: 0.5, b: 0.8, a: 1.0 }, //background color

            storeOp: 'store'

        }]

    });

    renderPass.setPipeline(pipeline);  //进行通道和管线的连接

    renderPass.draw(9, 1, 0, 0);

    renderPass.endPass();

    device.queue.submit([commandEncoder.finish()]);  //结束指令编码

}

CreatePrimitive();

$('#id-primitive').on('change', ()=>{

    const primitiveType = $('#id-primitive').val() as string;

    CreatePrimitive(primitiveType);

});

四、打包文件

npm run prod

五、完成工作，启用浏览器查看

其实步骤简单，重要的是理解main文件和shaders着色器。

WebGPU图形编程（3）：构建三角形图元<学习引自徐博士教程>的更多相关文章

  1. WebGPU图形编程（2）：构建一个单色的三角形<学习引自徐博士教程>

    非常兴奋,我坚持了下来,开始更新我的第二篇博客,还是关于WebGPU的,我在学习过程中,对这项技术非常感兴趣,即使它非常抽象,难以理解,因为我看到未来Web3D的发展,WebGPU会成为主流技术,学习 ...

  2. WebGPU图形编程（1）：建立开发环境 <学习引自徐博士教程>

    首先感谢徐博士提供的视频教程,我的博客记录也是学习徐博士进行的自我总结,老徐B站学习视频链接网址:WebGPU图形编程 - 免费视频教程(1):建立开发环境_哔哩哔哩_bilibili 创建之前你需要 ...

  3. WebGPU图形编程（4）：构建一个彩色的正方形<学习引自徐博士教程>

    本节我们来复原一个彩色的正方形,前提告知,本节的shaders和main的代码从结构上有调整,我会更加详细的描述每行的代码意思: 源代码下载地址:https://github.com/jack1232 ...

  4. 现代3D图形编程学习-设置三角形颜色(译)

    本书系列 现代3D图形变成学习 http://www.cnblogs.com/grass-and-moon/category/920962.html 设置颜色 这一章会对上一章中绘制的三角形进行颜色的 ...

  5. 现代3D图形编程学习-基础简介(3)-什么是opengl (译)

    本书系列 现代3D图形编程学习 OpenGL是什么 在我们编写openGL程序之前,我们首先需要知道什么是OpenGL. 将OpenGL作为一个API OpenGL 通常被认为是应用程序接口(API) ...

  6. 现代3D图形编程学习-基础简介(2) (译)

    本书系列 现代3D图形编程学习 基础简介(2) 图形和渲染 接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...

  7. 现代3D图形编程学习-基础简介(1) (译)

    本书系列 现代3D图形编程学习 基础简介 并不像本书的其他章节,这章内容没有相关的源代码或是项目.本章,我们将讨论向量,图形渲染理论,以及OpenGL. 向量 在阅读这本书的时候,你需要熟悉代数和几何 ...

  8. 现代3D图形编程学习-环境设置

    本书系列 现代3D图形编程学习 环境设置 由于本书中的例子,均是基于OpenGL实现的,因此你的工作环境需要能够运行OpenGL,为了读者能够更好的运行原文中的示例,此处简单地介绍了linux和win ...

  9. 现代3D图形编程学习-关于本书（译）

    本书系列 现代3D图形编程学习 关于这本书 三维图像处理硬件很快成为了必不可少的组件.很多操作系统能够直接使用三维图像硬件,有些甚至要求需要有3D渲染能力的硬件.同时对于日益增加的手机系统,3D图像硬 ...

随机推荐

  1. tomcat下部署两个工程时，只有一个可以访问，另一个出现404错误，该如何解决

    tomcat下部署两个工程时,只有一个可以访问,另一个出现404错误,该如何解决 在开发新项目的时候,有时候为了省时,直接把曾经做过的项目工程A拷贝成改名为B工程,然后再在B工程上进行功能的开发, 此 ...

  2. Clusternet 成为首批通过工信部开源成熟度评估项目！！！

    Clusternet 作为首批项目参与了<信息技术 开源 开源项目评估模型参考架构>测评,并成为通过评估的四个项目之一.<信息技术 开源 开源项目评估模型参考架构>由国防科技大 ...

  3. .net 程序通过 crontab 无法启动，手动执行脚本可以启动

    一.问题描述 .net 网关程序需要设置定时重启,按照日常操作先把正在运行的 PID kill 掉后,再执行启动服务. 把脚本放到 crontab 计划任务上,可以把服务 PID kill 掉,但无法 ...

  4. soundcloud to mp3

    关于 本文将介绍一个在线网站,将songs 下载为mp3格式 注意, 大陆需要梯子. 没有?soundcloud无法打开 准备 soundcloud to mp3 一个来自soundcloud的歌曲链 ...

  5. 【LeetCode】3. Longest Substring Without Repeating Characters 无重复字符的最长子串

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 公众号:负雪明烛 本文关键词:无重复字符,最长子串,题解,leetcode, 力扣,py ...

  6. 序列化之serialVersionUID

    serialVersionUID作用: 序列化时为了保持版本的兼容性,即在版本升级时反序列化仍保持对象的唯一性. 序列化ID起着关键的作用,java的序列化机制是通过在运行时判断类的serialVer ...

  7. salesforce零基础学习（一百一十）list button实现的一些有趣事情

    本篇参考: salesforce零基础学习(九十五)lightning out https://developer.salesforce.com/docs/component-library/docu ...

  8. js 简单版发布留言 案例

    <!DOCTYPE html>   <html lang="en">   <head>       <meta charset=" ...

  9. linux 之 DolphinScheduler 安装步骤

    下载安装包 直接进官网下载 https://dolphinscheduler.apache.org/zh-cn/download/download.html 参考官方文档 https://dolphi ...

  10. nginx 超时时间配置说明

    做excel文件导入时 报 504 错误 是nginx网关超时导致 下面几个参数貌似没效果,反正我配置不起作用 这是有问题的配置属性 ,注意   于是我换了配置 ,放在http块里 ,配置生效了 #读 ...