Javascript 将背景渐变添加到具有动画几何体的前景？

前言：我看到了这张鼓舞人心的海报，其中展示了趋势梯度：

目标：我想制作一个场景，其中我有动画几何体和其中一个渐变的背景

问题：我已经做好了准备。我还找到了一些关于制作的帖子。但是，我不知道如何将这两个场景组合成一个场景

问题：如何创建具有渐变背景（使用片段着色器？）和一些运动中的前景几何体的场景

注意：这些渐变中的任何一个都可以，duotone可能是最容易创建的。我现在要把这个问题贴上去；然而，与此同时，我将尝试制作一个只有双色调渐变的场景；希望有人能打败我

以下是开始的场景：

var-gl，
着色器程序，
顶点，
矩阵=mat4.create（），
vertexCount，
indexCount，
q=quat.create（），
translate=[-3,0，-10]，
比例=[1,1,1]，
枢轴=[0,0,0]；
translate2=[0,0，-8]，
scale2=[3,3,3]，
数据透视2=[1,1,1]
initGL（）；
createShaders（）；
创建顶点（）；
draw（）；
函数initGL（）{
var canvas=document.getElementById（“canvas”）；
gl=canvas.getContext（“webgl”）；
总帐启用（总帐深度测试）；
总图视口（0，0，canvas.width，canvas.height）；
gl.clearColor（1,1,1,1）；
}
函数createShaders（）{
var vertexShader=getShader（gl，“着色器vs”）；
var fragmentShader=getShader（gl，“着色器fs”）；
shaderProgram=gl.createProgram（）；
gl.attachShader（着色器程序、顶点着色器）；
gl.attachShader（着色器程序、碎片着色器）；
gl.linkProgram（着色器程序）；
gl.useProgram（shaderProgram）；
}
函数createVertexts（）{
顶点=[
[-1, -1, -1,     1, 0, 0, 1],     // 0
[ 1, -1, -1,     1, 1, 0, 1],     // 1
[-1,  1, -1,     0, 1, 1, 1],     // 2
[ 1,  1, -1,     0, 0, 1, 1],     // 3
[-1,  1,  1,     1, 0.5, 0, 1],   // 4
[1,  1,  1,      0.5, 1, 1, 1],   // 5
[-1, -1,  1,     1, 0, 0.5, 1],   // 6
[1, -1,  1,      0.5, 0, 1, 1],   // 7
];
变量法线=[
[0, 0, 1], [0, 1, 0], [0, 0, -1],
[0, -1, 0], [-1, 0, 0], [1, 0, 0] ];
风险值指数=[
[0, 1, 2,   1, 2, 3],
[2, 3, 4,   3, 4, 5],
[4, 5, 6,   5, 6, 7],
[6, 7, 0,   7, 0, 1],
[0, 2, 6,   2, 6, 4],
[1, 3, 7,   3, 7, 5]
];
变量属性=[]
对于（让边=0；边

<style>
#c {
  background: url(images/bg.jpg) no-repeat center center; 
  background-size: cover;
}
</style>
<canvas id="c"></canvas>