通用js:

let canvas = document.getElementById('webgl')

canvas.width = window.innerWidth

canvas.height = window.innerHeight

let ctx = canvas.getContext('webgl')

attribute：

范围: 只适用于vertexShader，将js代码中的数据传递给vertexShader。

使用方式：声明一个变量a_Position

let vertexSource = `

attribute vec2 a_Position;

void main() {

gl_Position = vec4(a_Position, 0.0, 1.0);

gl_PointSize = 10.0;

}

`

//获取变量内存位置

let aPosition = ctx.getAttribLocation(ctx.program, "a_Position")

//以为就是1f，二维就是2f，三维就是3f...，给变量内存位置设置赋值

ctx.vertexAttrib2f(aPosition, x, y)

uniform

范围：适用于vertexShader或fragmentShader，将js代码中的数据传递给vertexShader或fragmentShader

注意：在使用uniform时必须在前一行添加precision mediump float;确定精度

使用方式：声明一个变量u_color

let fragmentSource = `

precision mediump float;

uniform vec3 u_color;

void main (){

gl_FragColor = vec4(u_color, 1.0);

}

`

//设置颜色

let color = ctx.getUniformLocation(ctx.program, "u_color")

ctx.uniform3f(color, 1.0, 0.0, 0.0)

varying

范围：是将vertexShader中的数据传给fragmentShader，而无法直接通过js进行数据传递

注意：使用时需要两边同时varying声明一个相同变量名称的变量，用于数据传递

使用方式：

//创建顶点资源和像素资源（颜色）

let vertexSource = `

attribute vec2 a_Position;

attribute vec3 a_color;

varying vec3 u_color;

void main() {

u_color = a_color;

gl_Position = vec4(a_Position, 0.0, 1.0);

gl_PointSize = 10.0;

}

`

let fragmentSource = `

precision mediump float;

varying vec3 u_color;

void main (){

gl_FragColor = vec4(u_color, 1.0);

}

`

let a_color = ctx.getAttribLocation(ctx.program, "a_color")

ctx.vertexAttrib3f(a_color, 1.0, 0.0, 0.0)

流程：

webgl-attribute、uniform、varying三者的区别相关推荐

我先了解一下博客园创建随笔/文章/日记的过程与三者的区别(隐私等级,是否审核等)...
我先了解一下博客园创建随笔/文章/日记的过程与三者的区别(隐私等级,是否审核等) 转载于:https://www.cnblogs.com/Totooria-Hyperion/p/5260289.htm ...
学习数据科学、机器学习与AI没有多大交集，一文告诉你三者最大区别
翻译 | AI科技大本营参与 | Shawn 编辑 | Donna ［AI科技大本营导读］我们常常提及数据科学.机器学习和人工智能,也有一个整体的概念.但是,如果要清晰地说出三者的定义分别是什么,区 ...
C++ 在继承中虚函数、纯虚函数、普通函数，三者的区别
C++ 在继承中虚函数.纯虚函数.普通函数,三者的区别 1.虚函数(impure virtual) C++的虚函数主要作用是"运行时多态",父类中提供虚函数的实现,为子类提供默认的 ...
【c++】27.事件驱动、IO复用、sellect、poll、epoll三者的区别
一.事件驱动的理解: 1.要理解事件驱动和程序,就需要与非事件驱动的程序进行比较.实际上,现代的程序大多是事件驱动的,比如多线程的程序,肯定是事件驱动的.早期则存在许多非事件驱动的程序,这样的程序,在 ...
转框架页有Frame、Iframe、Frameset 3个标记，初学者容易将三者混淆，下面分别讲解三者的区别。...
框架页有Frame.Iframe.Frameset 3个标记,初学者容易将三者混淆,下面分别讲解三者的区别. 10.4.1 Frameset与Frame的区别首先讲解Frameset与Frame之 ...
Java基础之String，StringBuilder，StringBuffer三者的区别
Java基础之String,StringBuilder,StringBuffer三者的区别目录运行速度方面线程安全方面小结 1. 运行速度方面运行速度,在这方面运行速度快慢为:StringB ...
mysql点击execute_MySQL execute、executeUpdate、executeQuery三者的区别
execute.executeUpdate.executeQuery三者的区别(及返回值) 一.boolean execute(String sql) 允许执行查询语句.更新语句.DDL语句. 返回值 ...
浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别
举例浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别 demo Dom结构: <di ...
Convert.Int32、(int)和int.Parse三者的区别
今天去面试,碰到这样一道题目,回来查了下答案~! Convert.ToInt32.(int)和int.Parse三者的区别: 前者适合将object类类型转换成int类型,如Convert.ToInt ...

webgl-attribute、uniform、varying三者的区别

attribute：

uniform

varying

webgl-attribute、uniform、varying三者的区别相关推荐

最新文章

热门文章