再来看看第二个例子,rotating_cube
我们再来看看这个例子的代码:
先来看看shader部分:
const vertexShaderGLSL = `#version 450
layout(set = 0, binding = 0) uniform Uniforms {
mat4 modelViewProjectionMatrix;
} uniforms;
layout(location = 0) in vec4 position;
layout(location = 1) in vec4 color;
layout(location = 0) out vec4 fragColor;
void main() {
gl_Position = uniforms.modelViewProjectionMatrix * position;
fragColor = color;
}
`
const fragmentShaderGLSL = `#version 450
layout(location = 0) in vec4 fragColor;
layout(location = 0) out vec4 outColor;
void main() {
outColor = fragColor;
}
`
首先来看看Vertex Shader,layout里第一个位置(location = 0)被设置成了position,第二个位置(location = 1)放了颜色信息,
输出给下一个stage,也就是fragment shader的为输入的颜色 layout(location = 0) out vec4 fragColor;, modelViewProjectionMatrix 被设置在一个uniform中,注意这里有个神奇的地方,在glsl450里是没有set这个关键字的,如果设置的是uniform,一般用的是binding和offset的组合,set关键组属于vulkan的语法,要注意区别。将modelViewProjectionMatrix放置在uniform的第一个位置。
Fragment Shader接收Vertex传来的fragColor,然后输出颜色。
定义vertex的几何数据:
const cubeVerticesArray = new Float32Array([
// float4 position, float4 color
1, -1, 1, 1, 1, 0, 1, 1,
-1, -1, 1, 1, 0, 0, 1, 1,
-1, -1, -1, 1, 0, 0, 0, 1,
1, -1, -1, 1, 1, 0, 0, 1,
1, -1, 1, 1, 1, 0, 1, 1,
-1, -1, -1, 1, 0, 0, 0, 1,
1, 1, 1, 1, 1, 1, 1, 1,
1, -1, 1, 1, 1, 0, 1, 1,
1, -1, -1, 1, 1, 0, 0, 1,
1, 1, -1, 1, 1, 1, 0, 1,
1, 1, 1, 1, 1, 1, 1, 1,
1, -1, -1, 1, 1, 0, 0, 1,
-1, 1, 1, 1, 0, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1,
1, 1, -1, 1, 1, 1, 0, 1,
-1, 1, -1, 1, 0,