NoteDeep

webgl 学习

从物理的角度澄清事情的本质

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

分解到可以快速执行的粒度

  • 看一遍mdn文档
  • 弄清楚矩形以及文本是怎么绘制出来的
  • projection matrix 投影矩阵是什么?

标准化


着色器

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
webgl基础教程
https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html

Triangle_strip

https://en.wikipedia.org/wiki/Triangle_strip
gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);

GLSL

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
vec4 四维向量
mat4 是 4x4 的矩阵
限定符: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.

projection matrix 投影矩阵






评论列表

    webgl 学习
    从物理的角度澄清事情的本质
    建立真正长远的、有价值的目标
    提问收集信息
    分解到可以快速执行的粒度
    标准化
    着色器
    正方形是如何被绘制出来的?