Javascript 如何在着色器中将图片添加到背景中？

如何添加图片而不是蓝色，或者蓝色是透明的

下面是一段代码片段：

/*
这里的大部分东西都是自举的。本质上只是
设置ThreeJS，使其渲染要绘制的平面
着色器。在这里唯一能看到的是送到医院的制服
着色器。除此之外，所有的魔法都发生在HTML视图中
在片段着色器下。
*/
让容器；
让相机、场景、渲染器；
让制服；
函数init（）{
container=document.getElementById（'container'）；
摄像头=新的三个摄像头（）；
摄像机位置z=1；
场景=新的三个。场景（）；
var几何=新的三个。平面缓冲几何（2，2）；
制服={
u_时间：{type:“f”，值：Math.random（）*1000.0}，
分辨率：{type:“v2”，值：new THREE.Vector2（）}，
鼠标：{type:“v2”，值：new THREE.Vector2（）}
};
var material=新的三个着色器材质（{
制服：制服，
vertexShader:document.getElementById（'vertexShader'）.textContent，
fragmentShader:document.getElementById（'fragmentShader'）.textContent
} );
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
container.appendChild（renderer.doElement）；
onWindowResize（）；
addEventListener（'resize'，onWindowResize，false）；
document.onmousemove=函数（e）{
uniforms.u_mouse.value.x=e.pageX
uniforms.u_mouse.value.y=e.pageY
}
}
函数onWindowResize（事件）{
renderer.setSize（window.innerWidth、window.innerHeight）；
uniforms.u_resolution.value.x=renderer.domeElement.width；
uniforms.u_resolution.value.y=renderer.domeElement.height；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
0.u_时间值+=0.05；
渲染器。渲染（场景、摄影机）；
}
init（）；
制作动画（）
html，正文{
身高：100%；
保证金：0；
}
身体{
溢出：自动；
}
.更换容器{
高度：300px；
宽度：300px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.高度计程仪{
高度：1000px；
}
.改变{
最大高度：100%；
最大宽度：100%；
}

void main（）{
gl_位置=vec4（位置，1.0）；
}
均匀vec2u_分辨率；
均匀浮动u_时间；
常量浮点噪声_大小=3；//噪音的大小。本质上是噪波UV的倍增。小=大
常数浮动强度=20；//位移的强度
常量浮点反射强度=4；//再流反射的强度。
常数int倍频程=2；//FBM噪声中要生成的倍频程数
常量浮点种子=43758.5453123；//随机种子：）
/*
水下太阳
利亚姆·伊根-2018
----------------------
一种基本的涟漪图案，被非常轻微的FBM噪声所扭曲。
非常感谢伊尼戈·奎莱兹、帕特里西奥·冈萨雷斯、，
加里·沃恩和许多其他人。
“肱骨内侧纳米巨细胞”
*/
vec2随机2（vec2 st，浮动种子）{
st=vec2（dot（st，vec2（127.1311.7）），
dot（st，vec2（269.5183.3））；
回报率-1.0+2.0*分形（sin（st）*种子）；
}
//Inigo Quilez的数值噪声-iq/2013
// https://www.shadertoy.com/view/lsf3WH
浮动噪声（vec2 st，浮动种子）{
vec2 i=楼层（st）；
vec2 f=分形（st）；
vec2u=f*f*（3.0-2.0*f）；
返回混合（混合（点随机2（i+vec2（0.0,0.0），种子），f-vec2（0.0,0.0）），
点（随机数2（i+vec2（1.0,0.0），种子），f-vec2（1.0,0.0）），u.x），
混合（点（随机2（i+vec2（0.0,1.0），种子），f-vec2（0.0,1.0）），
dot（random2（i+vec2（1.0,1.0），seed），f-vec2（1.0,1.0）），u.x），u.y）；
}
浮动fbm1（在vec2中，浮动种子）{
浮动v=0.0；
浮点数a=0.5；
vec2移位=vec2（100.0）；
//旋转以减少轴向偏差
mat2 rot=mat2（cos（0.5），sin（0.5），
-sin（0.5），cos（0.50））；
对于（int i=0；i<八度；++i）{
v+=a*噪声（st，种子）；
_st=rot*_st*2.0+移位；
a*=0.4；
}
返回v+4；
}
浮动模式（vec2 uv、浮动种子、浮动时间、inout vec2 q、inout vec2 r）{
q=vec2（fbm1（uv+vec2（0.0,0.0），种子），
fbm1（uv+vec2（5.2,1.3），种子）；
r=vec2（fbm1（uv+4.0*q+vec2（1.7-时间/2,9.2），种子），
fbm1（uv+4.0*q+vec2（8.3-时间/2,2.8），种子）；
浮动rtn=fbm1（紫外线+4.0*r，种子）；
返回rtn；
}
mat2旋转（浮动角度）{
返回mat2（cos（角度），-sin（角度），sin（角度），cos（角度））；
}
void main（）{
vec2 uv=（gl_FragCoord.xy-0.5*u_分辨率.xy）/u_分辨率.y；
//生成我们的位移图
vec2_uv=uv*噪声大小；
vec2q=vec2（0）；
vec2r=vec2（0）；
浮动模式=模式（_uv，种子，u_时间/2,q，r）；
uv+=（.5-图案）/强度；//通过图案调制主uv坐标
//uv-=.5/强度；//这只是在失真后重新居中uv坐标
浮动长度=长度（uv）+.01；
float field=len+0.05*（-1.0*u_时间/5.）；//从中间到边缘的距离字段
浮动波纹；
波纹=sin（场*80.0）*.5*r.x*模式+1；//波纹模式
ripple+=smoothstep（0.2，.0，len）；//向太阳添加核心渐变。本质上，这只是距离场的平滑版本
ripple*=smoothstep（0.3,9，钳制（1.-len*1.5,0.0,1.0））；//使太阳变暗，使其小于无穷大
ripple-=fract（ripple*8.）/100；//添加了一种很好的反射元素
vec3