WebGL编程指南笔记-第二章 WebGL入门

原创 已于 2022-06-23 11:22:10 修改 · 637 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #html5 #着色器

于 2022-06-19 08:36:20 首次发布
本文是WebGL编程指南的第二章摘要，介绍了如何入门WebGL编程，包括WebGL程序的构成、Canvas的使用、以及如何开始绘制。重点讲解了着色器的概念和分类，如顶点着色器和片元着色器，并通过绘制点的实例展示了attribute和uniform变量的使用。最后，简要概述了WebGL坐标系统。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第二章 WebGL入门

WebGL程序

以一些核心的webgl函数组成的javascript程序，称为WebGL程序，WebGL Application，是WebGL的基础入门之一，大部分的都以一些固定模板的代码入门，包括

  • 获取canvas元素
  • 引入WebGL Javascript文件
  • WebGL绘图函数
  • 着色器程序
  • …

Canvas

早期网页上只能显示静态图片，后来出现了Flash Player，HTML5引入了<canvas>标签，允许我们使用Javascript，通过调用canvas提供的绘图函数来绘制点、线、矩形、圆等。

示例代码，例2.1 DrawingRectangle.html
示例代码，例2.1 DrawingRectangle.js

运行以上代码能看到一个蓝色的矩形绘制在网页中

canvas的坐标系统

在这里插入图片描述

开始入门WebGL程序

先看看清空绘图区的效果，清空了canvas的矩形区域

在这里插入图片描述

示例代码,HelloCanvas.js

gl.clear(buffer)的参数类型和默认值

最低0.47元/天 解锁文章

200万优质内容无限畅学
WebGL编程指南 - WebGL入门
zaizai1007的博客
10-17 1913
入门
WebGL编程指南--入门
lying_19的博客
12-12 1441
WebGL是一项用来在网页上绘制和渲染复杂三维图形，并允许用户与之进行交互的技术。传统的三维渲染，需要C或C++语言开发，并利用OpenGL(开源)或Direct3D(微软提供)这些三维图形库开开发独立应用程序。WebGL的出现，改变了桌面端应用程序垄断三维技术的情况。WebGL内嵌在浏览器中，不需要安装软件和3D环境，直接打开网页即可浏览。
WebGL入门指南
csdn1232的博客
06-14 341
《WebGL入门指南》 基本信息 作者：(美)TonyParisi 译者：郝稼力 出版社：人民邮电出版社 ISBN：9787115316684 上架时间：2013-6-13 出版日期：2013年6月 ...
WebGL入门指南：从零构建你的第一个3D应用
最新发布
CbukeJ的博客
06-05 82
/ 三角形的三个顶点（x, y）0.0, 0.5, // 顶点1-0.5, -0.5, // 顶点20.5, -0.5 // 顶点3]);
[笔记]《webGL编程指南》- WebGL入门
04-27 263
gl.crearColor(red, green, blue, alpha) 指定绘图区域的背景色 gl.clear(buffer) 将指定的缓冲区设定为预定的值。如果清空的是颜色缓冲区，那么将使用 gl.clearColor() 指定的值（作为预定值）。 WebGL 依赖于一种新的称为着色器（shader）的绘图机制。着色器提供了灵活且强大的绘制二维或三维图形的方式...
WebGL编程指南(含源码).pdf
11-21
WebGL编程指南(含源码).pdf，本书是一部很好的WebGL入门教程书籍，本资源包含目录，方便观看，同时包含书本例程源码
【笔记】《WebGL 编程指南》第 2 章 WebGL 入门
XcantloadX的博客
01-18 1365
JS 代码不像之前用 canvas 绘制 2D 矩形那样简单，用 WebGL 绘制一个点必须要用着色器。WebGL 需要的两种着色器【P55】 顶点着色器(Vertex shader):顶点着色器是用来描述顶点特性(如位置、颜色等)的程序。顶点(vertex)是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。绘制一个点（版本1） 25【P56】 片元着色器（Fragment shader）：进行逐片元处理过程如光照（见第8章“光照”）的程序。
WebGL编程指南笔记（一）概念及入门
weixin_45887187的博客
12-25 1357
本文章包含《WebGL编程指南》第一章和第二章的内容，包含WebGL概念和入门知识。WebGL的技术规范继承自免费和开源的OpenGL标准。 从2.0版本开始，OpenGL支持了一项非常重要的特性———可编程着色器方法。 编写着色器的语言又称为着色器语言(shading language)，OpenGL ES 2.0基于OpenGL着色器语言(GLSL), 因此后者又被称为OpenGLES着色器语言(GLSL ES)。 WebGL基于OpenGL ES 2.0, 也使用GLSL ES编写着色器。
cesium入门笔记集合
呱呱的博客
03-02 5126
一、认识Cesium 概念 Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库; Cesium 使用WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL; Cesium是基于Apache2.0 许可的开源程序。它可以免费的用于商业和非商业用途。 作用 多种场景模式（3D，2.5D以及2D场景）的支持，真正的二三维一体化 可以...
WebGL编程指南.pdf
04-06
WebGL编程指南.pdfWebGL编程指南.pdfWebGL编程指南.pdfWebGL编程指南.pdfWebGL编程指南.pdfWebGL编程指南.pdf
WebGL编程指南
03-05
WebGL和3D图形规范OpenGL、通用计算规范OpenCL一样来自Khronos Group，而且免费开放，并于2010年上半年完成并公开发布。Adobe Flash Player 11、微软Silverlight 3.0也都已经支持GPU加速，但它们都是私有的、不透明的。WebGL标准工作组的成员包括AMD，爱立信，谷歌，Mozilla，Nvidia以及Opera等，这些成员会与Khronos公司通力合作，创建一种多平台环境可用的WebGL标准，WebGL标准在2011年上半年首度公开发布，该标准完全免费对外提供。
WebGL编程指南PDF和源码
08-16
WebGL编程指南PDF 源码
webgl编程指南
04-18
webgl编程指南webgl编程指南webgl编程指南webgl编程指南webgl编程指南webgl编程指南webgl编程指南webgl编程指南
WebGL编程指南(含源码)
02-07
WebGL编程指南(含源码),入门提高到大神必备良药。。。
WebGL编程指南中文版
06-29
WebGL编程指南中文版全,全中文。
WebGL编程指南（一）-Web基础
热门推荐
肥叔菌的博客
06-29 1万+
WebGL程序使用三种语言开发：HTML、JavaScript和OpenGL ES着色器语言(GLSL ES)，着色器代码GLSL ES内嵌在JavaScript中。WebGL采用HTML5中新引入的&amp;amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;amp;gt;标签。如果没有WebGL，JavaScript只能在&amp;amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;amp;gt;上绘制二维图
WebGL编程指南深入学习与实践笔记
资源摘要信息:"《WebGL编程指南》学习笔记webgl-study-notes" WebGL编程指南学习笔记webgl-study-notes涉及的知识点： 1. WebGL基础概念 - WebGL是一种JavaScript API，它允许在不需要插件的情况下在网页浏览器中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值