第一次接触WebGL。如有错误欢迎留言，共同学习进步。vWebGL的自画像。猿猴（探手）可以在浏览器上随心所欲画女朋友，还可以动动手脚，屈尊降临猿猴世界。哇哈哈哈哈，快来臣服吧，哇，嘎嘎，嘎嘎，打嗝~WebGL入门手册WebGL小姐姐神通广大，法力无边。那我们怎么用她来创造一个猿猴快乐（blessed）、有福（female）、美丽（beautiful）、充满朋友（friends）的世界呢？首先我们需要一个叫做canvas的祭坛来举行一个小型的仪式来召唤WebGL小姐姐。constcanvas=document.createElement('canvas');constgl=canvas.getContext('webgl');然后，WebGL小姐已经得到了Get，接下来我们需要给她的两个侍女两个“祭品”。准备好用来创造肉体和灵魂颜色的原材料。gl_Position为每次绘制的点，类型为vec4，分别为空间点(x,y,z)和最后的w。w可以参考ExplainingHomogeneousCoordinates&ProjectiveGeometry一文，可以理解为投影仪到空间点的距离。不同的距离会产生缩放效果。距离越长，投影的物体越大。这里我们使用1.0的值，没有缩放效果，使用position定义的变量值。每次绘制gpu缓冲区时，都会更新位置值。constvertexShaderSource=`precisionmediumpfloat;attributevec2position;voidmain(void){gl_Position=vec4(position.x,position.y,0.0,1.0);}`;每张图都会使用glFragColor定义的颜色值，也是vec4类型，代表(r,g,b,a)constfragmentShaderSource=`precisionmediumpfloat;voidmain(void){gl_FragColor=vec4(0.7,0.5,0.38,0.0);}`关于精度：由于openGL没有声明float类型的默认精度，它的姊妹WebGL也需要为shader声明精度。并且因为高精度openGL不支持，低精度在手机上可能会有兼容性问题，所以默认推荐mediop。参考https://stackoverflow.com/a/28540641/2326199和UsemediumpprecisioninWebGLwhenpossible来唤醒女仆并让他们处理牺牲constvertexShader=gl.createShader(gl.VERTEX_SHADER);//唤醒gl.shaderSource(vertexShader,vertexShaderSource);//交上祭品gl.compileShader(vertexShader);//处理祭祀if(!gl.getShaderParameter(vertexShader,gl.COMPILE_STATUS)){//因为祭祀偶尔会过时或者女仆懒惰，所以我们需要确定祭祀是否被处理thrownewError(`Error在编译顶点着色器时：${gl.getShaderInfoLog(vertexShader)}`);}constfragmentShader=gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader,fragmentShaderSource);gl.compileShader(fragmentShader);if(!gl.getShaderParameter(vertexShader,gl.COMPILE_STATUS)){thrownewError(`ErrorincompilingvertexShader:${gl.getShaderInfoLog(vertexShader)}`);}祭品准备好了，接下来请WebGL小姐姐使用创世神器编程，用供品开光，然后交给小姐姐。常量程序=gl.createProgram();//工件存在gl.attachShader(program,vertexShader);//打开第一个封印：原材料gl.attachShader(program,fragmentShader);//打开第二个封印：coloropengl.链接程序（程序）；//交给小姐姐if(!gl.getProgramParameter(program,gl.LINK_STATUS)){//咳咳，因为神器和祭祀偶尔会出现无法贴合的情况，神器失效，需要检查一下~_~thrownewError(`invalidprogram:${gl.getProgramInfoLog(program)}`);}注意，注意，WebGL小姐姐完成了她的启动手势，世界打开了，一切都恢复了。我们现在可以向她许个愿，描绘我们心中的猩猩世界了~v;v~WebGL许愿池上的许愿树WebGL小姐姐有多个许愿池，我们这里用的是gl.ARRAY_BUFFER。然后告诉神器程序如何收集愿望。constbuffer=gl.createBuffer();//创建许愿树gl.bindBuffer(gl.ARRAY_BUFFER,buffer);//将许愿树种入许愿池`ARRAY_BUFFER`//获取神器`program`的`position`的幂constposition=gl.getAttribLocation(program,'position');//position的幂为a一组2个浮点类型，不转换`buffer`类型，//从头开始??，不跳过任何愿望gl.vertexAttribPointer(position,2,gl.FLOAT,false,0,0);gl.enableVertexAttribArray(位置）;小姐姐，WebGl的创造者，迎着丝毫没有的风，看着没有编辑的虚无的黑暗，眼角迸发出一缕光芒，大笔一挥，左一滑，向右滑动。gl。视口（0、0、400、400）；gl。使用程序（程序）；gl。clearColor(255/255,192/255,203/255,1.0);gl。清除（gl.COLOR_BUFFER_BIT）；gl。lineWidth(1.5);constpoints=newFloat32Array([-0.9,0.9,0.0,0.0,0.9,-0.9,]);gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW);gl.drawArrays(gl.LINE_LOOP,0,points.length/2);gl。bufferData(gl.ARRAY_BUFFER,newFloat32Array([-0.9,-0.9,0.0,0.0,0.9,0.9]),gl.STATIC_DRAW);gl。drawArrays(gl.LINE_LOOP,0,3);世界的创造在闪电、山崩和海啸中隆重诞生！！咚咚咚，piapia（背景音乐）最后来一张WebGL绘制全过程流程图：未完待续本文首发于本人公众号：枫叶如果您喜欢本文并想转发本文，请保留公众号声明和公众号二维码。谢谢^v^
