gl attribute和uniform的用法

最新推荐文章于 2024-10-14 16:26:29 发布
转载 最新推荐文章于 2024-10-14 16:26:29 发布 · 213 阅读 · 1
文章标签：

#javascript #c/c++ #ViewUI

gl attribute和uniform的用法

http://blog.youkuaiyun.com/jackers679/article/details/6848085


attribute
    attribute变量是只能在vertex shader中使用的变量。（它不能在fragment shader中声明attribute变量，也不能被fragment shader中使用）

    一般用attribute变量来表示一些顶点的数据，如：顶点坐标，法线，纹理坐标，顶点颜色等
    在application中，一般用函数glBindAttribLocation（）来绑定每个attribute变量的位置，然后用函数glVertexAttribPointer（）为每个attribute变量赋值。
    
    glsl里面定义属性
    Line 16:     attribute vec3 aVertexPosition;
    Line 22:         gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    
    javascript使用属性
        shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    Line 97:         gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
    Line 153:         gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    Line 160:         gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    
uniform
    uniform变量就像是C语言里面的常量（const ），它不能被shader程序修改。（shader只能用，不能改）
    如果uniform变量在vertex和fragment两者之间声明方式完全一样，则它可以在vertex和fragment共享使用。（相当于一个被vertex和fragment shader共享的全局变量）
    
    uniform变量一般用来表示：变换矩阵，材质，光照参数和颜色等信息。
    
    glsl里
    Line 18:     uniform mat4 uMVMatrix;
    Line 22:         gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    
    javascript里
    Line 100:         shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
    Line 109:         gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
    
3.varying变量

varying变量是vertex和fragment shader之间做数据传递用的。一般vertex shader修改varying变量的值，然后fragment shader使用该varying变量的值。因此varying变量在vertex和fragment shader二者之间的声明必须是一致的。application不能使用此变量。   

WebGL uniform变量、gl.getUniformLocation、gl.uniform4f及其同族函数相关介绍
dabaooooq的博客
08-23 725
着色器将 uniform 变量 u_FragColor 赋值给 gl_FragColor，后者直接决定点的颜色，向 uniform 变量传数据的方式与向 attribute 变量传数据相似：首先获取变量的存储地址，然后在JS程序中按照地址将数据传递过去。
【我的OpenGL学习进阶之旅】讲一讲GL_TEXTURE_2D和GL_TEXTURE_EXTERNAL_OES的区别
字节卷动
07-25 791
提供了对标准2D图像的处理能力，可以存储静态的贴图图像或者帧缓冲区的渲染结果。其使用二维的纹理坐标系，通过将纹理坐标映射到纹理图像上的对应位置，可以实现纹理贴图、纹理过滤、纹理环绕等操作。纹理的特点使用二维纹理坐标系进行操作；使用函数加载纹理数据；通过纹理过滤和纹理环绕等方式进行纹理的采样和处理；是 OpenGL 中的一个纹理目标类型，用于表示二维纹理。纹理是图形处理中的重要元素，用于将图像映射到几何体表面，从而实现复杂的图形效果。
WebGL着色器变量(attribute、uniform和varying)
u014291990的博客
11-17 4265
WebGL着色器语言三种变量(attribute、uniform和varying) 着色器语言和C语言一样，通过一个表示特定数据类型的关键词声明一个变量，比如int num;通过int关键字声明一个整数型变量num，不过着色器语言还提供了三个关键字attribute、uniform和varying用来声明特定用途的变量。 attribute和uniform关键字的目的主要是为了javascript...
webgl使用attribute、uniform、canvas绑定事件
qq_37987033的博客
12-18 957
在webgl程序在使用attribute变量向顶点着色器传入位置，使用uniform向片元着色器传入颜色，给画布绑定事件实现动态绘制点。不足：多次调用gl.drawArrays方法，当绘制多组时，管理混乱。
gl.uniform4f P60 将数据传给loaction参数指定的uniform变量
weixin_30955341的博客
12-07 205
参数　　loaction　　指定将要修改的uniform变量的存储位置 　　　　v0　　指定填充uniform变量第一个分量的值 　　　　v1　　指定填充uniform变量第二个分量的值 　　　　v2　　指定填充uniform变量第三个分量的值 　　　　v3　　指定填充uniform变量第四个分量的值 gl.uniform4f(location,v0,v1,v2,v3) v...
WebGL入门(四)-在JavaScript程序通过uniform变量向片元着色器传值
点燃火柴的博客
03-05 2331
在JavaScript程序通过uniform变量向片元着色器传值1.demo效果2.相关知识点2.1 着色器中的attribute变量2.2 gl.getAttribLocation()方法2.3 gl.vertexAttrib3f()方法2.4 gl.vertexAttrib3f()的同族函数2.5 attribute变量使用流程介绍3.demo代码 1.demo效果 如上图，这个demo和上一个效果一样，但是实现时却不同，这一次在JavaScript程序中通过 gl.getAttribLocatio
public initializer(sceneGl: WebGLRenderingContext, sceneProgram: WebGLProgram, sceneOption: FisheyeSceneOption) { this.applyOptions(sceneGl, sceneProgram, sceneOption); const gl = this.gl; gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); const shaderProgram = this.program; const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0]), gl.STATIC_DRAW); const xyLocation = gl.getAttribLocation(shaderProgram, 'xy'); gl.vertexAttribPointer(xyLocation, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(xyLocation); const scaleLocation = gl.getUniformLocation(shaderProgram, 'scale'); const scaleFactor = [1, 1]; gl.uniform2fv(scaleLocation, scaleFactor); const translateLocation = gl.getUniformLocation(shaderProgram, 'translate'); const translateFactor = [0, 0]; gl.uniform2fv(translateLocation, translateFactor); const tempStrengthLocation = gl.getUniformLocation(shaderProgram, 'strength'); if (!tempStrengthLocation) return; this.strengthLocation = tempStrengthLocation; gl.uniform1f(this.strengthLocation, this.strengthValue); const texture = gl.createTexture(); const enableMipMap = this.options.isAntialias ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR; gl.bindTexture(gl.TEXTURE_2D, texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, enableMipMap); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); }
06-26
获取uniform位置失败）-将顶点缓冲区的创建和绑定分离到单独的方法中，但这里为了保持原结构，我们仍然在初始化函数中完成-添加错误处理由于原始代码片段是TypeScript，我们使用TypeScript语法，但也可以根据需要...
import { SceneOption, Scene, SCENE } from '../gl-renderer/types' import Texture from '../texture' // 目前没有额外配置项，先预留配置项类型，方便后续扩展 export type WebcodecNormalSceneOption = SceneOption<object> /** * @description: 顶点着色器 * @return {*} */ export const vertexShaderSource = ` attribute vec2 xy; uniform vec2 scale; uniform vec2 translate; varying highp vec2 uv; void main(void) { vec2 scaledPosition = xy * scale+ translate; gl_Position = vec4(scaledPosition, 0.0, 1.0); // Map vertex coordinates (-1 to +1) to UV coordinates (0 to 1). // UV coordinates are Y-flipped relative to vertex coordinates. uv = vec2((1.0 + xy.x) / 2.0, (1.0 - xy.y) / 2.0); } ` /** * @description: 片元着色器 * @return {*} */ export const fragmentShaderSource = ` varying highp vec2 uv; uniform sampler2D texture; void main(void) { gl_FragColor = texture2D(texture, uv); } ` export class WebcodecNormalScene extends Scene { static sceneType = SCENE.WEBCODEC_NORMAL vertexShaderSource = vertexShaderSource fragmentShaderSource = fragmentShaderSource gl!: WebGLRenderingContext program!: WebGLProgram options!: WebcodecNormalSceneOption yTexture!: Texture uTexture!: Texture vTexture!: Texture get sceneType() { return WebcodecNormalScene.sceneType } private applyOptions(sceneGl: WebGLRenderingContext, sceneProgram: WebGLProgram, sceneOption: WebcodecNormalSceneOption) { this.gl = sceneGl this.program = sceneProgram this.options = sceneOption } public initializer(sceneGl: WebGLRenderingContext, sceneProgram: WebGLProgram, sceneOption: WebcodecNormalSceneOption) { this.applyOptions(sceneGl, sceneProgram, sceneOption) const gl = this.gl const shaderProgram = this.program const vertexBuffer = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer) gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0]), gl.STATIC_DRAW) const xyLocation = gl.getAttribLocation(shaderProgram, 'xy') gl.vertexAttribPointer(xyLocation, 2, gl.FLOAT, false, 0, 0) gl.enableVertexAttribArray(xyLocation) const scaleLocation = gl.getUniformLocation(shaderProgram, 'scale') const scaleFactor = [1, 1] // 缩放因子为 1.5x gl.uniform2fv(scaleLocation, scaleFactor) const translateLocation = gl.getUniformLocation(shaderProgram, 'translate') const translateFactor = [0, 0] // 平移因子为 0，0 gl.uniform2fv(translateLocation, translateFactor) //纹理 const texture = gl.createTexture() const enableMipMap = this.options.isAntialias ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR gl.bindTexture(gl.TEXTURE_2D, texture) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, enableMipMap) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE) gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE) } public render(frameData: VideoFrame) { const gl = this.gl gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, frameData) this.options.isAntialias && gl.generateMipmap(gl.TEXTURE_2D) // Configure and clear the drawing area. gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight) gl.clearColor(0.0, 0.0, 0.0, 0.0) gl.clear(gl.COLOR_BUFFER_BIT) gl.drawArrays(gl.TRIANGLE_FAN, 0, 4) } public clear() { const gl = this.gl gl.clearColor(0.0, 0.0, 0.0, 0.0) gl.clear(gl.COLOR_BUFFER_BIT) gl.getExtension('WEBGL_lose_context')?.loseContext() } } 结合这段代码说一下优化的方式
最新发布
07-05
5. 纹理压缩格式（如ASTC）在WebGL中的使用方法和兼容性如何？ [^1]: WebGL和WebAssembly为高性能Web应用提供了底层支持。 [^2]: WebTransport+WebCodecs+WASM架构中需要注意避免数据拷贝带来的性能损耗。针对同时...
请帮我检查下面代码为什么没有绘制图形const VSHADER_SOURCE = ` attribute vec4 aPosition; // 接收纹理坐标 attribute vec2 a_TexCoord; varying vec2 v_TexCoord; void main() { gl_Position = aPosition; v_TexCoord = a_TexCoord; }`; const FSHADER_SOURCE=`precision highp float; uniform vec2 uResolution; uniform sampler2D u_Sampler; // 接收纹理坐标 varying vec2 v_TexCoord; void main() { vec2 center = vec2(0.5, 0.5); // 圆心 float radius = 0.2; vec2 fragCoord = gl_FragCoord.xy / uResolution; // 归一化坐标 // 计算宽高比 使圆保持正圆 float aspectRatio = uResolution.x / uResolution.y; // 根据宽高比调整坐标 vec2 scaledCoord = vec2((fragCoord.x - center.x) * aspectRatio, fragCoord.y - center.y); float distance = length(scaledCoord); if (distance > radius) discard; gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色 // texture2D 用于抽取纹理图片中纹素的颜色 gl_FragColor = texture2D(u_Sampler, v_TexCoord); }`; const program = initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE); // 设置顶点数据（矩形覆盖整个画布） const vertices = new Float32Array([ -1.0, 1.0, // 左上角 -1.0, -1.0, // 左下角 1.0, 1.0, // 右上角 1.0, -1.0 // 右下角 ]); const FSIZE = vertices.BYTES_PER_ELEMENT // 创建并绑定顶点缓冲区 const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // 获取并启用顶点属性 const aPosition = gl.getAttribLocation(program, "aPosition"); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); // 设置纹理坐标 const a_TexCoord = gl.getAttribLocation(program, 'a_TexCoord') // 注意步进参数、偏移参数设置 gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2) gl.enableVertexAttribArray(a_TexCoord) // 设置分辨率统一变量 const uResolution = gl.getUniformLocation(program, 'uResolution'); gl.uniform2f(uResolution, canvas.width, canvas.height); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); // 创建纹理 const texture = gl.createTexture();
03-27
用户使用gl.drawArrays方法时，模式是否正确设置为TRIANGLE_STRIP，顶点数量是否足够。TRIANGLE_STRIP需要至少3个顶点来绘制第一个三角形，之后每增加一个顶点就绘制一个新的三角形，所以顶点数量不足会导致没有图形...
高级OpenGL之Uniform缓冲对象（高级GLSL）
dtwd886的博客
10-11 702
使用Uniform缓冲对象画出四个不同颜色的立方体： #include <iostream> #include <glad/glad.h> #include <GLFW/glfw3.h> #include <fstream> #include <sstream> #include <glm/glm.hpp> #includ...
webgl-attribute、uniform、varying三者的区别
以爱护甲,爱满枫林。
04-11 1121
通用js:范围: 只适用于vertexShader，将js代码中的数据传递给vertexShader。使用方式：声明一个变量a_Position//获取变量内存位置let aPosition = ctx.getAttribLocation(ctx.program, "a_Position")//以为就是1f，二维就是2f，三维就是3f...，给变量内存位置设置赋值ctx.vertexAttrib2f(aPosition, x, y)范围：适用于vertexShader或fragmentShader，将js代
__attribute__ ((__pure__))
RToax
01-21 1683
#include <stdio.h> #if __GNUC_PREREQ (2,96) # define _pure __attribute__ ((__pure__)) #else # define _pure #endif //这个函数这个函数没有副作用，当不需要它的返回值时，它可以被优化掉， int _pure func1() { printf("func1 pure t...
uniform
u014267091的博客
08-23 618
Shader 运行的时候，彼此之间的数据不共享。VS 的输入不同（顶点数据不同），但是程序相同。如果VS 计算的数据需要同一个数据的时候，此时可以采用 uniform 变量。uniform 数据只有一份，数据 core共享。Attribute 数据有顶点个数份 ，不可共享。
WebGl 使用uniform变量动态修改点的颜色
dlmyrt的博客
10-14 679
在WebGL中，uniform变量用于在顶点着色器和片元着色器之间传递全局状态信息，这些信息在渲染过程中不会随着顶点的变化而变化。uniform变量可以用来设置变换矩阵、光照参数、材料属性等。由于它们在整个渲染过程中共享，因此可以被所有使用该着色器程序的顶点和片元访问。
(转)shader三种变量类型（uniform，attribute和varying）
luyuncsd123的专栏
05-06 9845
(转)shader三种变量类型（uniform，attribute和varying）  举报 阅uniform变量是外部application程序传递给（vertex和fragment）shader的变量。因此它是application通过函数glUniform**（）函数赋值的。在（vertex和fragment）shader程序内部，uniform变量就像是C语言里面的常量（const
【愚公系列】2023年12月 WEBGL专题-attribute变量
热门推荐
时光隧道
08-03 1万+
变量是计算机程序中的一个概念，它是存储数据的容器，可以在程序中被赋值和修改。在编程中，变量通常有一个名称和一个数据类型，用于描述变量存储的数据类型。变量可以用于存储数字、字符串、布尔值等不同类型的数据。程序中的变量可以随时被创建、读取、修改或删除，在程序运行过程中，变量的值可以随时改变。变量的引入，使得程序可以动态地存储和处理数据，增强了程序的灵活性和可扩展性。
uniform，attribute和varying
hyl999的专栏
03-01 1465
GLSL 三种变量类型（uniform，attribute和varying）理解 1.uniform变量 uniform变量是外部程序传递给（vertex和fragment）shader的变量。因此它是application通过函数glUniform**（）函数赋值的。在（vertex和fragment）shader程序内部，uniform变量就像是C语言里面的常量（const ），它不能被shader程序修改。（shader只能用，不能改） 如果uniform变量在vertex和fragme
threejs examples 学习
xiongzhengxiang的专栏
11-01 1636
threejs 自带例子学习
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值