玩转WebGL(三)着色器

上节中,将着色器代码直接写在字符串里太麻烦了,不方便.所以要把它拆分出去.

1.拆分

在src下创建shader文件夹,新建Dot.vs和Dot.fs文件

Dot.vs:

void main() {
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // Set the vertex coordinates of the point
    gl_PointSize = 50.0;                   // Set the point size
}

Dot.fs

#ifdef GL_ES
    precision mediump float;
#endif

// 这段代码检查了是否已经定义了GL_ES宏,如果是,那就设置float类型的数值的精确度为mediump.片元着色器没有默认的float精度,所以必须修饰精度.

void main() { 
    float d = distance(gl_PointCoord, vec2(0.5,0.5)); 
    if (d<0.5){ 
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // Set the point color
    }
    else
    {
        discard;
    } 
}

在Main.ts中添加导入

import DotFs from "./shader/Dot.fs"
import DotVs from "./shader/Dot.vs"

附 全局默认精度

顶点着色器下

precision highp float;

precision highp int;

precision lowp sampler2D