一个玩具webgl框架

原创 已于 2026-02-11 15:09:22 修改 · 置顶 · 102 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#webgl
于 2026-01-31 11:51:04 首次发布

自己学习了《webgl编程指南》，在学习的过程中就行了记录，您可以看到我在博客其实有大量的篇幅去记录。于是我把学到的进行一个总结。

于是这个玩具webgl的框架就出现了。如果您发现了问题，可以跟我说下。谢谢包容

如果你感兴趣，帮忙点个星。地址：https://gitee.com/sogoodeveryday/webgl-wf

对shader的学习。帮忙点个follow 地址：https://www.shadertoy.com/user/sogooday

WebGL开发框架概述
最新发布
qq_48256438的博客
08-21 995
本文介绍了主流WebGL开发框架及其适用场景。Three.js作为最流行框架，适合初学者和通用3D应用；Babylon.js专注3D游戏开发；PlayCanvas提供云端协作工具；A-Frame简化VR开发；Deck.gl专攻地理数据可视化；PixiJS则专注于2D高性能渲染。选择框架需考虑项目需求、团队经验和性能要求：初学者推荐Three.js，游戏开发选Babylon.js，团队协作用PlayCanvas，地理数据选Deck.gl，2D需求则适合PixiJS。这些框架通过封装WebGL底层细节，显著提升
WebGL——给画布换颜色、绘制一个点、三维坐标系
HuoZhiyan 的博客
12-16 3187
本文介绍了WebGL的基本概念，并通过WebGL给画布换背景颜色、绘制一个点、绘制三维坐标系理解归一化设备坐标等内容...
基于WebGL的10大开源框架
laofan_1123的博客
01-28 3949
WebGL WebGL是基于OpenGL的JavaScript API /库，允许Web浏览器在浏览器中渲染3D / 2D图形，而无需安装额外的插件，桌面应用程序，任何第三方插件或浏览器扩展。WebGL允许通过浏览器使用机器GPU将3D图形渲染为HTML页面。目前，大多数现代网络浏览器（例如Google Chrome，Mozilla Firefox和Safari）都支持WebGL。可以通过浏览器设置或使用特殊插件来禁用或启用WebGL。WebGL框架和库用于创建交互式展示，基于浏览器的游戏，详细的...
WebGL开源框架列举概述
欧特GO
11-22 4541
WebGL是基于OpenGL的JavaScript API /库，允许Web浏览器在浏览器中渲染3D / 2D图形，而无需安装额外的插件，桌面应用程序，任何第三方插件或浏览器扩展。WebGL允许通过浏览器使用机器GPU将3D图形渲染为HTML页面。目前，大多数现代网络浏览器（例如Google Chrome，Mozilla Firefox和Safari）都支持WebGL。可以通过浏览器设置或使用特殊插件来禁用或启用WebGL。WebGL框架和库用于创建交互式展示，基于浏览器的游戏，详细的科学和医学可视化/模拟
webGl shader的学习记录(二)js 与(glsl语言) OpenGL ES之间如何进行交互？及其如何在js中对vertexShader与fragmentShader进行赋值
huhudeni的博客
04-30 2033
再上一个的章节之中我们知道，着色的书写分两个着色器（顶点着色器与片元着色器），从而结合成为一个可以使用的单独使用的着色器的程序。 下面我们将会接触到的是，如何使用js 与(glsl语言) OpenGL ES之间进行交互。 在了解两者之间如何通讯的时候，我们需要了解一些定义。这些定义出来的数据，可以是的glsl与js进行交互。 attribute变量： attribute变量是只能在ver...
关于gltf模型格式文件的学习
huhudeni的博客
01-18 1946
因为笔者自己在检测自己学习webgl的质量于是写一个webgl的小框架。遇见了gltf模型的加载问题。所以我会一边学习一边完善这篇文章。
webGl shader的学习记录(六)：如何画出一个渐变色填充的三角形
huhudeni的博客
09-20 1684
在前几节中我们分别学习 点 线 三角形的学习。今天我们给三角形添加一个渐变色 在这个章节中如果你跟着看了前几张的学习内容，你就很快可以理解本章的内容了。如果你并没有webgl的经验，你可以去我的博文中看我之前的文章； 这一章节中其实与上创建线段与三角形并没有上面区别，唯独有两个点需要注意一下； 第一需要注意的地方，在于glsl语言定义中我们需要把顶点着色器与片元着色器结合起来，请看下面的...
webGl shader的学习记录(六)：如何画出一个渐变色填充的矩形
huhudeni的博客
11-25 1014
其实将两个两个三角形合并一下，就出现了。一个矩形 使用两种方式 一个是两个buffer 一个是单一的buffer glcl代码 <script type="shader-source" id="vertexShader"> //浮点数设置为中等精度 precision mediump float; //接收 JavaScript 传递过来的点的坐标（X, Y） ...
webGl shader的学习记录(五)：如何画线段
huhudeni的博客
09-20 691
今天学习一下如何使用webgl画一条线段 let vertexShaderSource = ` //浮点数设置为中等精度 precision mediump float; //接收 JavaScript 传递过来的点的坐标（X, Y） attribute vec2 a_Position; // 接收canvas的尺寸。 attribute vec2...
webGl shader的学习记录(一) 在canvas的中心画出一个红点 点图元
huhudeni的博客
04-30 595
笔者也在学习 如何写出shader 下面是自己的想法希望对大家有用 其实在webGl写shader的时候，我们可以分将整体分为几个部分 第一部分是 顶点着色器 1，建立顶点着色的相关代码， 2，创建顶点着色器，并将顶点着色器的代码，与创建的顶点着色器关联起来 第二部分是 片元着色器 1，建立片元着色的相关代码， 2，...
关于webl中TRIANGLES_STRIP
huhudeni的博客
12-05 555
webgl中的三角形的绘制有三种方法分别是: TRIANGLES： 每三个定点决定一个三角形例如[0 1 2][3,4,5][5,6,7] 顶点数与三角形是n:n/3的关系 TRIANGLES_FAN： 第0个定点是多所有三角形共享的，顶点数与三角形是n:n-2的关系（n定点数） TRIANGLES_STRIP： 也n个定点形成n-2个三角形，但是要复杂一些，三角形的三个顶点索引中， 如果最大的最大的索引是偶数i，组成的三角形的排列顺序是[i-2,i-1,i] i>=2 定点...
webGL编程指南 第三章 矩阵旋转三角形rotatedTriangle_Matrix
huhudeni的博客
10-19 547
当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。
webGl shader的学习记录(三)：怎么样去画出来一个三角形
huhudeni的博客
09-19 546
在这章节中我们需要绘制一个静态的三角形 首先我们依旧是现需要写两个顶点着色器的素材与顶点做色器的素材。 就是下面这段代码 //顶点着色器 let vertexShaderSource = ` precision mediump float; attribute vec2 a_Position; void main(){ ...
webGL编程指南 第二章 helloPint.js
huhudeni的博客
05-02 530
我会持续更新关于wegl的编程指南中的代码。 当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助 下面是代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
webGl shader的学习记录(四)：如何与人互动绘制多个三角形。
huhudeni的博客
09-19 505
正在这一章节中我们将会学习到如何使用鼠标创造多个三角形，从而实现互动 老规矩首先我们需要先处理一下顶点着色器与片元着色器 let vertexShaderSource = ` //设置浮点数精度为中等精度 precision mediump float; // 接收顶点坐标 (x, y) attribute vec2...
WebGL编程指南学习中整体的理解
huhudeni的博客
05-02 478
在学习webgl的时候，我大概可以将代码分为3各部分 写opengl es的代码 顶点着色器与片元着色器 使用webgl的api将顶点着色器与片元着色器传递给opengl es 使用js作为桥梁，调用webgl的相关api从顶点着色器与片源着色器中获取相关变量 对变量进行赋值 绘制 剩下要做的就是如果围绕喆几点进行处理，当你有了一个整体的理解了，就起码有了一个度，起码不会出现自己必书写代码，不知道下面要怎么写了的情况，有思路就好很多，代码只是思维的表现 ...
webGL编程指南 第三章 multiPoints.js
huhudeni的博客
05-27 465
我会持续更新关于wegl的编程指南中的代码。 git代码地址https://github.com/soGooday/webPlan/blob/main/webGL/webGl%E7%BC%96%E7%A8%8B%E6%8C%87%E5%8D%97/%E7%AC%AC%E4%B8%89%E7%AB%A0-%E7%BB%98%E5%88%B6%E5%92%8C%E5%8F%98%E6%8D%A2%E4%B8%89%E8%A7%92%E5%BD%A2/%E7%BC%93%E5%86%B2%E5%8C%BA%E.
webGL编程指南 第三章 平移三角形 TranslatedTriangle.js
huhudeni的博客
10-18 414
在本次的案例案例中主要是xy的坐标变量相加，同时传递个给相关变量。当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。
webGL编程指南 第四章 平移+旋转.RotatdTanslatedTriangle.html
huhudeni的博客
10-24 397
当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。移结合起来，因为矩阵的不存在交换法则。文章中设计的矩阵地址在。
解密！抖音百万粉丝博主三维地图视频都用到了什么GIS数据和技术
Mapmost的博客
08-12 3583
（1）影像数据影像数据，通常指的是通过各种遥感技术，如卫星、无人机或地面传感器等设备捕捉到的图像信息。这类数据涵盖了从可见光到红外、微波等多个电磁波谱段，能够用于多样的应用领域：1）地图制图与地理信息系统 (GIS)：高分辨率卫星影像常用于更新地形图、制作数字高程模型(DEM)，以及土地覆盖和土地利用分类。2）农业监测：通过分析不同波段的影像数据，可以评估作物生长状况、病虫害预警及灌溉需求，助力精准农业。3）城市规划与管理：监测城市扩张、土地变化、交通流量及环境质量，为城市可持续发展提供数据支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值