HTML随笔

知识点

• padding: 50px; //内边距
  
• JS/CSS 选项卡 – 设置默认选项
• 在键盘上按一个键
• WebGL 入门-光源和投影
• 非常棒的webgl博客
• 由深度决定的前后关系，根据远近进行放大和缩小，这些都必须提前进行运算得出结果。为了模拟三维空间，将三维空间的情报向二维的情报进行转换，需要三个坐标变换。分别是模型变换，视图变换和投影变换，将这些变换进行组合，最终决定描画的图形内容。

<script id="vshader" type="x-shader/x-vertex">
    ※顶点着色器
</script>
 
<script id="fshader" type="x-shader/x-fragment">
    ※片段着色器
</script>

• OpenGL和WebGL当然都是可以设定遮挡剔除的。如果设定了遮挡剔除，就只会绘制外侧看得见的多边形，内侧的所有多边形就都不再进行绘制了。顺时针连接顶点的多边形是在外侧，而逆时针连接的多边形在内侧。所以，在定义顶点情报的时候，要特别注意。如果设定了遮挡剔除，本来应该在某个位置有个多边形，但是根本就不会进行绘制。
• WebGL里有顶点着色器和片段着色器两种着色器。无论哪一种都可以使用GLSL来编写。
• attribute修饰符是用来接收不同顶点传来的不同信息。使用uniform修饰符的话，可以传递对于所有顶点一致的处理的情报。
• vec表示的是向量，**的部分是一个2～4的数字，vec2就代表一个2维的向量。
  mat表示的是方阵，和向量一样，可以指定的范围也是2～4，如果是mat3的话，就表示一个3x3的方阵。
  另外，int是整型，float是浮点型，bool是布尔型，这些都跟C语言中是一个意思。vec和mat中的元素，都是浮点型。

attribute vec3 position;
uniform mat4 mvpMatrix;
 
void main(void) {
    gl_Position = mvpMatrix * position;
}

• varying修饰符，是顶点着色器和片段着色器之间的桥梁。
  要从顶点着色器将数据传到片段着色器，需要使用varying修饰符所定义的变量。
• 矩阵库
• vec4是所有的参数都是1.0的向量，颜色是白色［红，绿，蓝，不透明度的各元素都是最大＝白色］。
• 学习WebGL之基本光照
• 【WebGL】4.光源
• webgl素材
• WebGL 入门-光源和投影
• WebGL绘制基本图形–线
• 郭龙邦技术博客自定义着色器程序

• http://www.wjceo.com/blog/webgl/2018-03-04/76.html