Canvas 如何在webGL中创建二维挥动标志？

我刚刚编写了一个程序，在canvas2D中实现了波浪效果。 以下是我的实现：
1.保存原始画布的图像数据。
2.计算每个点的新位置，并为其提供旧位置的颜色。
3.使各点的振幅随距离增加。
4.增加单调递减区域的亮度，降低单调递减区域的亮度。

var IMG_MAX_WIDTH=600
var IMG_最大高度=600
变量imgWidth，imgHeight
var oImgData，imgData
阿片素
变量ctx、画布宽度、画布高度
var image=新映像（）
image.crossOrigin='anonymous'
image.src=https://i.imgur.com/ZKMnXce.png'
var振幅=15
风险值周期=2
考克斯
image.onload=函数（）{
imgWidth=Math.floor（image.width）
imgHeight=数学地板（图像高度）
var canvas=document.getElementById（'flagCanvas'）
风险等级=1
如果（imgWidth>IMG_最大宽度）{
比例=最大宽度/最大宽度
}
如果（仪表板高度>仪表板最大高度）{
比例=比例*最大高度/高度
}
画布宽度=imgWidth
画布高度=图像高度+振幅*2
canvas.width=画布宽度
canvas.height=画布高度
canvas.style.transform='translate3d（-50%，-50%，0）比例（'+scale+'）'
//offscreenCtx=offscreenCanvas.getContext（'2d'）
ctx=canvas.getContext（'2d'）
ctx.drawImage（图像，0，振幅，imgWidth，imgHeight）
imgData=ctx.getImageData（0，0，画布宽度，画布高度）
像素=imgData.data
oImgData=ctx.createImageData（画布宽度、画布高度）
oPixels=像素。切片（）
oImgData.data=阿片素
coX=2*Math.PI/（imgWidth/周期）
勾选（）
}
var停止=错误
var timeNow=Date.now（）
var timeLast=timeNow
var delta=0
var区间
var fps=70
var偏移=10
间隔=1000/帧
var tick=函数（）{
如果（停止）返回false
timeNow=Date.now（）
delta=timeNow-timeLast
如果（增量>间隔）{
timeLast=timeNow
ctx.clearRect（0，0，画布宽度，画布高度）
var y0=振幅*（1/imgWidth）*数学正弦（timeNow/200）
var yBuf=新数组（画布宽度）
变量lastY=0
变量r
变量g
变量b
变量a
变量或
var oG
var oB
var-oA
对于（变量i=0；i

*{
保证金：0；
填充：0；
}
html，正文{
宽度：100%；
身高：100%；
}
身体{
位置：相对位置；
背景：浅灰色；
}
#旗布{
位置：绝对位置；
最高：50%；
左：50%；
变换原点：中心；
转换：translate3d（-50%，-50%，0）；
}

通过将所有计算委托给GPU，您可以在WebGL中实现“波浪”效果。 为此，应将正方形（或矩形）分成三角形条带，如以下模式所示：

1  3  5  7
| /| /| /|
|/ |/ |/ |
2  4  6  8

将顶点1置于坐标（0,0），顶点2置于坐标（0,1），顶点7置于坐标（1,0），顶点8置于坐标（1,1）。您可以轻松推导其余顶点的坐标。 这些坐标是纹理中用于显示图像的UV。此外，可以使用这些坐标将顶点放置在屏幕上。 要获得“波浪”效果，可以根据时间上下移动顶点

顶点着色器将对每个顶点并行执行。它的代码可以非常简单。以下是一个例子：

// The time is the only variable value.
uniform float uniTime;
// Coords of the current vertex.
attribute vec2 attCoords;
// Propagate UV coords to the fragment shader
varying vec2 varUV;   

void main() {
  // Propagate UV coords to the fragment shader
  varUV = attCoords;
  // Separate X and Y coordinates.
  float x = attCoords.x;
  float y = attCoords.y;
  // Compute the vertical shift of the vertex according to the time.
  float h = cos( uniTime + x * 10.0 );
  // The following line is not mandatory, but it make the move look
  // more random.
  h += cos( x * 3.0 - uniTime * 0.1751 );
  // Define the size of the wave and make it steady on the left
  // to simulate a fixing point on a stick.
  y += h * x * 0.2;
  // In WebGL, the visble space is between -1 and +1 in each direction.
  gl_Position = vec4( 2.0 * x - 1.0, 0.5 - y, 0.0, 1.0 );
}

---

你可以在这里看到一个活生生的例子：

。。。WebGL代码在哪里？如果你希望你的画布版本快速，只需考虑<代码> DRAWWMAGE < /代码>。它采用源矩形和目标矩形。没有理由使用慢速

getImageData

和

putImageData

。向您展示如何在WebGL中实现这一点可以说是一个太大的话题@gman但是我想模拟反射效果，所以我需要改变每个像素的颜色，

drawImage

做不到。你可以认为我可以理解webgl，给我一些想法或代码，我会研究它。你可以通过用alpha<1在每个列上绘制

fillRect

来改变颜色。至于学习WebGL，网上有1000多个例子，包括我已经发布的链接。如果你懒得去读，你就不能指望别人会帮助你。所以“为我写代码”网站不是吗？它是一个“我读了所有的东西，尝试了所有这些东西，我有一个小问题”网站。教你们webgl并不是一个“小问题”，你们可以用其中的一些来制作一个类似于你们上面的挥舞旗帜。这太棒了！正是我要找的！很抱歉这么久才回复，谢谢！