![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webGl
sogooday
微信:wjf630759294
展开
-
关于gltf模型格式文件的学习
因为笔者自己在检测自己学习webgl的质量于是写一个webgl的小框架。遇见了gltf模型的加载问题。所以我会一边学习一边完善这篇文章。原创 2024-01-18 13:55:41 · 1174 阅读 · 0 评论 -
webGL编程指南 第五章 MultiAttributeSize
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。本章节中我我们学习使用buffer传递数据。原创 2023-10-27 15:58:13 · 273 阅读 · 0 评论 -
webGL编程指南 第四章 平移+旋转.RotatdTanslatedTriangle.html
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。移结合起来,因为矩阵的不存在交换法则。文章中设计的矩阵地址在。原创 2023-10-24 15:44:34 · 305 阅读 · 0 评论 -
webGL编程指南 第四章 旋转+平移.TanslatedRotatdTriangle
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。移结合起来,因为矩阵的不存在交换法则。文章中设计的矩阵地址在。我将先学习先旋转再位移。原创 2023-10-24 15:38:13 · 240 阅读 · 0 评论 -
webGL编程指南 第三章 矩阵缩放三角形.sclaTriangle_Matrix
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。中 我们使用矩阵进行旋转,这次我们使用矩阵实现位移。我会持续更新关于wegl的编程指南中的代码。原创 2023-10-19 21:27:21 · 52 阅读 · 0 评论 -
webGL编程指南 第三章 矩阵旋转三角形rotatedTriangle_Matrix
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。原创 2023-10-19 20:52:21 · 450 阅读 · 0 评论 -
webGL编程指南 第三章 平移三角形 TranslatedTriangle.js
在本次的案例案例中主要是xy的坐标变量相加,同时传递个给相关变量。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。原创 2023-10-18 21:13:05 · 318 阅读 · 0 评论 -
webGL编程指南 第三章 旋转三角形RotatedTriangle.js
当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。本案例是三角形的旋转。原创 2023-10-18 21:52:29 · 244 阅读 · 0 评论 -
webGL编程指南 第三章 绘制四角形.helloQuadjs
本节中我们还是使用4个顶点,放在一个数组中。然后去获取缓冲区中的数据,同时绘制正方形。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。接着做使用缓冲区赋值。原创 2023-10-11 17:07:13 · 148 阅读 · 0 评论 -
webGL编程指南 第三章 绘制四角形.helloQuadjs(加餐)
本节中我们还是使用4个顶点,放在一个数组中。然后去获取缓冲区中的数据,同时绘制矩形。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助。我会持续更新关于wegl的编程指南中的代码。在绘制的时候我们给它添加上颜色。接着做使用缓冲区赋值。原创 2023-10-11 17:10:26 · 169 阅读 · 0 评论 -
WebGL编程指南学习中整体的理解
在学习webgl的时候,我大概可以将代码分为3各部分写opengl es的代码 顶点着色器与片元着色器 使用webgl的api将顶点着色器与片元着色器传递给opengl es 使用js作为桥梁,调用webgl的相关api从顶点着色器与片源着色器中获取相关变量 对变量进行赋值 绘制剩下要做的就是如果围绕喆几点进行处理,当你有了一个整体的理解了,就起码有了一个度,起码不会出现自己必书写代码,不知道下面要怎么写了的情况,有思路就好很多,代码只是思维的表现...原创 2022-05-02 20:02:57 · 412 阅读 · 0 评论 -
webGL编程指南 第三章 helloTriangle.js
我会持续更新关于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%A原创 2022-06-01 15:49:03 · 226 阅读 · 0 评论 -
webGL编程指南 第三章 multiPoints.js
我会持续更新关于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.原创 2022-05-27 09:55:34 · 390 阅读 · 0 评论 -
webGL编程指南 第二章 coloredPoints.js
我会持续更新关于wegl的编程指南中的代码。git代码地址 sogooday当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助在上一节的代码中是使用一个固定的颜色进行绘制clickPint.js本节中我们将使用随机的颜色进行绘制点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv..原创 2022-05-08 11:52:45 · 239 阅读 · 0 评论 -
webGL编程指南 第二章 clickPint.js
我会持续更新关于wegl的编程指南中的代码。git代码地址:sogooday当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助上一节内容:helloPoint2.js。当前的工程师 点击页面并且用一个固定的颜色把点击的绘制出来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X.原创 2022-05-06 16:42:13 · 287 阅读 · 0 评论 -
webGL编程指南 第二章 helloPoint2.js
我会持续更新关于wegl的编程指南中的代码。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助当前是在上一个<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport原创 2022-05-05 17:25:05 · 299 阅读 · 0 评论 -
webGL编程指南 第二章 helloPint.js
我会持续更新关于wegl的编程指南中的代码。当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助下面是代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2022-05-02 19:49:58 · 450 阅读 · 0 评论 -
关于webl中TRIANGLES_STRIP
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定点...原创 2021-12-05 11:09:36 · 402 阅读 · 0 评论 -
webGl shader的学习记录(一) 在canvas的中心画出一个红点 点图元
笔者也在学习 如何写出shader下面是自己的想法希望对大家有用其实在webGl写shader的时候,我们可以分将整体分为几个部分第一部分是 顶点着色器 1,建立顶点着色的相关代码, 2,创建顶点着色器,并将顶点着色器的代码,与创建的顶点着色器关联起来第二部分是 片元着色器 1,建立片元着色的相关代码, 2,...原创 2019-04-30 16:57:08 · 506 阅读 · 0 评论 -
webGl shader的学习记录(二)js 与(glsl语言) OpenGL ES之间如何进行交互?及其如何在js中对vertexShader与fragmentShader进行赋值
再上一个的章节之中我们知道,着色的书写分两个着色器(顶点着色器与片元着色器),从而结合成为一个可以使用的单独使用的着色器的程序。下面我们将会接触到的是,如何使用js 与(glsl语言) OpenGL ES之间进行交互。在了解两者之间如何通讯的时候,我们需要了解一些定义。这些定义出来的数据,可以是的glsl与js进行交互。attribute变量: attribute变量是只能在ver...原创 2019-04-30 17:10:19 · 1827 阅读 · 2 评论 -
webGl shader的学习记录(三):怎么样去画出来一个三角形
在这章节中我们需要绘制一个静态的三角形首先我们依旧是现需要写两个顶点着色器的素材与顶点做色器的素材。就是下面这段代码 //顶点着色器 let vertexShaderSource = ` precision mediump float; attribute vec2 a_Position; void main(){ ...原创 2019-09-19 14:35:43 · 464 阅读 · 0 评论 -
webGl shader的学习记录(四):如何与人互动绘制多个三角形。
正在这一章节中我们将会学习到如何使用鼠标创造多个三角形,从而实现互动老规矩首先我们需要先处理一下顶点着色器与片元着色器 let vertexShaderSource = ` //设置浮点数精度为中等精度 precision mediump float; // 接收顶点坐标 (x, y) attribute vec2...原创 2019-09-19 16:11:33 · 417 阅读 · 0 评论 -
webGl shader的学习记录(五):如何画线段
今天学习一下如何使用webgl画一条线段 let vertexShaderSource = ` //浮点数设置为中等精度 precision mediump float; //接收 JavaScript 传递过来的点的坐标(X, Y) attribute vec2 a_Position; // 接收canvas的尺寸。 attribute vec2...原创 2019-09-20 14:25:43 · 544 阅读 · 0 评论 -
webGl shader的学习记录(六):如何画出一个渐变色填充的三角形
在前几节中我们分别学习 点 线 三角形的学习。今天我们给三角形添加一个渐变色在这个章节中如果你跟着看了前几张的学习内容,你就很快可以理解本章的内容了。如果你并没有webgl的经验,你可以去我的博文中看我之前的文章;这一章节中其实与上创建线段与三角形并没有上面区别,唯独有两个点需要注意一下;第一需要注意的地方,在于glsl语言定义中我们需要把顶点着色器与片元着色器结合起来,请看下面的...原创 2019-09-20 17:44:53 · 1522 阅读 · 0 评论 -
webGl shader的学习记录(六):如何画出一个渐变色填充的矩形
其实将两个两个三角形合并一下,就出现了。一个矩形使用两种方式 一个是两个buffer 一个是单一的bufferglcl代码<script type="shader-source" id="vertexShader"> //浮点数设置为中等精度 precision mediump float; //接收 JavaScript 传递过来的点的坐标(X, Y) ...原创 2019-11-25 18:46:17 · 883 阅读 · 0 评论