WebGL之旅（二）向shader中传递数据(attribute和uniform)

最新推荐文章于 2023-08-17 23:24:44 发布
最新推荐文章于 2023-08-17 23:24:44 发布
阅读量4.8k 收藏 2
点赞数 2
分类专栏： WebGL 文章标签： webgl canvas 鼠标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xufeng0991/article/details/75269481
版权

一 绘制鼠标点击过的位置

当鼠标点击canvas时，记录点击位置，然后将所有点击过的位置都绘制一个红点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>WebGL</title>
</head>
<body onload="main()">
    <canvas id="container" width="1280px" height="720px"></canvas>
</body>
</html>
<script type="text/javascript" src="main.js"></script>

/**
 * 在鼠标点击的位置绘制点
 * xu.lidong@qq.com
 * */

// 顶点着色器源码
var vertexShaderSrc = `
attribute vec4 a_Position;// 接收传入位置坐标，必须声明为全局
attribute float a_PointSize;// 接收传入位置坐标，必须声明为全局，绘制单个点时才生效
void main(){
    gl_Position = a_Position;// gl_Position 内置变量，表示点的位置，必须赋值
    gl_PointSize = a_PointSize;// gl_PointSize 内置变量，表示点的大小（单位像素），可以不赋值，默认为1.0
}`;

// 片段着色器源码
var fragmentShaderSrc = `
void main(){
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);// gl_Position 内置变量，表示点的位置，必须赋值
}`;

// 初始化使用的shader
function initShader(gl) {
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);// 创建顶点着色器
    gl.shaderSource(vertexShader, vertexShaderSrc);// 绑定顶点着色器源码
    gl.compileShader(vertexShader);// 编译定点着色器

    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);// 创建片段着色器
    gl.shaderSource(fragmentShader, fragmentShaderSrc);// 绑定片段着色器源码
    gl.compileShader(fragmentShader);// 编译片段着色器

    var shaderProgram = gl.createProgram();// 创建着色器程序
    gl.attachShader(shaderProgram, vertexShader);// 指定顶点着色器
    gl.attachShader(shaderProgram, fragmentShader);// 指定片段着色色器
    gl.linkProgram(shaderProgram);// 链接程序
    gl.useProgram(shaderProgram);//使用着色器

    gl.program = shaderProgram;
}

function main() {
    var canvas = document.getElementById("container");
    var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    initShader(gl);// 初始化着色器

    var a_PointSize = gl.getAttribLocation(gl.program, "a_PointSize");// 获取shader中的a_PointSize变量
    gl.vertexAttrib1f(a_PointSize, 10.0);// 给a_PointSize赋值

    var a_Position = gl.getAttribLocation(gl.program, "a_Position");// 获取shader中的a_Position变量
    canvas.onmousedown = function (event) {
        onClick(event, gl, canvas, a_Position);
    };

    gl.clearColor(0.0, 0.0, 0.0, 1.0);// 指定清空canvas的颜色
    gl.clear(gl.COLOR_BUFFER_BIT);// 清空canvas
}
g_points = [];
function onClick(event, gl, canvas, a_Position) {
    // 记录鼠标点击过的位置
    var rect = event.target.getBoundingClientRect();
    var x = ((event.clientX - rect.left) - canvas.width * 0.5) / (canvas.width * 0.5);
    var y = (canvas.height * 0.5 - (event.clientY - rect.top)) / (canvas.height * 0.5);
    g_points.push([x, y]);

    gl.clear(gl.COLOR_BUFFER_BIT);
    for (var i = 0; i < g_points.length; i++) {
        var pos = g_points[i];
        gl.vertexAttrib4f(a_Position, pos[0], pos[1], 0.0, 1.0);
        gl.drawArrays(gl.POINTS, 0, 1);
    }
}

如图：

这里写图片描述

用这个例子是想说明，每次绘制之后，缓冲区就会被清空，如果不记录点击过的位置重新绘制，之前的点就会消失。

只有顶点才会对传给attribute变量（插值的点不会传递给attribute，插值发生在光栅化阶段，在vs之后）。attribute变量的个数有上限，值与设备相关。

二 uniform变量

uniform变量主要是向shader中传递一些与顶点无关的数据，在顶点着色器和片元着色器中都可以使用。 数量在vs和fs有各自的上限，具体多少也是与设备相关的。

示例：

/**
 * 在鼠标点击的位置绘制点
 * xu.lidong@qq.com
 * */

// 顶点着色器源码
var vertexShaderSrc = `
attribute vec4 a_Position;// 接收传入位置坐标，必须声明为全局
attribute float a_PointSize;// 接收传入位置坐标，必须声明为全局，绘制单个点时才生效
void main(){
    gl_Position = a_Position;// gl_Position 内置变量，表示点的位置，必须赋值
    gl_PointSize = a_PointSize;// gl_PointSize 内置变量，表示点的大小（单位像素），可以不赋值，默认为1.0
}`;

// 片段着色器源码
var fragmentShaderSrc = `
precision mediump float;// 设置精度
uniform vec4 u_FragColor;// 接收传入的颜色参数
void main(){
    gl_FragColor = u_FragColor;// gl_FragColor 内置变量，表示片元颜色，必须赋值
}`;

// 初始化使用的shader
function initShader(gl) {
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);// 创建顶点着色器
    gl.shaderSource(vertexShader, vertexShaderSrc);// 绑定顶点着色器源码
    gl.compileShader(vertexShader);// 编译定点着色器

    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);// 创建片段着色器
    gl.shaderSource(fragmentShader, fragmentShaderSrc);// 绑定片段着色器源码
    gl.compileShader(fragmentShader);// 编译片段着色器

    var shaderProgram = gl.createProgram();// 创建着色器程序
    gl.attachShader(shaderProgram, vertexShader);// 指定顶点着色器
    gl.attachShader(shaderProgram, fragmentShader);// 指定片段着色色器
    gl.linkProgram(shaderProgram);// 链接程序
    gl.useProgram(shaderProgram);//使用着色器

    gl.program = shaderProgram;
}

function main() {
    var canvas = document.getElementById("container");
    var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    initShader(gl);// 初始化着色器

    var a_PointSize = gl.getAttribLocation(gl.program, "a_PointSize");// 获取shader中的a_PointSize变量
    gl.vertexAttrib1f(a_PointSize, 10.0);// 给a_PointSize赋值

    var u_FragColor = gl.getUniformLocation(gl.program, "u_FragColor");// 获取shader中的u_FragColor变量
    var a_Position = gl.getAttribLocation(gl.program, "a_Position");// 获取shader中的a_Position变量
    canvas.onmousedown = function (event) {
        onClick(event, gl, canvas, a_Position, u_FragColor);
    };

    gl.clearColor(0.0, 0.0, 0.0, 1.0);// 指定清空canvas的颜色
    gl.clear(gl.COLOR_BUFFER_BIT);// 清空canvas
}
g_points = [];
g_colors = [];
function onClick(event, gl, canvas, a_Position, u_FragColor) {
    // 记录鼠标点击过的位置
    var rect = event.target.getBoundingClientRect();
    var x = ((event.clientX - rect.left) - canvas.width * 0.5) / (canvas.width * 0.5);
    var y = (canvas.height * 0.5 - (event.clientY - rect.top)) / (canvas.height * 0.5);
    g_points.push([x, y]);

    // 记录颜色
    if(x >= 0 && y >= 0) {
        g_colors.push([1.0, 0.0, 0.0, 1.0]);// 第一象限
    } else if (x < 0 && y > 0) {
            g_colors.push([0.0, 1.0, 0.0, 1.0]);// 第二象限
    } else if (x < 0 && y < 0) {
        g_colors.push([0.0, 0.5, 1.0, 1.0]);// 第三象限
    } else {
        g_colors.push([1.0, 1.0, 0.0, 1.0]);// 第四象限
    }

    gl.clear(gl.COLOR_BUFFER_BIT);
    for (var i = 0; i < g_points.length; i++) {
        var pos = g_points[i];
        var rgba = g_colors[i];

        gl.vertexAttrib4f(a_Position, pos[0], pos[1], 0.0, 1.0);
        gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3]);
        gl.drawArrays(gl.POINTS, 0, 1);
    }
}

如图， 根据鼠标点击位置的象限，分别给点设置不同的颜色：

这里写图片描述

WebGL之旅:

参考书：《WebGL编程指南》

丿寒风
关注
专栏目录
WebGL 与 WebGPU比对[4] - Uniform
weixin_45566993的博客
02-19 976
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 目录* 1. WebGL 1.0 Uniform + 1.1. 用 WebGLUniformLocation 寻址 + 1.2. 矩阵赋值用 uniformMatrix[234]fv + 1.3. 标量与向量用 uniform[1234][fi][v] + 1.4. 传递纹理
WebGl-5.通过attribute变量传值
qq_25064691的博客
09-11 249
attribute变量是一种GLSL ES变量，被用来从外部向顶点着色器内传输数据。使用attribute变量，包含一下步骤： 在顶点着色器中，声明attribute变量。 将attribute变量赋值给gl_Position变量。 向attribute变量传输数据。 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv.
webGL-类型化数组
z1067832450_的专栏
04-08 397
类型化数组的详细解释与使用
WebGl-7.通过uniform传值
qq_25064691的博客
09-11 820
向顶点着色器中传递数据是通过 attribute，向片元着色器中传递数据就需要使用 uniform声明变量，uniform变量传递的数据是一致的不变的数据例如所有的颜色应用的都是这个变量但是所有点的位置是不一样的，而 attribute传递的数据是变化的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp.
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
向glsl shader传递自定义结构体uniform数据的方法 opengl glsl
zxcasd11的博客
09-11 1903
通常情况下，我们一般都会使用默认的uniform数据类型，比如float,int,vec3等等。如果我们自定义一个结构体，该如何向glsl shader传递自定义结构体uniform数据呢？ // glsl code ... struct Material { vec3 ambient; vec3 diffuse; vec3 specular; float shininess; }; uniform Material material; ... // openg
WebGL之旅（一）canvas WebGL和shader简介
qq_44910471的博客
04-14 364
WebGL之旅（一）canvas WebGL和shader简介
藏经阁-WebGL在数据可视化中的实践.pdf
最新发布
08-26
例如，`gl.drawArrays()`函数用于绘制点，而`attribute`和`uniform`变量则用来传递顶点信息。 WebGL的一个创新是Signed Distance Field (SDF)，它存储到最近图像边缘的距离，用于在Shader中根据这个距离进行颜色...
JavaScript-WebGL2学习笔记二-从外部load shader
lee353086的专栏
03-19 978
在前一篇的基础上做了以下修改[1]shader改为从url中获取[2]去掉了四个顶点颜色的输入，改为根据顶点同左下角的距离在fragment shader中计算着色.现在有四个源文件组成这个demohtml文件&lt;html&gt; &lt;head&gt; &lt;!-- Date: 2018-3-19 Author: kagula Pr...
3WebGL shader准备工具
qq_42718845的博客
12-27 633
webgl shader
webgl--attribute相关使用
weixin_43663775的博客
03-18 652
<script id="vertexShader" type="x-shader/x-vertex"> attribute vec4 a_position; void main() { gl_PointSize = 20.0; gl_Position = a_position; } </script> - attribute 是存储限定符，是专门用于向外部导出与点位相关的对象的，这类似于es6模板语法中export 。 - vec4 是变量类型，vec4是4维矢.
【愚公系列】2023年12月 WEBGL专题-uniform变量
热门推荐
时光隧道
08-03 1万+
变量是计算机程序中的一个概念，它是存储数据的容器，可以在程序中被赋值和修改。在编程中，变量通常有一个名称和一个数据类型，用于描述变量存储的数据类型。变量可以用于存储数字、字符串、布尔值等不同类型的数据。程序中的变量可以随时被创建、读取、修改或删除，在程序运行过程中，变量的值可以随时改变。变量的引入，使得程序可以动态地存储和处理数据，增强了程序的灵活性和可扩展性。
07 WebGL使用attribute变量
现在学习也不晚
04-27 2616
我们将位置信息从javascript程序中传给顶点着色器。有两种方式可以做到这点：attribute变量和uniform变量attribute变量传输的是与顶点相关的数据uniform变量传输的是对于所有顶点都相同（或与顶点无法）的数据。思路：1.在顶点着色器中，声明attribute变量。2.将attribute变量赋值给gl_Position变量。3.向attribute变量传输数据。示例：案...
WebGl之结构数组
lonphy23t的专栏
01-22 1068
gl.bindBuffer(gl.ARRAY_BUFFER, obj.mesh['ext']); gl.vertexAttribPointer(evn['aVertexNormal'], 3, gl.FLOAT, false, (3+2)*4, part['offset']*4); gl.vertexAttribPointer(evn['aTex
WebGL 存储限定符attribute、gl.getAttribLocation、gl.vertexAttrib3f及其同族函数和矢量版本的介绍
dabaooooq的博客
08-17 517
在WebGL系统中建立了顶点着色器，WebGL就会对着色器进行解析，辨识出着色器具有的attribute变量，每个变量都具有一个存储地址，以便通过存储地址向变量传输数据。比如，当你想要向顶点着色器的a_Position变量传输数据时，首先需要向WebGL系统请求该变量的存储地址。我们使用gl.getAttribLocation（）来获取attribute变量的地址。
WebGL着色器变量(attribute、uniform和varying)
u014291990的博客
11-17 4028
WebGL着色器语言三种变量(attribute、uniform和varying) 着色器语言和C语言一样，通过一个表示特定数据类型的关键词声明一个变量，比如int num;通过int关键字声明一个整数型变量num，不过着色器语言还提供了三个关键字attribute、uniform和varying用来声明特定用途的变量。 attribute和uniform关键字的目的主要是为了javascript...
【愚公系列】2023年12月 WEBGL专题-attribute变量
时光隧道
08-03 1万+
变量是计算机程序中的一个概念，它是存储数据的容器，可以在程序中被赋值和修改。在编程中，变量通常有一个名称和一个数据类型，用于描述变量存储的数据类型。变量可以用于存储数字、字符串、布尔值等不同类型的数据。程序中的变量可以随时被创建、读取、修改或删除，在程序运行过程中，变量的值可以随时改变。变量的引入，使得程序可以动态地存储和处理数据，增强了程序的灵活性和可扩展性。
WebGL使用缓冲区向着色器一次性上传大量数据
qq_20535249的博客
07-14 360
WebGL使用缓冲区向着色器上传数据 1.建 2.绑 3.写 4.配 5.启 //使用顶点缓冲区上传顶点数据 //1.创建 let vertexBuffer = gl.createBuffer(); //2.绑定 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); //3.写入数据 let vertices = new Float32Array([ // 前 -1.0, -1.0, 1.0,
webgl使用attribute、uniform、canvas绑定事件
qq_37987033的博客
12-18 845
在webgl程序在使用attribute变量向顶点着色器传入位置，使用uniform向片元着色器传入颜色，给画布绑定事件实现动态绘制点。不足：多次调用gl.drawArrays方法，当绘制多组时，管理混乱。
TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
04-04
This error occurs when the first parameter passed to the `shaderSource()` method is not a valid WebGLShader object. The `shaderSource()` method is used to set the source code for a WebGL shader program. To resolve this error, ensure that the shader object passed as the first parameter to the `shaderSource()` method is created using the `createShader()` method of the WebGLRenderingContext. Here's an example: ``` var gl = canvas.getContext('webgl'); var vertexShader = gl.createShader(gl.VERTEX_SHADER); // Set the source code for the vertex shader gl.shaderSource(vertexShader, ` attribute vec4 a_Position; uniform mat4 u_ModelViewMatrix; void main() { gl_Position = u_ModelViewMatrix * a_Position; } `); ``` In this example, `vertexShader` is a valid WebGLShader object created using the `createShader()` method, and the source code for the shader is set using the `shaderSource()` method.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值