GLSL线型&x2014；变色

我正试着把下面钢笔的颜色改成黑白。我很难找到正确的值。有人能帮我找到解决办法吗

以下是我认为应该更改的html部分（尽管我可能错了）：

float noiseHue=噪声（vec3（randIndexHue，randIndexHue，time））；
浮动色调=混合（0.111,0.138，randIndexHue+（noiseHue*0.5））；
vec4颗粒=添加颗粒（ouv，时间，0.15）；
vec3颜色=HSLToRGB（vec3（色调，1.0,0.5））；
vec3 bgColor=HSLToRGB（vec3（0.772，混合（0.75，1.0，鼠标间距），混合（0.1，0.25，鼠标间距））；
float val=dline*（鼠标位置*0.5+0.5）；

黑色表示RGB（0,0,0），白色表示RGB（1,1,1）。您只需设置

color=vec3（1.0）

和

bgColor=vec3（0.0）

（而不是

HSLToRGB

）：

vec3 color=vec3（1.0）；
vec3-bgColor=vec3（0.0）；
float val=dline*（鼠标位置*0.5+0.5）；
vec3反照率=混合（bgColor，color，val）；
gl_FragColor=vec4（反照率，1.0）+颗粒；

请参见示例：

//为contenair（webGL 3D场景）创建变量，以绑定到着色器和计时器中
var容器；
摄像机、场景、渲染器；
var制服；
var startTime；
var cols=50。；
var行=50.0；
init（）//初始场景
制作动画（）//更新
函数init（）{
//获取上下文
container=document.getElementById（'container'）；
//创建THREE.JS场景和计时器
startTime=Date.now（）；
摄像头=新的三个摄像头（）；
摄像机位置z=1；
场景=新的三个。场景（）；
//创建一个简单的平面
var几何=新的三点几何（16,9）；
//创建提供所有GLSL绑定的统一表
制服={
时间：{type:“f”，值：1.0}，
解析：{type:“v2”，值：new THREE.Vector2（）}，
colsrows:{type:“v2”，值：new THREE.Vector2（）}，
鼠标：{type:“v2”，值：new THREE.Vector2（）}
};
//创建三个.JS材质
var material=新的三个着色器材质（{
//将着色器和制服设置为材质
制服：制服，
vertexShader:document.getElementById（'vertexShader'）.textContent，
fragmentShader:document.getElementById（'fragmentShader'）.textContent
} );
//创建网格，将其添加到场景中
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
//创建渲染器并将其添加到DOM
renderer=new THREE.WebGLRenderer（）；
container.appendChild（renderer.domeElement）；
//检查窗口大小，这将为我们提供适当的分辨率值绑定
onWindowResize（）；
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（事件）{
container.style.height=window.innerHeight+“px”；
container.style.width=window.innerWidth+“px”；
画布宽度=container.offsetWidth；
画布高度=容器。视线外；
//将新大小值发送到着色器并调整窗口大小
.resolution.value.x=画布宽度；
converage.resolution.value.y=画布高度；
//var res=画布宽度/cols；
//行=画布高度/分辨率；
colsrows.value.x=cols；
colsrows.value.y=行；//行；
渲染器.setSize（画布宽度、画布高度）；
}
函数animate（）{
render（）；
请求动画帧（动画）；
}
函数render（）{
var currentTime=Date.now（）；
var elaspedSeconds=（当前时间-开始时间）/1000.0；
var maxTime=4.0；
var normTime=（elaspedSeconds%maxTime）/maxTime；
uniforms.time.value=elaspedSeconds*1.0；
渲染器。渲染（场景、摄影机）；
}
功能移动（ev）{
mx=ev.clientX
my=ev.clientY；
//console.log（mx+，“+my）；
uniforms.mouse.value.x=mx；
uniforms.mouse.value.y=my；
}
document.addEventListener（'mousemove'，move）

html，正文{
保证金：0；
身高：100%；
背景：#1A1A；
}
帆布{
显示：块；
光标：无；
}
#容器{
背景：黑色；
颜色：白色；
保证金：自动；
宽度：500px；
高度：500px；
}

void main（）{
gl_位置=vec4（位置，1.0）；
}
#定义两个_PI 6.28318530718
#定义ε0.000011
均匀vec2分辨率；
均匀浮动时间；
均匀矢量2列；
均匀vec2小鼠；
浮动色调RGB（浮动f1、浮动f2、浮动色调）
{
如果（色调<0.0）
色调+=1.0；
否则如果（色调>1.0）
色调-=1.0；
浮动res；
如果（（6.0*色调）<1.0）
res=f1+（f2-f1）*6.0*色调；
否则如果（（2.0*色调）<1.0）
res=f2；
否则如果（（3.0*色调）<2.0）
res=f1+（f2-f1）*（（2.0/3.0）-色调）*6.0；
其他的
res=f1；
返回res；
}
vec3 HSLToRGB（vec3 hsl）
{
vec3-rgb；
如果（hsl.y==0.0）
rgb=vec3（hsl.z）；//亮度
其他的
{
浮动f2；
如果（hsl.z<0.5）
f2=hsl.z*（1.0+hsl.y）；
其他的
f2=（hsl.z+hsl.y）-（hsl.y*hsl.z）；
浮动f1=2.0*hsl.z-f2；
rgb.r=HueToRGB（f1，f2，hsl.x+（1.0/3.0））；
rgb.g=HueToRGB（f1，f2，hsl.x）；
rgb.b=HueToRGB（f1，f2，hsl.x-（1.0/3.0））；
}
返回rgb；
}
mat2旋转2D（浮动角）{
返回mat2（cos（_角度），-sin（_角度），
sin（_角），cos（_角））；
}
vec2旋转自（vec2 uv、vec2中心、浮动角度）{
vec2 uv_u2;=uv-中心；
uv_u2;=旋转2d（角度）*uv_2;；
紫外线=紫外线+中心；
返回紫外线；
}
浮动随机（浮动值）{
返回分数（sin（值）*43758.5453123）；
}
浮动随机（vec2 tex）{
返回分数（sin（tex.xy，vec2（12.9898，78.233））*43758.5453123）；
}
vec2随机2D（vec2 uv）{
uv=vec2（dot（uv，vec2（127.1311.7）），dot（uv，vec2（269.5183.3））；
//收益率-1.0+2.0*分形（sin（uv）*43758.5453123）；
返回分数（sin（uv）*43758.5453123）；//在x，y上无偏移返回
}
vec3随机3D（vec3 uv）{
uv=vec3（dot（uv，vec3（127.1311.7120.9898）），dot（uv，vec3（269.5183.31150.457）），dot（uv，vec3（380.5182.3170.457））；
收益率-1.0+2.0*分形（sin（uv）*43758.5453123）；
}
浮动立方体曲线（浮动值）{
返回值*值*（3.0-2.0*值）；//自定义三次曲线
}
vec2立方曲线（vec2值）