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

本节来创建单色三角形，并通过输入color四元数组数值对三角形颜色进行改变.

一、使用搭建好的开发环境进行所有软件包的安装

使用上一章节搭建好的所有配置文件，先进行一步所有软件包的安装（这是徐博士教程里的步骤）,为的是产生node_modules文件夹内的所有配置文件,但我又在想，我第一节已经把所有配置好的文件配置好了，并且已经有node_modules文件夹了，npm install不是多此一举么（可能是我对开发环境的搭建还没有学习深刻）？

npm install

徐博士执行完上述命令行后，才生成node_modules文件夹，我试着下载它的源代码，他的源码里面没有包含node_modules文件夹，我执行npm install后成功配置完所有文件，这里我猜测是package.json已经写入了配置文件及版本号，install可能是自动进行版本号识别安装；

二、修改index.html内容

需要你对dist文件夹下的index.html<body>内的代码内容进行修改

代码如下：

  <div>

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

       <label>Color:</label> <!--表单标题-->

       <input type="text" id="id-color" value="(1.0,1.0,1.0,1.0)"><!--表单的类型及数值-->

       <button type="button" id="id-btn">Change Color</button><!--button类型及按键名称-->

       <br><br>

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

    </div>

三、添加管线着色文件

在src文件夹下，添加sharder.ts文件，用来写入WGSL着色器，这里面的着色器用法和声明，暂时不需要特别理解，徐博士也是简单了描述了vertex和fragment两种着色器，webgpu使用四维矢量来渲染三维图形，之后再详细学习查看WGSL使用。

代码如下：

export const Shaders = (color:string) => {

    const vertex = `

        [[stage(vertex)]]

        fn main([[builtin(vertex_index)]] VertexIndex: u32) -> [[builtin(position)]] vec4<f32> {

            var pos = array<vec2<f32>, 3>(

                vec2<f32>(0.0, 0.5),

                vec2<f32>(-0.5, -0.5),

                vec2<f32>(0.5, -0.5));

            return vec4<f32>(pos[VertexIndex], 0.0, 1.0);   //webgpu使用四维矢量来渲染三维图形

        }

    `;

    const fragment = `

        [[stage(fragment)]]

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

            return vec4<f32>${color};

        }

    `;

    return {vertex, fragment};

}

export const Shaders1 = (color:string) => {

    const vertex = `

        var pos = array<vec2<f32>, 3>(

            vec2<f32>(0.0, 0.5),

            vec2<f32>(-0.5, -0.5),

            vec2<f32>(0.5, -0.5));

        [[stage(vertex)]]

        fn main([[builtin(vertex_index)]] VertexIndex: u32) -> [[builtin(position)]] vec4<f32> {

            return vec4<f32>(pos[VertexIndex], 0.0, 1.0);

        }

    `;

    const fragment = `

        [[stage(fragment)]]

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

            return vec4<f32>${color};

        }

    `;

    return {vertex, fragment};

}

四、使用typescript来编写webgpu的控制代码去控制命令GPU

打开src文件夹下的main.ts文件，进行代码编写，同样这一大段代码我也看不懂，但需要知道文件用处，具体的API使用方法可以参照API文档https://www.orillusion.com/zh/webgpu.html#security；

代码如下：

import $ from 'jquery';

import { CheckWebGPU } from './helper';

import { Shaders } from './sharder';

const CreateTriangle = async (color='(1.0,1.0,1.0,1.0)') => {

    const checkgpu = CheckWebGPU();

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

        console.log(checkgpu);

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

    }

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

    const adapter = await navigator.gpu?.requestAdapter() as GPUAdapter;

    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(color);

    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: "triangle-list",

        }

    });

    const commandEncoder = device.createCommandEncoder();

    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(3, 1, 0, 0);

    renderPass.endPass();

    device.queue.submit([commandEncoder.finish()]);

}

CreateTriangle();

$('#id-btn').on('click', ()=>{

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

    CreateTriangle(color);

});

五、到此我们所有代码编写完成

你可以看到以上步骤，我们对index.html文件写页面展示和调用接口、再新建我们的管线代码sharder.ts编写渲染管线、再对mian.ts文件使用typescript让webgpuAPI对GPU命令指令；

开启网页窗口你可以看到创建成功。

需要注意的一点，也是我过程中犯的错误，就是在html中“”内的代码内容不可以有空格，否则会生成失败的！

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

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

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

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

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

  3. WebGPU图形编程（3）：构建三角形图元<学习引自徐博士教程>

    一.首先修改你的index.html文件 请注意主要在html页面修改添加的是需要加选择项:"triangle-list"和"triangle-strip",如 ...

  4. [网络编程] 自己构建一个cgi.FieldStorage()的对象

    问题描述: 通常cgi.FieldStorage()返回一个类似于Python字典的对象. 在cgi框架中必须通过浏览器发送表单过来才能接受消息 那么我该怎么进行本地调试呢? 或者说在没有搭建好一整套 ...

  5. 学废了系列 - WebGIS vs WebGL图形编程

    目前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积 ...

  6. Wince 中的图形编程

    图形编程程序当中,笔者主要要和大家讨论的是画刷的创建和使用以及绘图函数,比如2D图像的绘制等等. *画刷的定义: HBRUSH hBrush; *画刷的类型: 1. 系统内置画刷:GetStockOb ...

  7. 如何用 Swift 语言构建一个自定控件

    (via:破船之家,原文:How To Make a Custom Control in Swift)   用户界面控件是所有应用程序重要的组成部分之一.它们以图形组件的方式呈现给用户,用户可以通过它 ...

  8. 现代3D图形编程学习-你好，三角形(译)

    你好,三角形 传统的入门教程在介绍编程语言的时候,通常从"Hello,World!"的程序开始.这样的程序拥有最简单的能够直接输出"Hello, World!" ...

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

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

随机推荐

  1. 最强最全面的大数据SQL经典面试题（由31位大佬共同协作完成）

    本套SQL题的答案是由许多小伙伴共同贡献的,1+1的力量是远远大于2的,有不少题目都采用了非常巧妙的解法,也有不少题目有多种解法.本套大数据SQL题不仅题目丰富多样,答案更是精彩绝伦! 注:以下参考答 ...

  2. Miniconda入门教程

    Miniconda 教程 介绍 Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.因为包含了大量的科学包,Anaconda 的下载文件 ...

  3. c++跨平台字符编码与乱码杂谈

    blos https://article.itxueyuan.com/qpQml https://www.cnblogs.com/wangmh/p/7265258.html https://blog. ...

  4. 【LeetCode】743. Network Delay Time 解题报告（Python）

    [LeetCode]743. Network Delay Time 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: ht ...

  5. UVA11754 - Code Feat

    Hooray!  Agent Bauer has shot the terrorists, blown upthe bad guy base, saved the hostages, exposed ...

  6. [源码解析] PyTorch 分布式之弹性训练(4)---Rendezvous 架构和逻辑

    [源码解析] PyTorch 分布式之弹性训练(4)---Rendezvous 架构和逻辑 目录 [源码解析] PyTorch 分布式之弹性训练(4)---Rendezvous 架构和逻辑 0x00 ...

  7. FreeBSD 物理机下显卡的配置

    FreeBSD 已从 Linux 移植了显卡驱动,理论上,A 卡 N 卡均可在 amd64 架构上正常运行. 支持情况 对于 FreeBSD 11,支持情况同 Linux 内核 4.11: 对于 Fr ...

  8. MA8621带SD读卡的USB 2.0高速3端口HUB方案芯片|MA8621中文规格书|USB 2.0方案

    MA8621说明 MA8621是USB 2.0高速3端口集线器的高性能解决方案,带有SD卡控制器,完全符合通用串行总线规范2.0.控制器继承了先进的串行接口技术,当3个DS(下游)端口同时工作时,功耗 ...

  9. CS5210完全替代AG6202|HDMI转VGA不带音频输出的芯片+原理图|替代兼容AG6202

    CS5210完全替代AG6202|HDMI转VGA不带音频输出的芯片+原理图|替代兼容AG6202 安格AG6202是一个HDMI转VGA不带音频解决方案,用于实现HDMI1.4高分辨率视频转VGA转 ...

  10. 单芯片CS5265替代VL102+PS176|设计USB TYPEC转HDMI方案|替代VL102+PS176

    一.PS176概述PS176是一个显示端口 (DP)至HDMI 2.0视频接口转换器适用于需要视频协议转换的电缆适配器.电视接收器.监视器和其他应用.它将接受任何显示端口输入格式,包括DP 1.1a. ...