网页高性能图形编程（四）-WebGL颜色-使用着色器绘制多顶点颜色的三角图形 & 操作部骤-顶点着色器和片段着色器 & 着色器编译羽图像绘制-vertexAttribPointer 方法

最新推荐文章于 2023-09-04 13:59:41 发布
最新推荐文章于 2023-09-04 13:59:41 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： 可视化 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44867717/article/details/119292993
版权

第5章-WebGL颜色

01-操作步骤介绍

在这里插入图片描述

  • 颜色添加步骤

    1. 在顶点着色器中定义一个接收外部传入颜色值的属性变量a_Color和用于传输获取到的颜色值变量v_Color
    2. 在片段着色器中定义一个同一类型和名称的v_Color变量接收传顶点传入的值。
    3. 重新传入到顶点坐标和颜色值的类型化数组
    4. 将数组值传入缓存中并取出，赋值给顶点的两个变量
    5. 接收缓存值并绘制图形和颜色

  • vertexAttribPointer 方法

  • 参数说明
    第1个参数指定待分配attribute变量的存储位置
    第2个参数指定缓存区中每个顶点的分量个数（1~4）
    第3个参数类型有，无符号字节，短整数，无符号短整数，整型，无符号整型，浮点型
    第4个参数表示是否将非浮点型的数据归到[0,1][-1,1]区间
    第5个参数相邻两个顶点的字节数。默认为0
    第6个参数表示缓存区对象的偏移量（以字节为单位），attribute 变量从缓冲区中的何处开始存储

  • 案例实现

    1. 添加画布元素，并获取webGL对象，保存在变量中。
    2. 定义着色器内容，并进行附件编译。
    3. 使用缓存对象向顶点传入多个坐标数据。
    4. 根据坐标数据绘制图像。

02-着色器编译与图像绘制

  • 代码实现
实例-使用着色器绘制多顶点颜色的三角图形
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas id="cvs"
            width="200"
            height="200"
            style="border: dashed 1px red">
        你的浏览器不支持画布元素
    </canvas>
    <script type="text/javascript">
        //获取画布元素
        var cvs=document.getElementById("cvs");
        //获取到元素的上下文环境对象
        var gl=cvs.getContext('webgl');
        
        //顶点着色器变量
        var VSHADER_SOURCE =
           //使用存储限定符定义一个接受顶点坐标的变量
           'attribute vec4 a_Position;'+
           'attribute vec4 a_Color;'+
           'varying vec4 v_Color;'+
           'void main() {' +

           //定义点的坐标并转换成变量保存
           'gl_Position = a_Position; ' +
           'v_Color = a_Color; ' +
           '} ';

        //片段着色器变量
        var FSHADER_SOURCE =
           'precision mediump float;'+
           'varying vec4 v_Color;'+
           'void main() {' +
           //设置图形像素的颜色并保存
           'gl_FragColor = v_Color ;' +

           '}';

        //新建一个用于装顶点字符串的着色器对象
        var vertShader = gl.createShader(gl.VERTEX_SHADER);
        //加载保存好的顶点代码字符串变量
        gl.shaderSource(vertShader, VSHADER_SOURCE);
        //编译顶点着色器
        gl.compileShader(vertShader);

        //新建一个用于装片段字符串的着色器对象
        var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
        //加载保存好的片段代码字符串变量
        gl.shaderSource(fragShader, FSHADER_SOURCE);
        //编译片段着色器
        gl.compileShader(fragShader);

        //新建一个程序
        var shaderProgram = gl.createProgram();

        //分别附加两个已编译好的着色器对象
        gl.attachShader(shaderProgram, vertShader);
        gl.attachShader(shaderProgram, fragShader);
        
        //链接两个附件加好的着色器程序
        gl.linkProgram(shaderProgram);
        //开启程序的使用
        gl.useProgram(shaderProgram);
        //定义一个类型数组保存顶点坐标值
        var vertices = new Float32Array([
            //  x,   y,   red, green, blue
                0.0, 0.5, 1.0, 0.0, 0.0,
                -0.5, -0.5, 0.0, 1.0, 0.0,
                0.5, -0.5, 0.0, 0.0, 1.0,
            ]);
        //先创建一个缓存对象
        var vertexBuffer = gl.createBuffer();
        //说明缓存对象保存的类型
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        //写入坐标数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        //获取到数组中单个元素的字节数
        var FSIZE = vertices.BYTES_PER_ELEMENT;

        //获取到顶点着色器中变量
        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');
        //将坐标值赋值给变量
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*5, 0);
        //开启变量值的使用
        gl.enableVertexAttribArray(a_Position);

        //获取到顶点着色器中变量
        var a_Color = gl.getAttribLocation(shaderProgram, 'a_Color');
        //将坐标值赋值给变量
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE*5, FSIZE*2);
        //开启变量值的使用
        gl.enableVertexAttribArray(a_Color);

        //绘制指定位置的图形
        gl.drawArrays(gl.TRIANGLES, 0, 3); 
        
    </script>
</body>
</html>

效果-多顶点颜色

在这里插入图片描述

viceen
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebGL系列教程：WebGL基础知识
xiangzhihong8的专栏
08-03 831
使用顶点绘制的 2D 或 3D 模型称为网格,网格中的每个面都称为多边形，多边形由 3 个或更多顶点组成。要在 WebGL 渲染上下文中绘制模型，就必须使用 JavaScript 数组定义顶点和索引。例如，如果我们想创建一个位于坐标 {(5,5), (-5,5), (-5,-5)} 上的三角形，如下图。为了更好地理解指数，请考虑更复杂的模型，如 square，我们可以将正方形表示为一组两个三角形。
《交互式计算机图形学-基于WebGL的自顶向下方法》（第七版）课后答案翻译
02-18
交互式计算机图形学是一门涉及计算机图形生成与交互的学科，而基于WebGL的自顶向下方法则强调利用WebGL库在浏览器环境中实现图形渲染。WebGL是一种JavaScript API，允许在任何兼容的Web浏览器中进行硬件加速的3D图形...
WebGL着色器——数组
01-20
数组 本文是WebGL电子书的2.16节内容。 WebGL着色器和javascript语言、C语言一样 可以声明数组类型变量，不过WebGL着色器的数据仅仅支持一维数组，不支持多维数组。 声明语法结构 数组元素的数据类型 数组变量名[数组元素个数] // 声明一个数组变量fArr，数组变量fArr有100个元素，元素的数据类型是浮点数 float arr[100]; // 声明一个长度20的三维向量数组变量v3Arr vec3 v3Arr[20]; 访问数组变量元素,直接通过数组下标就可以，比如arr[0]表示数组第一个元素，arr[1]表示数组第二个元素。 gl_Position =ve
WebGL简易教程(二)：向着色器传输数据
人生海海 山山而川
08-11 3516
改进了绘制一个点的实例，讲述了WebGL中向着色器(shader)传输数据的问题。
WebGL着色器快速教程
新缸中之脑
08-11 3293
现在我们已经将着色器、所有坐标和图像加载到 GPU 中，我们已经准备好实际运行着色器程序并让它将我们的图像绘制到画布上。这告诉 WebGL 使用我们的点数组和纹理坐标数组来绘制三角形。这里的数字6意味着我们数组中的每 6 个数字定义一个三角形。每个三角形都有 3 个角，每个角（或顶点）都有一个 x 和 y 坐标。...
WebGL 入门
liubangbo的专栏
07-06 3037
webgl 是在网页上绘制和渲染三维图形的技术，可以让用户与其进行交互。我们之前学过的div+css、canvas 2d 都是专注于二维图形的，它们虽然也能模拟一部分三维效果，但它们和webgl 比起来，那就是玩具枪和AK47的差别。综上所述，webgl 绘图好麻烦啊！麻烦不是不学的理由，因为后面还有three.js 为你排忧解难。那我们为啥不直接学习three.js 呢？那是因为three.js 若是只想画个旋转的立方体还好，若是要深入学习，实现复杂的模型交互逻辑，就必须要有webgl 基础了。
WebGL简介
qq_53280805的博客
01-15 1807
webGL简介
WebGL系列教程 — 绘制点（版本2、版本3、版本4、版本5）
qq_38334677的博客
03-03 756
WebGL是一种用于在Web浏览器中绘制3D图形的API，它允许开发者使用JavaScript和OpenGL ES 2.0来创建高性能的3D图形应用程序。WebGL是HTML5标准的一部分，可以在所有现代的桌面和移动浏览器中运行，包括Chrome、Firefox、Safari、Edge和Opera。WebGL提供了一种在Web浏览器中创建交互式3D图形的方法。它是一个基于着色器的渲染引擎，可以直接在Web浏览器中渲染3D图形，而无需使用任何插件或附加组件。
WebGIS入门教程（非常详细）从零基础入门到精通，看完这一篇就够了
Python_0011的博客
09-04 8115
于是，WebGIS应用需求剧增，基于B/S架构的GIS系统越来越多地开始提供服务，并且随着RIA技术、Ajax技术等的涌现和成熟，WebGIS能够以更好的视觉效果与交互效果展现，越来越受到广大用户的关注。网络与GIS的融合成为GIS应用的催化剂，标志着GIS迎来一个新的时代，GIS真正走向大众化，其应用全面融入人们的工作与生活，并彰显出了巨大的活力。若设计简单的大众应用WebGIS，可以不使用服务器端开源GIS平台，直接访问第三方提供的数据服务、数据接口，或者存储在关系数据库中的POI数据等。
glVertexAttribPointer 到底该怎么用？
低俗公子
05-05 7121
从一些OPENGL教程中学习到这个函数的一些用法，下面给出一个最简单的绘制三角形的例子： 点击这里 查看源代码   教程地址： http://www.learnopengl.com/ create program... create shader... complie shader... attach shader link program.. delete shader...
WebGL--三角形
12-14
为了将代码与WebGL上下文关联起来，我们需要使用`gl.createShader()`和`gl.shaderSource()`来创建和加载着色器程序，接着使用`gl.compileShader()`编译它们。之后，创建一个程序并链接着色器，最后使用`gl....
WebGL--三维三角形分裂图
12-14
WebGL接口提供了用于操作图形的函数和对象，如`gl.createBuffer()`用于创建缓冲区，`gl.bindBuffer()`用于绑定缓冲区，`gl.vertexAttribPointer()`用于设置顶点属性指针，以及`gl.drawArrays()`或`gl.drawElements()...
效果超棒的Webgl模型-一堆石头
04-11
WebGL的核心是OpenGL ES 2.0的一个子集，这意味着它支持着色器语言（GLSL），能够进行复杂的像素级处理和顶点变换，从而实现丰富的视觉效果。 3D建模是通过计算机软件创建三维物体的过程。在这个“一堆石头”的模型...
webgl-matrix-demo:Javascript 与 WebGL 中的高性能矩阵乘法
06-09
WebGL 提供了一种在 Web 浏览器中通过 Javascript 访问图形卡上的高性能硬件的方法。 顶点着色器用于提供顶点信息。 对于这个演示，顶点着色器简单地通过由 Javascript 代码渲染的两个三角形的顶点。 片段着色器...
webgl基础篇视频教程-坚如磐石
11-19
webgl入门视频课程从基础开始介绍webgl技术,介绍基本的webgl渲染管线,各种常用的缓冲区的作用,以及用法,结合程序实例做到全方位的讲解；精讲三维的理论,针对三维理论中的三个矩阵变换一个坐标变换深入讲解.针对webgl核心技术逐个讲解；针对可编程管线,理论结合实践,让学员深刻的体验到shader的作用；重点围绕webgl的核心技术进行实践。
AttribPointerVertex() 与 glVertexAttribIPointer()
宁静致远...
12-01 1469
AttribPointerVertex() 与 glVertexAttribIPointer(), I 表示整形 在编程过程中遇到的一个小问题, 代码如下： GLuint index[3]{ 0, 1, 2 }; //省略... glEnableVertexAttribArray(indexN); glVertexAttribPointer(indexN, 1, GL_FLOAT,...
WebGL编程指南一：入门
Zmikoo学习之路
07-11 1765
前言 WebGL被设计出来的目的，就是在网页上创建三维的应用和用户体验，它是内嵌在浏览器中的，你不必安装插件和库就可以直接使用它。它允许Javascript在网页上显示和操作三维图形。WebGL程序由HTMLT和JavaScript文件组成。WebGL页面包含三种语言：HTML5,JavaScript,和GLSL ES,而通常GLSLES是以字符创的形式写在JavaScript中的，所以实际上We...
webgl绘制多边形
最新发布
01-20
WebGL是一种用于在Web浏览器中绘制3D图形的技术。要绘制多边形，你需要定义顶点数据，并使用WebGL的绘制函数将其绘制到画布上。 以下是一个使用WebGL绘制三角形的示例： ```javascript // 获取画布元素 var canvas = document.getElementById("myCanvas"); // 获取WebGL上下文 var gl = canvas.getContext("webgl"); // 定义顶点数据 var vertices = [ -0.5, -0.5, 0.0, // 第一个顶点的坐标 0.5, -0.5, 0.0, // 第二个顶点的坐标 0.0, 0.5, 0.0 // 第三个顶点的坐标 ]; // 创建缓冲区对象 var vertexBuffer = gl.createBuffer(); // 绑定缓冲区对象 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // 将顶点数据写入缓冲区对象 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // 获取顶点着色器代码 var vertexShaderSource = ` attribute vec3 aPosition; void main() { gl_Position = vec4(aPosition, 1.0); } `; // 创建顶点着色器对象 var vertexShader = gl.createShader(gl.VERTEX_SHADER); // 编译顶点着色器代码 gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); // 获取片元着色器代码 var fragmentShaderSource = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `; // 创建片元着色器对象 var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); // 编译片元着色器代码 gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); // 创建着色器程序对象 var program = gl.createProgram(); // 将顶点着色器和片元着色器附加到着色器程序对象上 gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // 链接着色器程序对象 gl.linkProgram(program); // 使用着色器程序对象 gl.useProgram(program); // 获取顶点位置属性的位置 var aPosition = gl.getAttribLocation(program, "aPosition"); // 启用顶点属性数组 gl.enableVertexAttribArray(aPosition); // 指定顶点属性数组的数据格式和位置 gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0); // 清空画布 gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); // 绘制三角形 gl.drawArrays(gl.TRIANGLES, 0, 3); // 刷新画面 gl.flush(); ``` 这段代码首先获取了画布元素和WebGL上下文，然后定义了三个顶点的坐标数据。接下来，创建了顶点着色器和片元着色器，并编译它们的代码。然后，创建了着色器程序对象，并将顶点着色器和片元着色器附加到着色器程序对象上。之后，启用顶点属性数组，并指定顶点属性数组的数据格式和位置。最后，清空画布，绘制三角形，并刷新画面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值