webgl学习笔记

最新推荐文章于 2024-04-16 10:14:47 发布
最新推荐文章于 2024-04-16 10:14:47 发布
阅读量285 收藏
点赞数
分类专栏： js wegbl 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhoulib__/article/details/117820351
版权
js 同时被 2 个专栏收录
45 篇文章 0 订阅
订阅专栏
wegbl
1 篇文章 0 订阅
订阅专栏

缓冲区类型
1、顶点缓冲区（ARRAY_BUFFER）
2、索引缓冲区（ELEMENT_ARRAY_BUFFER）
3、纹理
4、帧缓冲（可能包含深度缓冲区）
5、深度缓冲区
6、颜色缓冲区
7、模板缓冲区

矩阵
1、模型矩阵
2、观察矩阵
3、投影矩阵
4、视口

opengl 纯可编程式管线技术
创建main 往main插入代码 然后 编译代码 创建进程 把编译好的main放入进程 链接进程 使用进程

创建一个缓冲区

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body onload="initLoad()">
    <canvas id="myCanvas"></canvas>
</body>
<script id="vertexShader" type="x-shader/x_vertex">
    attribute vec3 v3Position;
    void main(void)
    {
        gl_Position = vec4(v3Position,1.0);
    }
</script>
<script id="fragmentShader" type="x-shader/x_fragment">
    void main(void)
    {
        gl_FragColor = vec4(0.0,1.0,1.0,1.0);
    }
</script>

<script>
    var VSHADER_SOURCE =
        "attribute vec4 v3Position;" +
        "void main() {" +
        //设置坐标
        "gl_Position = v3Position; " +
        "} ";
    var FSHADER_SOURCE =
        "void main() {" +
        //设置颜色
        "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
        "}";
    var webgl
    var programObject
    function initLoad() {
        var v3PositionIndex = 0;

        var canvas = document.getElementById('myCanvas');
        webgl = canvas.getContext('webgl');
        webgl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
        // 向显卡传递要执行的代码
        // 初始化类似创建了一个main
        // 创建顶点着色器对象
        var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
        // 创建片元着色器对象
        var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);
        // 像main函数里插入代码
        webgl.shaderSource(vertexShaderObject, VSHADER_SOURCE)
        webgl.shaderSource(fragmentShaderObject, FSHADER_SOURCE)
        // 编译代码
        webgl.compileShader(vertexShaderObject);
        webgl.compileShader(fragmentShaderObject);
        if (!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)) {
            // 获取vertexShaderObject的编译状态
            alert("error:vertexShaderObject");
        }
        if (!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)) {
            // 获取fragmentShaderObject的编译状态
            alert("error:fragmentShaderObject");
        }
        // 创建一个进程类似exe
        programObject = webgl.createProgram();
        // 向进程里传入编译好的程序
        webgl.attachShader(programObject, vertexShaderObject);
        webgl.attachShader(programObject, fragmentShaderObject);
        // 输入值
        webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");
        // 链接生成一个真正的可执行程序
        webgl.linkProgram(programObject)
        if (!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)) {
            // 获取fragmentShaderObject的编译状态
            alert("error:programObject");
        }
        console.log(webgl.getAttribLocation(programObject, 'v3Position'))
        // glsl
        // 使用这个可执行程序
        webgl.useProgram(programObject);
        // 坐标
        var jsArrayData = [
            0.0, 1.0, 0.0,
            -1.0, -1.0, 0.0,
            1.0, -1.0, 0.0
        ]
        var triangleBuffer = webgl.createBuffer(); // 创建一个缓冲区
        // 绑定
        webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
        // 给缓冲区绑定值和类型 第三个参数标识静态类型 
        webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW); // 如果经常要变化的话使用 DYNAMIC_DRAW
        // 偶尔变STREAM_DRAW 顶点缓冲区的三种类型
        // webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
        //将缓冲区对象分配给v3PositionIndex变量
        webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);
        //连接v3PositionIndex变量与分配给它的缓冲区对象
        webgl.enableVertexAttribArray(v3PositionIndex);
        // 清除指定<画布>的颜色
        webgl.clearColor(0.0, 0.0, 0.0, 1.0);

        // 清空 <canvas>
        webgl.clear(webgl.COLOR_BUFFER_BIT);



        // 要赋值的名称    类型就是几维度 变量的类型 是否规格化
        webgl.drawArrays(webgl.TRIANGLES, 0, 3);
    }


</script>

</html>


</script>

</html>

</script>

</html>
顶点缓冲区
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);
webgl.bufferData(webgl.ARRAY_BUFFER,4 * 9, webgl.STATIC_DRAW); // 字节
// 更新部分缓冲区 
webgl.bufferSubData(webgl.ARRAY_BUFFER,2,new Float32Array([]))
// 修改从第二个字节开始修改成后面的内容
索引缓冲区

假如要绘制一个矩形的话 可以通过两个三角形拼接起来

	var v3PositionIndex = 0;
   var VSHADER_SOURCE =
        "attribute vec3 v3Position;" +
        "void main() {" +
        //设置坐标
        "gl_Position = vec4(v3Position,1.0); " +
        "} ";
    var FSHADER_SOURCE =
        "void main() {" +
        //设置颜色
        "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
        "}";
let webgl = null;
let programObject  = null;
var canvas = document.getElementById('myCanvas');
webgl = canvas.getContext('webgl');
webgl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);
webgl.shaderSource(vertexShaderObject, VSHADER_SOURCE)
webgl.shaderSource(fragmentShaderObject, FSHADER_SOURCE)
webgl.compileShader(vertexShaderObject);
webgl.compileShader(fragmentShaderObject);
programObject = webgl.createProgram();
webgl.attachShader(programObject, vertexShaderObject);
webgl.attachShader(programObject, fragmentShaderObject);
webgl.linkProgram(programObject);
webgl.useProgram(programObject);
webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");
var triangleBuffer = webgl.createBuffer();
var jsArrayData2 = [
	  -0.5, 0.5, 0.0,
      0.5, 0.5, 0.0,
      0.5, -0.5, 0.0,
       -0.5, 0.5, 0.0,
       0.5, -0.5, 0.0,
      -0.5, -0.5, 0.0
]
webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData2), webgl.STATIC_DRAW);
webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);
webgl.enableVertexAttribArray(v3PositionIndex);
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
webgl.drawArrays(webgl.TRIANGLES, 0, 6);

在这里插入图片描述
然后矩形就画好了 但是 下面的那个用来绘图的float数组一个是4个字节 所有画矩形时需要向显卡传输4*3*6字节的内容（72字节）可以发现有些坐标是重复的 可以少写两个点可以节省4*3*2个字节（24字节）可以用到索引缓冲区

var jsArrayData2 = [
	  -0.5, 0.5, 0.0,
      0.5, 0.5, 0.0,
      0.5, -0.5, 0.0,
       -0.5, 0.5, 0.0,
       0.5, -0.5, 0.0,
      -0.5, -0.5, 0.0
]

用法
在这里插入图片描述
可以看出这个矩形是由两个三角形012和023构成的

var v3PositionIndex = 0;
   var VSHADER_SOURCE =
        "attribute vec3 v3Position;" +
        "void main() {" +
        //设置坐标
        "gl_Position = vec4(v3Position,1.0); " +
        "} ";
    var FSHADER_SOURCE =
        "void main() {" +
        //设置颜色
        "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
        "}";
let webgl = null;
let programObject  = null;
var canvas = document.getElementById('myCanvas');
webgl = canvas.getContext('webgl');
webgl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);
webgl.shaderSource(vertexShaderObject, VSHADER_SOURCE)
webgl.shaderSource(fragmentShaderObject, FSHADER_SOURCE)
webgl.compileShader(vertexShaderObject);
webgl.compileShader(fragmentShaderObject);
programObject = webgl.createProgram();
webgl.attachShader(programObject, vertexShaderObject);
webgl.attachShader(programObject, fragmentShaderObject);
webgl.linkProgram(programObject);
webgl.useProgram(programObject);
webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");

// 修改的内容------
// 这里是矩形的四个点
var jsArrayData2 = [
	  -0.5, 0.5, 0.0,
      0.5, 0.5, 0.0,
      0.5, -0.5, 0.0,
      -0.5, -0.5, 0.0
]
// 索引数组
var indexArray = [
	  0,1,2,
	  0,2,3
]
// ------
var triangleBuffer = webgl.createBuffer();
// 创建一个索引缓冲区
var indexBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData2), webgl.STATIC_DRAW);
// 操作索引缓冲区
// 把当前操作的缓冲区换成indexBuffer
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);
// 赋值 注意这里只能使用无符号的短整型
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexArray), webgl.STATIC_DRAW);
webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);
webgl.enableVertexAttribArray(v3PositionIndex);
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
// 这里调用绘画的方法就要变了
// webgl.drawArrays(webgl.TRIANGLES, 0, 6);
// 第一个参数绘画的类型 ，第二个参数要话几个点 几个索引就一般就几个点 第三个索引值的类型 ，第四个参数是偏移值offset 从几个索引开始绘制
webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0)

运行效果和上面一样
在这里插入图片描述
渐变的矩形

var v3PositionIndex = 0;
var inColor = 1;
var VSHADER_SOURCE =
   "precision lowp float;" +
   "attribute vec3 v3Position;" +
   "attribute vec4 inColor;" +
   "varying vec4 outColor;" +
   "void main() {" +
   //设置坐标
   "outColor= inColor;" +
   "gl_Position = vec4(v3Position,1.0); " +
   "} ";
var FSHADER_SOURCE =
   "precision lowp float;" +
   "varying vec4 outColor;" +
   "void main() {" +
   //设置颜色
   "gl_FragColor = outColor;" +
   "}";
let webgl = null;
let programObject  = null;
var canvas = document.getElementById('myCanvas');
webgl = canvas.getContext('webgl');
webgl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);
webgl.shaderSource(vertexShaderObject, VSHADER_SOURCE)
webgl.shaderSource(fragmentShaderObject, FSHADER_SOURCE)
webgl.compileShader(vertexShaderObject);
webgl.compileShader(fragmentShaderObject);
programObject = webgl.createProgram();
webgl.attachShader(programObject, vertexShaderObject);
webgl.attachShader(programObject, fragmentShaderObject);
webgl.linkProgram(programObject);
webgl.useProgram(programObject);
webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");

// 修改的内容------
// 这里是矩形的四个点
   var jsArrayData2 = [
            // x,y,z,r,g,b,a
            -0.5, 0.5, 0.0, 1.0, 0.0, 0.0, 1.0,
            0.5, 0.5, 0.0, 1.0, 1.0, 0.0, 1.0,
            0.5, -0.5, 0.0, 1.0, 0.0, 1.0, 1.0,
            -0.5, -0.5, 0.0, 1.0, 0.0, 1.0, 1.0,
        ]
// 索引数组
var indexArray = [
	  0,1,2,
	  0,2,3
]
// ------
var triangleBuffer = webgl.createBuffer();
// 创建一个索引缓冲区
var indexBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData2), webgl.STATIC_DRAW);
// 操作索引缓冲区
// 把当前操作的缓冲区换成indexBuffer
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);
// 赋值 注意这里只能使用无符号的短整型
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexArray), webgl.STATIC_DRAW);
webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 4 * 7, 0);
webgl.vertexAttribPointer(inColor, 4, webgl.FLOAT, false, 4 * 7, 3 * 4);
webgl.enableVertexAttribArray(v3PositionIndex);
webgl.enableVertexAttribArray(inColor);
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
// 这里调用绘画的方法就要变了
// webgl.drawArrays(webgl.TRIANGLES, 0, 6);
// 第一个参数绘画的类型 ，第二个参数要话几个点 几个索引就一般就几个点 第三个索引值的类型 ，第四个参数是偏移值offset 从几个索引开始绘制
webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0)

在这里插入图片描述

查看顶点着色器对象和片元着色器对象编译后的错误信息

     var canvas = document.getElementById('myCanvas');
        webgl = canvas.getContext('webgl');
 if (!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)) {
            // 获取vertexShaderObject的编译状态
            var err = webgl.getShaderInfoLog(vertexShaderObject)
            console.log(err)
            alert("error:vertexShaderObject");
        }
        if (!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)) {
            // 获取fragmentShaderObject的编译状态
            var err = webgl.getShaderInfoLog(fragmentShaderObject)
            console.log(err)
            alert("error:fragmentShaderObject");
        }
奥吼吼~~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
webgl学习笔记初学记录00
10-15
初学webgl时记录
webgl之Framebuffer
lizhan804311239的博客
09-04 431
在WebGL中，Framebuffer（帧缓冲）是一个重要的概念，用于控制渲染目标的输出位置和属性。它允许你将渲染结果存储在一个可定制的缓冲区中，而不仅仅是直接渲染到屏幕上。这在实现一些高级渲染技术，如后期处理、阴影效果和多重渲染目标等方面非常有用。
【愚公系列】2023年12月 WEBGL专题-缓冲区对象
热门推荐
时光隧道
08-03 1万+
缓冲区对象（Buffer Object）是在OpenGL中用于存储和管理数据的一种机制。缓冲区对象可以存储各种类型的数据，例如顶点、纹理坐标、颜色等。在渲染过程中，缓冲区对象中存储的数据可以被复制到渲染管线的不同阶段中，例如顶点着色器、几何着色器和片段着色器等，以完成渲染操作。相比传统的CPU访问内存，缓冲区对象的数据存储和管理更加高效，能够提高OpenGL应用的性能表现。
探索未来3D技术：OpenCASCADE.js - Web上的三维建模新星
最新发布
gitblog_00031的博客
04-16 498
探索未来3D技术：OpenCASCADE.js - Web上的三维建模新星 项目地址:https://gitcode.com/donalffons/opencascade.js 项目简介 OpenCASCADE.js 是一个基于WebGL的开源库，它将著名的Open CASCADE Technology (OCCT)引入到Web浏览器中。通过JavaScript API，开发者可以利用这个库在W...
【WEBGL】gl.enableVertexAttribArray和gl.disableVertexAttribArray的理解
qq_22849251的博客
09-13 525
webgl
WebGL笔记 （侧重理论基础向）
cky_123的博客
05-27 1060
要把Cesium，three.js这些玩明白还是要有WebGL的知识的，不然只是官方demo的ctrl-cv侠，故把学习笔记记录在此。
玩转WebGL(四)缓冲区
q641187432的专栏
02-09 1512
1.缓冲区 缓冲区是驻存于内存中的javascript对象,存储着即将推送到着色器中的attribute对象.最常用的attribute对象莫过于记录了空间中点位置信息的aVertexPosition了.缓冲区如同一个长长的队列,着色器每处理完一个顶点(或和顶点对应的其他attribute对象),缓冲区就提供下一个顶点给着色器处理. 上节中,只绘制了一个点,这节来实现一个较为复杂的例子,用webgl来画一个正方形.可以通过4次每次画一个点,画4个点,然后将这4个点连起来就成为了一个正方形,此外如果我们要一次
WebGL学习笔记（一）.rar
09-16
WebGL学习笔记（一）.rar
WebGL-Study-Notes:WebGL学习笔记
04-27
[WebGL学习笔记] 我的示例代码用于WebGL学习。 我出于个人目的保留它们。
WebGL学习教程之Three.js学习笔记(第一篇)
10-17
Three.js是一个js的开源框架，它把webgl的所有东西都封装好了，我们不再需要去了解webgl那些比较麻烦的细节，直接在此框架上进行开发，既方便，又快捷，而且很容易就能学习,感兴趣的朋友跟随小编一起看看吧
WebGL简易教程(十三)：帧缓存对象(离屏渲染)
人生海海 山山而川
12-01 1991
详细论述了WebGL中帧缓冲区技术的实现。
webGL入门知识讲解
m0_57307213的博客
06-18 6310
webgl入门知识讲解
WEBGL入门
Kerryliuyue的博客
10-03 1503
gl.clear(g.COLOR_BUFFRE_BIT)，清理绘图区域实际上在清理颜色缓冲区（color buffer），传递的gl.COLOR_BUFFER_BIT就是在告诉WebGL清理颜色缓冲区。另外还有一个方法texture2D，第一个参数是纹理数据，第二个参数是纹理坐标，这个方法就是在纹理数据中取出当前片段对应在纹理数据中位置上的数据颜色。必须注意的是，如果WebGL需要的参数是浮点类型，例如10.0。一般用attribute变量来表示一些顶点的数据，如：顶点坐标，法线，纹理坐标，顶点颜色等。
【OCC学习11】OCC的WebAssembly编译
loveoobaby的博客
08-20 1361
记录OCC的webgl案例编译过程。整个编译借助emcc编译器，cmake生成nmake file，最后使用nmake编译。
三、WebGL入门，顶点缓冲区
a23366192007的博客
01-17 6383
我们在接下来的学习中，我们主要会了解到一下一些知识点： 顶点缓冲区索引缓冲区纹理帧缓冲深度缓冲颜色缓冲模型缓冲 模型矩阵观察矩阵投影矩阵视口 本节先介绍顶点缓冲区 顶点缓冲区的使用步骤： 创建缓冲区绑定缓冲区到WebGL对象传入数据到缓冲区 1 ，createBuffer() triangleBuffer = webgl.crea
WebGL 概念和基础入门
张木期的博客
07-21 1万+
WebGL 技术出现的时间并不算短，然而尽管能够开发出拥有炫酷效果的 3D 网页却一直未能大火，现今应用的最多的也不过是 3D 网页游戏的开发。这其中很大一部分的原因便是受到网速发展的制约，在当今这个快节奏的社会中人们对于网页加载速度的忍耐度是极低的，一个 WebGL 开发的 3D 网页动辄需要三四秒的打开时间对用户而言无疑是极度不友好的。但是相信随着 5G 通信技术的发展，网络通信技术飞速发展下，WebGL 技术的明天可能会迎来新的发展契机。
封装WebGL初始化着色器函数
qq_45487080的博客
05-08 206
/gl.drawArrays(gl.TRIANGLES, 0, 1) // 三角形。// x, y, z, w齐次坐标(x/w, y/w, z/w)// 着色器： 通过程序代替固定的渲染管线，来处理图像的渲。//gl.drawArrays(gl.LINES, 0, 1) // 线。// 必须要存在 main 函数 (浮点数)// 片元着色器：像素（颜色，纹理）// 要绘制的点的坐标。// 顶点着色器：顶点理解为坐标。// 顶点着色器源码。// 片元着色器源码。
webGL学习
qq_45230033的博客
08-24 140
经过顶点着色器计算之后的坐标会被组装成。
学习webgl推荐什么
04-01
作为AI语言模型，我无法推荐具体的学习资源，但是以下是一些可以考虑的学习webgl的方法： 1. 在线课程： Coursera、Udemy、edX、Khan Academy等网站都提供了丰富的在线课程，可以帮助你学习WebGL。 2. 图书： 有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值