WebGL08
为什么我们给顶点只配了三种颜色，会出现一个渐变色的三角形呢。 图形装配和光栅化 通过顶点坐标将其装配成几何图形，再将装配好的几何图形转化成一个一个真实的像素，在使用片元着色器对其进行逐片元操作。 使用gl.drawArrays(gl.TRIANGLE_STRIP,0,4)进行图形绘制，count为4，说明顶点着色器将会执行4次。 执行第一个顶点着色器，将第一个坐标数据分配给attribute变量a...
WebGL07
多个缓冲区对象 ` const vertices = new Float32Array([ -.6, -.6, 0., .8, .6, -.6, ]) const colors = new Float32Array([ 1., 0., 0., 1., // 红色 0., 1., 0., 1., // 绿色 0., 0., 1., 1., // 蓝色 ]) ` 对应的数据准备...
WebGL06
gl.drawArrays的不同mode和不同顶点组合绘制一些基本图形。 绘制LINE的组合图形 使用示例让我们了解关于不同mode绘制图形的效果。 确定绘制的顶点坐标。 ` const vertices = new Float32Array([ -.5, .5, -.5, -.5, 0., .5, 0., -.5, .5, .5, .5, -.5 ]) ` 关于LINES相关的mod...
WebGL05
之前小节我已经了解点的绘制、GLSL语法、内置变量和写法，我们接下来就要深入了解关于缓冲区对象相关知识，用于绘制线和面。 3D图形的基本单位就是三角形，也就是说三角形是所有面和3D图形的基础。 缓冲区对象 gl.drawArrays gl.POINTS绘制单个点 gl.LINE_STRIP gl.LINE_LOOP gl.TRIANGLES 缓冲区对象可以传入多个顶点数据，通过绘制一次绘制多个顶点...
WebGL04
我们上一个小节已经了解了通过attribute变量动态传递值实现动态点的绘制。 uniform变量 我们要动态修改颜色值的话，就需要动态给片元着色器中gl_FragColor动态赋值。 uniform类型变量可以在顶点着色器和片元着色器中被访问 ` uniform vec4 u_FragColor ` 我们需要给我们的内置变量gl_FragColor动态赋值一个vec4类型变量 ` const f...
WebGL03
WebGL绘制动态点 之前的例子我们都是在顶点着色器中定义静态的顶点坐标数据。 动态传递顶点坐标 要动态绘制点，需要建立动态获取顶点坐标的途径，能够通过js与GLSL着色器代码之间进行交互。所以我们需要通过变量来传递动态的值。 ` const vertexCode=` // 定义一个a_Position类型为vec4的attribute变量 attribute vec4 a_Pos...