04 | GPU与渲染管线：如何用WebGL绘制最简单的几何图形？

作业一 查了下资料，webgl支持的图元类型有七种，分别是 gl.POINTS(点), gl.LINES(线段), gl.LINE_STRIP(线条), gl.LINE_LOOP(回路), gl.TRIANGLES(三角形), gl.TRIANGLE_STRIP(三角带), gl.TRIANGLE_FAN(三角扇)。 要绘制空心三角形，gl.LINE_STRIP(线条)、gl.LINES(线段)、 gl.LINE_LOOP(回路)都可以实现。 但是gl.LINES(线段)需要写入六个顶点([-1, -1, 0, 1, 0, 1, 1, -1, 1, -1,-1, -1]), gl.LINE_STRIP(线条)也需要写入四个顶点([-1, -1, 0, 1, 1, -1,-1, -1]),而gl.LINE_LOOP(回路)，只需要是三个顶点([-1, -1, 0, 1, 1, -1])，因此gl.LINE_LOOP(回路)是最佳选择 作业二 a. 先封装一个生成多边形顶点坐标数组的函数 function createCircleVertex(x, y, r, n) { const sin = Math.sin; const cos = Math.cos; const perAngel = (2 * Math.PI) / n; const positionArray = []; for (let i = 0; i < n; i++) { const angel = i * perAngel; const nx = x + r * cos(angel); const ny = y + r * sin(angel); positionArray.push(nx, ny); } return new Float32Array(positionArray); } b. 封装一个生成正多角星顶点的数组函数 function create2CircleVertex(x, y, r, R, n) { const sin = Math.sin; const cos = Math.cos; const perAngel = Math.PI / n; const positionArray = []; for (let i = 0; i < 2 * n; i++) { const angel = i * perAngel; if (i % 2 !== 0) { const Rx = x + R * cos(angel); const Ry = y + R * sin(angel); positionArray.push(Rx, Ry); } else { const rx = x + r * cos(angel); const ry = y + r * sin(angel); positionArray.push(rx, ry); } } return new Float32Array(positionArray); } 1. 正四边形 const points = createCircleVertex(0, 0, 0.5, 4); 2. 正五边形 const points = createCircleVertex(0, 0, 0.5, 5); 3. 正六角星 const points = create2CircleVertex(0, 0, 0.3, 0.6, 6); 以上要绘制空心用gl.LINE_LOOP图元，实心用gl.TRIANGLE_FAN图元 1)空心:gl.drawArrays(gl.LINE_LOOP, 0, points.length / 2); 2)实心:gl.drawArrays(gl.TRIANGLE_FAN, 0, points.length / 2);

补充：vs不仅仅只有postion值，一般通过attribute 进行属性赋值。在图形学管顶点操作叫做VAO(vertex array object)，而vao操作的float数据底层是vbo。不过如果用了threejs后很多图元操作就依赖引擎直接就解决了，但在Threejs中依然可以通过shaderMatiral通过setAttribute给bufferGeometry的顶点赋值。 不过个人在这几年的图形学学习中觉得vs相对还是简单的，fs对于像素的操作很像当年给photoshop写滤镜的过程。不过如果真的是玩片元着色炫技可以看看shadertoy里关于用remaching技术构建距离场用体素算法在片元里构建另一个三维引擎的效果。希望月影大大回头可以针对这方面有所加餐。感谢！ 不过这课程来的太晚，如果几年前能早点接触到这门课，估计会在图形学方面少走很多弯路，谢谢月影大大。

老师，将数据存入缓存再拿出来是有什么意义呢？

正n边型，r是外接圆半径 getPolygonPoints( n, r ){ const stepAngle = 2*Math.PI / n let initAngle = 0 const pointArray = [] for(let i = 0; i < n; i++) { // 存储x坐标 pointArray.push(r * Math.cos(initAngle)) // 存储y坐标 pointArray.push(r * Math.sin(initAngle)) initAngle += stepAngle } return pointArray } // 正十边型坐标点 const ponitsArray = getPolygonPoints(10, 1) const ponits = new Float32Array(ponitsArray) gl.drawArrays(gl.TRIANGLE_FAN, 0, ponits.length / 2)

1、gl_Position 设置顶点，这个我查了一下，第四个值设置为2.0也可以实现缩小一倍。 gl_Position = vec4(position, 0.0, 2.0); 2、空心三角形： gl.drawArrays(gl. LINE_LOOP, 0, ponits.length / 2) 3、绘制多边形 a.定义多边形的(x, y)坐标 const ponits = new Float32Array([ -1, -1, 0, -2, 1, -1, 1, 1, -1, 1 ]) b.绘制多边形 gl.drawArrays(gl.TRIANGLE_FAN, 0, ponits.length / 2)

实现了一个正多边形的样例，动态修改边数。 https://codesandbox.io/s/practice-canvas-vme4k?file=/src/pages/RegularPolygonWebGL.vue

问题一： 绘制空心三角形使用回路线条：gl.LINE_LOOP gl.drawArrays(gl.LINE_LOOP, 0, points.length / 2); WebGL可绘制的图元有以下7种，来源网络查找：https://www.jianshu.com/p/1e750f20ec23 点 gl.POINTS 线段 gl.LINES 线条 gl.LINE_STRIP 回路线条 gl.LINE_LOOP 三角形 gl.TRIANGLES 三角带 gl.TRIANGLE_STRIP 三角扇 gl.TRIANGLE_FAN

老师问下MDN文档里WebGL常数这儿，表格里十六进制的‘Value’表示的意思是类似于CPU指令寄存器么？ Getting GL parameter information这节BLEND_EQUATION，BLEND_EQUATION_RGB的value都是0x8009，也有点不理解 https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants

"图形中有多少个像素点，着色器程序在 GPU 中就会被同时执行多少次。" 顶点着色器是否一样还是有几个顶点就执行多少次呢？ 传给片元的varying变量会线性差值，那么插值这一步发生在哪呢？

请问编写glsl有什么智能提示插吗，我用的vscode？