glsl - WebGL 在三角形内插入参考颜色
问题描述
使用 regl,我试图用 WebGL 绘制一个三角形,我可以在三角形内部的某个参考点定义一种颜色,并使其他像素的颜色成为它们到该点的距离的函数。
到目前为止,它仅在此参考点是角点之一时才有效:
从角落渐变
这是使用以下 Vert 和 Frag 着色器完成的:
vert: `
precision mediump float;
uniform float scale;
attribute vec2 position;
attribute vec3 color;
varying vec3 fcolor;
void main () {
fcolor = color;
gl_Position = vec4(scale * position, 0, 1);
}
`,
frag: `
precision mediump float;
varying vec3 fcolor;
void main () {
gl_FragColor = vec4(sqrt(fcolor), 1);
}
`,
attributes: {
position: [
[1, 0],
[0, 1],
[-1, -1]
],
color: [
[1, 0, 0],
[0, 1, 0],
[0, 0, 1]
]
},
uniforms: {
scale: regl.prop('scale')
}
这里的参考点是[1,0]、[0,1]和[-1,-1]。使用相同的三角形,我如何在 [0,0] 处放置另一个参考点,例如颜色为白色?(这将在三角形内产生一个白色的“岛”)
解决方案
您必须定义 2 个统一变量,一个用于参考点的坐标,一个用于参考点的颜色:
uniforms: {
scale: regl.prop('scale'),
refPoint: [0, 0],
refColor: [1, 1, 1]
}
通过varying
变量将顶点坐标从顶点着色器传递到片段着色器:
precision mediump float;
uniform float scale;
attribute vec2 position;
attribute vec3 color;
varying vec2 fpos;
varying vec3 fcolor;
void main()
{
fpos = position;
fcolor = color;
gl_Position = vec4(scale * position, 0, 1);
}
计算从参考点到片段着色器中插值位置的距离,通过distance
:
float dist = distance(refPoint, fpos);
根据距离对颜色进行插值mix
:
vec3 micColor = mix(refColor, fcolor, dist);
片段着色器:
precision mediump float;
uniform vec2 refPoint;
uniform vec3 refColor;
varying vec2 fpos;
varying vec3 fcolor;
void main()
{
float dist = distance(refPoint, fpos);
vec3 micColor = mix(refColor, fcolor, dist);
gl_FragColor = vec4(sqrt(micColor), 1);
}
推荐阅读
- phpmyadmin - 处理请求时出错错误代码:200 错误文本:OK(拒绝)- WAMP 服务器
- r - 使用 rvest 提取 youtube chanel 链接
- python - 如何在 Azure HDInsight 上升级 Python 版本
- c++ - QStorageInfo 不适用于只读 rootfs
- cucumber-java - 功能文件(Cucumber Java-Maven)中的独立与依赖场景?
- go - 如何从 Jenkins 中检索 JobId
- django - Django 查询集验证字段是否存在
- node.js - Sequelize limit 中断请求
- python - 跨子类共享类 int
- docker - Docker 容器间通信