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

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

一.首先修改你的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 <he…

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

非常兴奋,我坚持了下来,开始更新我的第二篇博客,还是关于WebGPU的,我在学习过程中,对这项技术非常感兴趣,即使它非常抽象,难以理解,因为我看到未来Web3D的发展,WebGPU会成为主流技术,学习这项技术的前景会更加光明. 本节来创建单色三角形,并通过输入color四元数组数值对三角形颜色进行改变. 一.使用搭建好的开发环境进行所有软件包的安装 使用上一章节搭建好的所有配置文件,先进行一步所有软件包的安装(这是徐博士教程里的步骤),为的是产生node_modules文件夹内的所有配置文件,但…

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

首先感谢徐博士提供的视频教程,我的博客记录也是学习徐博士进行的自我总结,老徐B站学习视频链接网址:WebGPU图形编程 - 免费视频教程(1):建立开发环境_哔哩哔哩_bilibili 创建之前你需要安装以下WebGPU开发工具 Visual Studio Code (https://code.visualstudio.com)Node.js (https://nodejs.org)TypeScript (编程语言)Webpack (模块化捆绑器)Chrome Canary (https://w…

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

本节我们来复原一个彩色的正方形,前提告知,本节的shaders和main的代码从结构上有调整,我会更加详细的描述每行的代码意思: 源代码下载地址:https://github.com/jack1232/webgpu07 一.首先需要你安装所有的软件包 安装完软件包,确保你的本地生成node_modules文件夹 npm install 二.创建你的index.html文件 1.<canvas>的"canvas-webgpu"你可以理解为调用webgpu内的canvas接口:…

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

本书系列 现代3D图形变成学习 http://www.cnblogs.com/grass-and-moon/category/920962.html 设置颜色 这一章会对上一章中绘制的三角形进行颜色的设定.而不是单纯的设置一个单一的颜色,这里我们会使用两种方式来对这个三角形设置颜色的变化.这些方法有使用片段位点来计算颜色,和前一个顶点数据来计算颜色. 片段位置显示 正如我们在引言中提到的,片段的数据中的一部分包括片段在屏幕上的位置.因此,如果我们想要在三角形表面上设定变化的颜色,我们可以访问当前…

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

本书系列 现代3D图形编程学习 OpenGL是什么 在我们编写openGL程序之前,我们首先需要知道什么是OpenGL. 将OpenGL作为一个API OpenGL 通常被认为是应用程序接口(API).OpenGL API有不同编程语言的实现版本.但是,它们最终使用的都是最底层的C语言的接口. 在C语言的API中,定义了很多typedefs,#define,以及函数.typedefs用于定义openGL里面使用到的基本的数据类型,如GLint,GLfloat等. 复杂的数据结构,如struct,…

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

本书系列 现代3D图形编程学习 基础简介(2) 图形和渲染 接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包括你现在阅读的文字是简单的二维像素点的集合.如果你在屏幕上截图,并放很大,就会看到一个个的方格. Figure8. An Image 没一个格子就是一个像素.pixel单词,是从Picture Element中提取出来的.你屏幕上的没一个像素都有一个独立的颜色.二维的像素数组就组成了 图像 因此,任…

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

本书系列 现代3D图形编程学习 基础简介 并不像本书的其他章节,这章内容没有相关的源代码或是项目.本章,我们将讨论向量,图形渲染理论,以及OpenGL. 向量 在阅读这本书的时候,你需要熟悉代数和几何知识,但对于向量的理解并不是必要的.因为,在接下去的内容中,会对向量的基本概念作出介绍. 在面对几何或是数值相关的内容时,向量可以有很多不同的解释.在任何一种情况,向量是具有维度的.二维的向量限制在一个平面上,然而三维的向量可以在任何的物理空间.向量还可以有更高的维度,但是通常情况下,我们处理的向量…

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

本书系列 现代3D图形编程学习 环境设置 由于本书中的例子,均是基于OpenGL实现的,因此你的工作环境需要能够运行OpenGL,为了读者能够更好的运行原文中的示例,此处简单地介绍了linux和windows下OpenGL环境的配置.需要配置的是除了OpenGL基础环境外,还需要freeglut和glew.具体的配置见下面的内容. linux 由于译者使用的linux版本为mint 18 sarah,此处就以mint系统为例进行linux下的环境配置. sudo apt-get install…

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

本书系列 现代3D图形编程学习 关于这本书 三维图像处理硬件很快成为了必不可少的组件.很多操作系统能够直接使用三维图像硬件,有些甚至要求需要有3D渲染能力的硬件.同时对于日益增加的手机系统,3D图像硬件,也成为了它们的必备特征. 对于大多数刚刚接触图像以及渲染的人,想要深入理解图像硬件是一件有挑战的事情. 为什么阅读这本书 现在已经有很多教授图形学相关的实体书.网络上关于图形学的介绍将更多,常见的形式有,wikis,博客,入门类型的,以及论坛.那么这本书提供了哪些其他书籍所没有提供的内容呢? 从…