首先感谢徐博士提供的视频教程，我的博客记录也是学习徐博士进行的自我总结，老徐B站学习视频链接网址：WebGPU图形编程 - 免费视频教程（1）：建立开发环境_哔哩哔哩_bilibili

创建之前你需要安装以下WebGPU开发工具

Visual Studio Code (https://code.visualstudio.com)
Node.js (https://nodejs.org)
TypeScript (编程语言)
Webpack (模块化捆绑器)
Chrome Canary (https://www.google.com/chrome/canary)

一、使用命令行创建文件夹

因为我是新手，第一次使用命令行创建文件夹，所以第一次创建失败，原因是没有>code命令；

第二行执行创建gpu001文件夹成功，去到你的文件路径下查看；

输入命令符：

>code>mkdir gpu001 && cd gpu001

二、需要继续使用命令行配置你的package.json文件

输入命令符：

npm init -y

初始化应用，这将产生一个package.json文件，用来存储各种软件包的依赖关系 ；

这个步骤会自动给你配置好package.json文件，可以在文件目录下看到配置文件；

显示配置成功

三、需要进入vs code去做配置

新建终端-安装软件包

我在安装过程中没有任何问题

//安装jQuery
npm i jquery @types/jquery

//安装webgpu，需要注意的是webgpu不稳定，几乎每周更新一次API
npm i @webgpu/types 

//安装node文件包
npm i @types/node


//安装CSS和ts的加载器

npm i css-loader ts-loader

//安装typescript

npm i typescript 

//安装webpack命令行文件
npm i webpack webpack-cli






配置成功可以看到node文件夹和package-lock.json




四、需要你对package.json文件进行修改


通过这三行命令使我们可以在不同模式下运行webpack


dev 开发模式


prod 生产模式


watch 监视模式


将“scripts”{}处替换为




  "scripts": {

    "dev": "webpack --mode development",

    "prod": "webpack --mode production",

    "watch": "webpack --watch --mode production"

  }, 




替换前                                                                                                                                   替换后




五、需要你产生ts配置文件tsconfig.json


使用终端写入代码进行创建，这里值得注意的是徐博士教程给出的代码是 tsc -init 但我的系统禁止运行脚本，但不要紧，我已找到解决办法；






//使用该命令行可以解决上述问题
npx tsc -init




npm 从5.2版开始，增加了 npx 命令，具体的使用方法可以参考这个博客：http://www.ruanyifeng.com/blog/2019/02/npx.html




生成的tsconfig.json文件需要把代码替换如下：




{

  "compilerOptions": {

   "rootDir": "src",//下一步新建的src文件夹

   "outDir": "dist",//下一步新建新建的dist文件夹

   "target": "es6",

   "lib": [

   "es2017",

  "dom"

 ],

   "types": [

   "node",

   "@webgpu/types"

 ],

 "module": "es2015",

 "esModuleInterop": true,

   "strict": true,

   "sourceMap": true

   },

   "exclude": [

   "node_modules"

   ]

  }  




六、替换完成以后新建两个文件夹，src、dist下需要新建index.html文件




index.html代码如下：




<!DOCTYPE html>

<head>

<meta charset="utf-8">

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

<title>WebGPU Step-by-step </title>

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

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

</head>

<bod>

    <h1>我的第一个WebGPU页面:</h1>

    <h2 id="id-gpu-check"></h2> //浏览器是否支持webgpu，并打印出检查结果

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

</bod>

</html>




七、手动新建helper.ts文件


在src文件夹下创建helper.ts文件，这个文件是判断你的浏览器是否支持webgpu；


代码如下：




export const CheckWebGPU = () => {

    let result = 'Great, your current browser supports WebGPU!';

        if (!navigator.gpu) {

           result = `Your current browser does not support WebGPU! Make sure you are on a system

                     with WebGPU enabled. Currently, SPIR-WebGPU is only supported in

                     <a href="https://www.google.com/chrome/canary/">Chrome canary</a>

                     with the flag "enable-unsafe-webgpu" enabled. See the

                     <a href="https://github.com/gpuweb/gpuweb/wiki/Implementation-Status">

                     Implementation Status</a> page for more details.

                    `;

        }

    return result;

}






八、手动新建应用入口main.ts文件




//导入jquery库；
import $ from 'jquery';


//引入CheckWebGPU函数，这个函数定义在helper文件中；

import { CheckWebGPU } from './helper';


//CheckWebGPU函数产生的字符串导入到html中，<h2>打印出来

$('#id-gpu-check').html(CheckWebGPU()); 




九、手动新建webpack.confjg.js文件


根目录下创建


代码如下：




const path = require("path");

const bundleOutputDir = "./dist";  //dist文件夹下产生

module.exports = {

    entry: {

        main: "./src/main"    //主要入口端在定义在sec/main文件下

    },

    output: {

        filename: "[name].bundle.js",   //出口端定义在

        path: path.join(__dirname, bundleOutputDir),

        publicPath: 'public/dist/'

    },

    devtool: "source-map",

    resolve: {

        extensions: ['.js', '.ts']

    },

    module: {

        rules: [

            {

                test: /\.js$/,

                exclude: ['/node_modules/']

            },

            { test: /\.tsx?$/, loader: "ts-loader" },

            {

                test: /\.css$/,

                sideEffects: true,

                loader: "css-loader"

            }

        ]

    }

};




十、打包文件，生成main.bundle.js文件成功




npm run prod 






 dist文件夹下会多出三个文件，main.bundle.js文件十分重要，因为在html文件中引用的；




 十一、浏览器展示，商店搜索live server插件，并到进行setting.json文件中进行配置，CustomBrowser定义好你浏览器本地位置；




安装完成以后，回到html文件中，右键弹出菜单，选择Open with Live Server,打开页面成功，需要注意你必须安装Chrome Canary 使用这个浏览器才可以成功启用webgpu。




 恭喜你！此页面代表你的webgpu启用成功，这也是我认真学习后执行成功，但其中文件关系和各项引用的联系，需要我们自己去理解，刚开始会很痛苦，但其实你理解原理，便会恍然大悟，坚持下去，成为新技术的牛人！


												


											
WebGPU图形编程（1）：建立开发环境  <学习引自徐博士教程>的更多相关文章
	

    
								
  1. WebGPU图形编程（2）：构建一个单色的三角形<学习引自徐博士教程>
		
    非常兴奋,我坚持了下来,开始更新我的第二篇博客,还是关于WebGPU的,我在学习过程中,对这项技术非常感兴趣,即使它非常抽象,难以理解,因为我看到未来Web3D的发展,WebGPU会成为主流技术,学习 ...
    
		
    2. 
						
  2. WebGPU图形编程（3）：构建三角形图元<学习引自徐博士教程>
		
    一.首先修改你的index.html文件 请注意主要在html页面修改添加的是需要加选择项:"triangle-list"和"triangle-strip",如 ...
    
		
    3. 
						
  3. WebGPU图形编程（4）：构建一个彩色的正方形<学习引自徐博士教程>
		
    本节我们来复原一个彩色的正方形,前提告知,本节的shaders和main的代码从结构上有调整,我会更加详细的描述每行的代码意思: 源代码下载地址:https://github.com/jack1232 ...
    
		
    4. 
						
  4. 2014.8.12－AKKA和Actor model 分布式开发环境学习小结
		
    学习使用AKKA 断断续续有一年了. 眼下还是习惯用java来写akka以下的程序.对于原生的scala还是没有时间和兴趣去学习它. 毕竟学习一门语言须要兴趣和时间的. AKKA学习资源还是不算丰富. ...
    
		
    5. 
						
  5. Create-React-App创建antd-mobile开发环境(学习中的记录)
		
    (参考别人结合自己的整理得出,若有错误请大神指出) Facebook 官方推出Create-React-App脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能. 详 ...
    
		
    6. 
						
  6. Qt5和VS2017建立开发环境，安装后新建项目找不到Qt选项！！！
		
    最近开发win驱动和Qt5测试程序,需要建立Qt5和VS2017开发环境---对于Qt5和VS2017安装这里不做多余叙述. 参考资源很多,讲解也不错!! 这里切入正题:在VS2017中安转Qt vs ...
    
		
    7. 
						
  7. 实验四：Linux系统C语言开发环境学习
		
    项目 内容 这个作业属于哪个课程 班级课程主页链接 这个作业的要求在哪里 作业要求 学号-姓名 17043133-木腾飞 作业学习要求 1.学习Linux系统中如何查看帮助文档:2.在Linux系统中 ...
    
		
    8. 
						
  8. 实验四 Linux系统C语言开发环境学习
		
    项目 内容 这个作业属于哪个课程 Linux系统与应用 这个作业的要求在哪里 作业要求链接 学号-姓名 17041428-朱槐健 作业学习目标 1.Linux系统下C语言开发环境搭建 2.学习Linu ...
    
		
    9. 
						
  9. 我的高效编程的秘诀--开发环境的重要性(IOS)
		
    我觉得一个好的开发环境,能够让一个开发者的工作效率提高两倍以上,也能够让一个小白看上去不那么蠢: 开发环境不是仅仅安装一个xcode这种ide就OK了,在我看来开发环境的部署范围比較广泛,以下我来说说 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Centos使用kafka自带zookeeper安装kafka
			
    首先要安装jdk环境 可以参考:https://www.cnblogs.com/pxblog/p/10512886.html 下载kafka 地址:http://kafka.apache.org/do ...
    
			
    2. 
						
  2. 【LeetCode】1462. 课程安排 IV Course Schedule IV (Python)
			
    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS 日期 题目地址:https://leetcod ...
    
			
    3. 
						
  3. 【LeetCode】1433. 检查一个字符串是否可以打破另一个字符串 Max Difference You Can Get From Changing an Integer
			
    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 排序 日期 题目地址:https://leetcode ...
    
			
    4. 
						
  4. 【LeetCode】55. Jump Game 解题报告（Python & C++）
			
    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 贪心 日期 题目地址:https://leetcod ...
    
			
    5. 
						
  5. 【LeetCode】142. Linked List Cycle II 解题报告（Python & C++）
			
    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 双指针 set 日期 题目地址:https://le ...
    
			
    6. 
						
  6. 【LeetCode】378. Kth Smallest Element in a Sorted Matrix 解题报告（Python）
			
    [LeetCode]378. Kth Smallest Element in a Sorted Matrix 解题报告(Python) 标签: LeetCode 题目地址:https://leetco ...
    
			
    7. 
						
  7. 食物链(poj1182)
			
    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 57387   Accepted: 16781 Description ...
    
			
    8. 
						
  8. MySQL中写操作
			
    具体到操作流程: 当执行某个写操作的 SQL 时,引擎将这行数据更新到内存的同时把对应的操作记录到 redo log 里面,然后处于 prepare 状态.并把完成信息告知给执行器. 执行器生成对应操 ...
    
			
    9. 
						
  9. 【C++】关于new分配空间
			
    1如果不使用new,则在函数结束时内存被回收,指针变成野指针 #include <iostream> using namespace std; struct Node { int val; ...
    
			
    10. 
						
  10. CS5211替代PS8625|设计DP转LVDS转接板|替代PS8625方案
			
    1.CS5211与PS8625功能概述 CS5211是一个eDP到LVDS转换器,配置灵活,适用于低成本显示系统.CS5211与eDP 1.2兼容,支持1通道和2通道模式,每通道速度为1.62Gbps ...
    
			
    11.