Javascript 画布到WebGL

我试图学习WebGL，但我什么都没有。 我不想用图书馆，它们太大了。 我在画布上写下了我想要的，请帮助我在WebGL上完成

函数绘图点（x、y、大小、模糊、不透明度）{
var c=document.getElementById（'canvas'）；
var ctx=c.getContext（'2d'）；
var半尺寸=尺寸/2；
var radgrad=ctx.createRadialGradient（半尺寸+x，半尺寸+y，0，半尺寸+x，半尺寸+y，半尺寸）；
radgrad.addColorStop（模糊，'rgba（255,255,255，'+不透明度+'）；
radgrad.addColorStop（1，'rgba（255，255，255，0'）；
ctx.fillStyle=radgrad；
ctx.fillRect（x，y，size，size）；
}
函数DrawcGradient（）{
var w=500；
var h=200；
var pointR=w/2；
var x=（w/2）；
变量y=（h/2）；
var c=document.getElementById（'canvas'）；
var ctx=c.getContext（'2d'）；
var grd=ctx.createRadialGradient（x，y，0，x，y，pointR）；
grd.addColorStop（0，#5A6977'）；
grd.addColorStop（1，#000'）；
ctx.fillStyle=grd；
ctx.fillRect（0,0,w,h）；
}
DrawcGradient（）；
支点（50,100,50,0.5,0.2）；
支点（70,10,150,0.93,0.2）；

这恰好是我正在再次关注的领域。也许不完全是你想要的，但是你可以删除所有2D画布的东西，只保留webGL的东西

此演示混合了2D和3D画布界面，以在2D画布内容上获得高性能GPU处理

片段着色器在名为

FragmentShader

径向渐变是通过计算到中心的距离并获得0到1的值来创建的。我用这个值得到3个渐变。若要更改渐变的锐度，请将值向下拉并夹紧

靠近鼠标的大圆圈是1在中心，0在远处。我乘以350等于350:0。然后我向下拉270，得到80到-270，然后我夹紧到0和1。结果是一个急剧的梯度

我从画布顶部的一个点开始，将圆圈放置在一条线上，一个靠近鼠标，另一个沿着直线更远

这里有很多锅炉板的东西，我今天有点吃不消了，所以你必须把剩下的都干掉

非常容易转换为所有webGL。只需移除顶部的所有画布鼠标内容。创建图像并调用

startWebGL（image）

Add

webGL

canvas（在

startWebGL

函数中创建后）到文档正文，并至少调用一次函数

webGLRender

以设置着色器变量并渲染帧

警告着色器具有高级指令，如果没有支持代码，则无法使用。要与其他设置一起使用，请删除着色器中所有

统一

和

属性

变量前面的

#

。Ie

#统一vec2鼠标

变成

统一的vec2鼠标


//==================================================================================================
//下面的代码是支持代码，它为我提供了各种论坛的标准界面。
//它提供了鼠标界面、全屏画布和一些常用的全局变量
//像画布、ctx、鼠标、w、h（宽度和高度）、globalTime
//不应将其用作如何编写画布接口的示例。
//盲人67
常数U=未定义；
常数调整大小(去盎司)时间=100 ;；
var onresize；//用这个做你的事
变量w，h，cw，ch，canvas，ctx，鼠标，createCanvas，resizeCanvas，setGlobals，globalTime=0，resizeCount=0；
createCanvas=function（）{//创建二维显示画布
var c，cs；
cs=（c=document.createElement（“canvas”）.style；
cs.position=“绝对”；
cs.top=cs.left=“0px”；
cs.zIndex=1000；
文件.正文.附件（c）；
返回c；
}
resizeCanvas=函数（）{
如果（画布===U）{
canvas=createCanvas（）；
} 
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
ctx=canvas.getContext（“2d”）；
if（typeof setGlobals==“函数”）{
setGlobals（）；
} 
if（typeof onresize==“函数”）{
resizeCount+=1；
setTimeout（去抖动大小，调整大小去抖动时间）；
}
}
函数debounceSize（）{
resizeCount-=1；
if（resizeCount c（e））；}
if（（m.buttonRaw&2）和&m.crashRecover！==null）{if（m.crashRecover的类型===“函数”）{setTimeout（m.crashRecover，0）；}
e、 预防默认值（）；
}
m、 updateBounds=函数（）{
如果（m.active）{
m、 bounds=m.element.getBoundingClientRect（）；
}
}
m、 addCallback=函数（回调）{
if（回调类型==“函数”）{
如果（m.callbacks==U）{m.callbacks=[callback]；}
else{m.callbacks.push（callback）；}
}else{throw new TypeError（“mouse.addCallback参数必须是函数”）；}
}
m、 开始=功能（元素，块上下文菜单）{
如果（m.element！==U）{m.removeMouse（）；}
m、 元素=元素===U？单据：元素；
m、 blockContextMenu=blockContextMenu==U？false：blockContextMenu；
m、 forEach（n=>{m.element.addEventListener（n，mouseMove）；}）；
if（m.blockContextMenu==true）{m.element.addEventListener（“contextmenu”，preventDefault，false）；}
m、 主动=真；
m、 updateBounds（）；
}
m、 删除=函数（）{
如果（m.元素！==U）{
m、 mouseEvents.forEach（n=>{m.element.removeEventListener（n，mouseMove）；}）；
如果（m.ContextMenuBlock==true）{m.element.removeEventListener（“contextmenu”，preventDefault）；}
m、 元素=m.callbacks=m.ContextMenuBlock=U；
m、 主动=假；
}
}
返回鼠标；
})();
/**简单的
<canvas id="canvas" width="500" height="200"></canvas>

<script type='text/javascript'>
    function DrawPoint(x, y, size, blur, opacity) {
        var c = document.getElementById('canvas');
        var ctx = c.getContext('2d');

        var halfSize = size / 2;

        var radgrad = ctx.createRadialGradient(halfSize + x, halfSize + y, 0, halfSize + x, halfSize + y, halfSize);
        radgrad.addColorStop(blur, 'rgba(255, 255, 255, ' + opacity +')');
        radgrad.addColorStop(1, 'rgba(255, 255, 255, 0)');
        ctx.fillStyle = radgrad;
        ctx.fillRect(x, y, size, size);
    }


    function DrawcGradient() {
        var w = 500;
        var h = 200;

        var pointR = w / 2;
        var x = (w / 2);
        var y = (h / 2);

        var c = document.getElementById('canvas');
        var ctx = c.getContext('2d');
        var grd = ctx.createRadialGradient(x, y, 0, x, y, pointR);
        grd.addColorStop(0, '#5A6977');
        grd.addColorStop(1, '#000');
        ctx.fillStyle = grd;
        ctx.fillRect(0, 0, w, h);
    }


    DrawcGradient();
    DrawPoint(50, 100, 50, 0.5, 0.2);
    DrawPoint(70, 10, 150, 0.93, 0.2);
</script>