WebGL Uniform 输入

521 阅读2分钟

attribute对比

gluseprogram
createBuffer - 不输入任何
bindbuffer - 输入createbuffer的变量
bufferData  - array/element 特定类型的数组 gl.static_draw
getAttribLocation - location
vertexAttribPointer - location 个数 gl.float false 总长度*字节 0
enableVertexAttribArray - location
getAttribLocation - location
vertexAttribPointer
enableVertexAttribArray - location
getUniformLocation -location
uniform1fv(arr , typeArr); -location 特定类型的数组

Vec3数组

  • 数组大小与数组的使用
#define KERNEL_SIZE 32
uniform vec3 kernel[ KERNEL_SIZE ];
  • spector.js
Global
name: uniform3fv (Open help page)
duration: 0
status: Unknown
Command Arguments
0: WebGLUniformLocation - ID: 25
1: Array Length: 96
Uniforms(2)
name: kernel
size: 32
type: FLOAT_VEC3
location: WebGLUniformLocation - ID: 89
Values(0)
value: 0.0711, -0.0464, 0.0528
Values(1)
value: 0.0771, -0.0186, 0.0623
Values(2)
value: -0.0611, 0.0816, 0.0176
Values(3)
value: -0.0983, 0.0199, 0.0397
Values(4)
value: -0.0660, -0.0515, 0.0775
Values(5)
value: -0.0848, 0.0843, 0.0244
Values(6)
value: -0.0434, 0.1012, 0.0721
Values(7)
value: -0.0748, -0.0928, 0.0791
Values(8)
value: 0.0822, 0.0962, 0.0917
Values(9)
value: 0.0274, 0.1587, 0.0581
Values(10)
value: 0.1172, 0.0725, 0.1277
Values(11)
value: 0.1137, 0.0740, 0.1555
Values(12)
value: 0.1143, 0.0681, 0.1834
Values(13)
value: -0.0598, -0.0925, 0.2228
Values(14)
value: 0.1982, 0.1635, 0.0900
Values(15)
value: 0.0541, -0.1887, 0.2239
Values(16)
value: 0.2186, 0.1609, 0.1787
Values(17)
value: 0.1456, -0.2860, 0.1493
Values(18)
value: -0.2767, 0.0464, 0.2633
Values(19)
value: -0.4143, 0.0389, 0.0310
Values(20)
value: 0.2169, 0.3689, 0.1441
Values(21)
value: -0.1308, 0.4624, 0.0826
Values(22)
value: -0.0641, -0.3536, 0.3833
Values(23)
value: 0.0723, -0.2761, 0.4875
Values(24)
value: 0.0797, -0.6010, 0.0043
Values(25)
value: -0.5125, -0.1256, 0.3784
Values(26)
value: -0.4081, 0.4660, 0.3132
Values(27)
value: 0.3065, 0.6405, 0.2111
Values(28)
value: -0.0723, 0.6683, 0.4133
Values(29)
value: 0.4024, 0.5203, 0.5211
Values(30)
value: 0.3327, 0.0732, 0.8233
Values(31)
value: -0.0070, -0.4160, 0.8480
blockIndice: -1
offset: -1
arrayStride: -1
matrixStride: -1
rowMajor: false
  • 使用
float occlusion = 0.0;
for ( int i = 0; i < KERNEL_SIZE; i ++ ) {
    vec3 sampleVector = kernelMatrix * kernel[ i ];
    vec3 samplePoint = viewPosition + ( sampleVector * kernelRadius );
    vec4 samplePointNDC = cameraProjectionMatrix * vec4( samplePoint, 1.0 );
    samplePointNDC /= samplePointNDC.w;
    vec2 samplePointUv = samplePointNDC.xy * 0.5 + 0.5;
    float realDepth = getLinearDepth( samplePointUv );
    float sampleDepth = viewZToOrthographicDepth( samplePoint.z, cameraNear, cameraFar );
    float delta = sampleDepth - realDepth;
    if ( delta > minDistance && delta < maxDistance ) {
        occlusion += 1.0;
    }
}
occlusion = clamp( occlusion / float( KERNEL_SIZE ), 0.0, 1.0 );

Float数组

  • uniform1fv
    • v是指vector
uniform float arr[12];
// 传递数组的某个元素  一次传递一个
var arr0 = gl.getUniformLocation(program, "arr[0]")
// 传递数组第1个元素的值
gl.uniform1f(arr0, 0.3);
var arr1 = gl.getUniformLocation(program, "arr[1]")
// 传递数组第2个元素的值
gl.uniform1f(arr1, -0.3);

// 批量传递数组元素值
var arr =gl.getUniformLocation(program, "arr")
var typeArr = new Float32Array([
  0.6,-0.3,0.6,0.4,
  -0.8,-0.3,0.6,0.4,
  0.7,0.7,0.6,0.99,
])
gl.uniform1fv(arr , typeArr);

结构类型

// 自定义一个方向光结构体
struct DirectionalLight {
  vec3 direction;//光的方向
  vec4 color;//光的颜色
};
// 声明一个数组变量dirLight,可以存入3个方向光元素
// DirectionalLight声明数组元素的数据类型
uniform DirectionalLight dirLight[3];
// 通过WebGL API给数组中第二个方向光的颜色成员传递值
var lightColor = gl.getUniformLocation(program,'dirLight[1].color');
gl.uniform4f(lightColor, 1.0, 0.0, 1.0,0.7);

uniform矩阵是打竖写的

image.png