片元屏幕坐标gl_FragCoord.xy

这节课给大家介绍下片元的屏幕坐标gl_FragCoord.xy。

知识回顾：片元着色器

顶点数据经过WebGL渲染管线图元装配和光栅化处理以后，会得到模型对应的一个个片元。

比如一个三角形，经过光栅化处理，会获取到一个由片元拼出来一个三角形图案，这些片元，可以通过着色器代码设置像素颜色值gl_FragColor = 片元颜色。

// 片元着色器代码
const fragmentShader = `
void main() {
    //所有片元都是同一种颜色 
    gl_FragColor = vec4(0.0,1.0,1.0,1.0);
}
`

gl_FragCoord.xy片元屏幕坐标

gl_FragCoord和gl_FragColor、gl_Position一样，都是着色器语言GLSL ES的内置变量，不用声明，可以直接使用。

gl_FragCoord是一个四维向量vec4,本节课只介绍前面两个x、y分量gl_FragCoord.xy，gl_FragCoord.x表示片元x坐标，gl_FragCoord.y表示片元的y坐标，这里提醒大家，一定注意gl_FragCoord.xy的坐标系，不是平时你threejs代码里面的xyz世界坐标系。

gl_FragCoord.xy坐标系的坐标原点，位于threejs canvas画布的左下角，x轴水平向右，y轴竖直向上，单位是像素px。

比如咱们代码中canvas画布的宽高度是500px、500px，右上角的坐标就是(500,500)，中间就是(250,250)

根据片元屏幕坐标设置颜色

canvas画布总宽800px的情况下，以中间作为分界点，左半部分片元红色，右半部分片元蓝色。

//根据片元的x坐标，来设置片元的像素值
if(gl_FragCoord.x < 400.0){
  gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}else {
  gl_FragColor = vec4(0.0,0.0,1.0,1.0);
}

canvas画布总高600px的情况下，以中间作为分界点，上半部分片元红色，下半部分片元蓝色。

//根据片元的x坐标，来设置片元的像素值
if(gl_FragCoord.y < 300.0){
  gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}else {
  gl_FragColor = vec4(0.0,0.0,1.0,1.0);
}

根据片元x坐标，设置一个渐变色。

// 片元沿着x方向渐变
 gl_FragColor = vec4(gl_FragCoord.x/800.0*1.0,0.0,0.0,1.0);

discard舍弃部分片元

discard是着色器语言GLSL ES的一个关键字，用来控制片元着色器功能单元，舍弃某个片元。

if(gl_FragCoord.x < 400.0){
  // 符合条件片元保留，并设置颜色
  gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}else {
  discard;//不符合条件片元直接舍弃掉
}