筑梦师刘渊2020-06-30作业一 查了下资料，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);展开作者回复: 很棒！
共 2 条评论50
Cailven2020-06-29补充：vs不仅仅只有postion值，一般通过attribute 进行属性赋值。在图形学管顶点操作叫做VAO(vertex array object)，而vao操作的float数据底层是vbo。不过如果用了threejs后很多图元操作就依赖引擎直接就解决了，但在Threejs中依然可以通过shaderMatiral通过setAttribute给bufferGeometry的顶点赋值。 不过个人在这几年的图形学学习中觉得vs相对还是简单的，fs对于像素的操作很像当年给photoshop写滤镜的过程。不过如果真的是玩片元着色炫技可以看看shadertoy里关于用remaching技术构建距离场用体素算法在片元里构建另一个三维引擎的效果。希望月影大大回头可以针对这方面有所加餐。感谢！ 不过这课程来的太晚，如果几年前能早点接触到这门课，估计会在图形学方面少走很多弯路，谢谢月影大大。作者回复: VAO是一种组织顶点数据的方式，也是webgl里面常用的方式，它的好处之一是不用每次操作都一一绑定每一组不同的顶点数据。这些属于具体webgl使用上的问题，随着专栏的课程内容深度会有更多介绍。shadertoy很不错的平台，在后面介绍像素处理的课程里会看到一部分shadertoy上比较有趣的例子。
17
xiao豪2020-07-06老师，将数据存入缓存再拿出来是有什么意义呢？作者回复: 因为webgl实际上是JS与GPU进行交互，所以要先将JS的数据存入缓存，在webgl程序运行的时候底层从缓存中读取数据给shader，在shader中完成图形绘制。所以是一读一写的过程
共 2 条评论8
宁康
2020-06-29正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)作者回复: 赞～
5- 宁康2020-06-291、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)
作者回复: 不错～
3 
Kevin2020-07-16实现了一个正多边形的样例，动态修改边数。 https://codesandbox.io/s/practice-canvas-vme4k?file=/src/pages/RegularPolygonWebGL.vue作者回复: 赞
2- Kevin2020-07-15问题一： 绘制空心三角形使用回路线条：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
作者回复: 嗯嗯
2 
国旗2020-09-23老师问下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作者回复: 就是一个代表状态常量的数值，设计的时候定下来的。
1
不见飞刀2020-08-29"图形中有多少个像素点，着色器程序在 GPU 中就会被同时执行多少次。" 顶点着色器是否一样还是有几个顶点就执行多少次呢？ 传给片元的varying变量会线性差值，那么插值这一步发生在哪呢？作者回复: 是的，顶点着色器执行次数和顶点数量有关。插值发生在光栅化的时候。
共 3 条评论1
莫轩竹2020-08-01请问编写glsl有什么智能提示插吗，我用的vscode？作者回复: vscode有插件，商店里搜一下就有
1