WebGL 使得 web 内容能使用 OpenGL ES 的 API 来渲染 2D 和 3D,在一个浏览器 canvas 标签里。
https://www.khronos.org/webgl/wiki
https://www.khronos.org/opengles/
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
https://github.com/mdn/webgl-examples
https://webglfundamentals.org
https://github.com/mrdoob/three.js/
https://github.com/thi-ng/umbrella
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context#the_shaders
A shader is a program, written using the OpenGL ES Shading Language (GLSL), that takes information about the vertices that make up a shape and generates the data needed to render the pixels onto the screen: namely, the positions of the pixels and their colors. https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html
https://en.wikipedia.org/wiki/Triangle_strip
gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
https://www.khronos.org/opengl/wiki/OpenGL_Shading_Language
// Vertex shader program
const vsSource = `
attribute vec4 aVertexPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main() {
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
}
`;
数据类型:https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)#Vectors
限定符:https://www.khronos.org/opengl/wiki/Type_Qualifier_(GLSL)
A type qualifier is used in the OpenGL Shading Language (GLSL) to modify the storage or behavior of global and locally defined variables.
The attribute qualifier 已经被移除了
The attribute qualifier is effectively equivalent to an input qualifier in vertex shaders. It cannot be used in any other shader stage. It cannot be used in interface blocks.