30:T8d0,{ const loop = dots.regl.frame(() => { const n = 100; const pointSize = 4.0; dots.regl.clear({ color: [0, 0, 0, 0.2] }); dots.regl({ frag: ` precision mediump float; uniform vec4 color; void main () { if (length(gl_PointCoord.xy - 0.5) > 0.5) { discard; } gl_FragColor = color; }`, vert: ` precision mediump float; attribute vec2 position; uniform float pointWidth; uniform mat4 view; uniform mat4 projection; void main () { gl_PointSize = pointWidth; gl_Position = projection * view * vec4(position, 0, 1); }`, attributes: { position: ({ tick }, props) => { const radius = 10; const buffer = []; for (let i = 0; i < n; i++) { buffer.push([ radius * Math.cos((i * tick) / 100), radius * Math.sin((i * tick) / 100) ]); buffer.push([ 0.75 * radius * Math.cos(-(i * tick) / 100), 0.75 * radius * Math.sin(-(i * tick) / 100) ]); buffer.push([ 0.5 * radius * Math.cos((i * tick) / 100), 0.5 * radius * Math.sin((i * tick) / 100) ]); } return buffer; } }, uniforms: { pointWidth: pointSize, color: ({ tick }) => { return [ Math.sin(tick / 13), Math.cos(tick / 17), Math.sin(tick / 19), (2 + Math.cos(tick / 23)) / 2 ]; }, view: ({ tick }) => { const t = 0.01 * tick; return mat4.lookAt( [], [30 * Math.cos(t), 2.5, 30 * Math.sin(t)], [0, 0, 0], [0, 1, 0] ); }, projection: ({ viewportWidth, viewportHeight }) => { return mat4.perspective( [], Math.PI / 4, viewportWidth / viewportHeight, 0.01, 1000 ); } }, primitive: 'points', count: 2 * n })(); }); invalidation.then(() => loop.cancel()); return dots.canvas; }31:[] 2e:{"title":"Web GL Tutorial","cells":[{"id":0,"value":"md`# Web GL Tutorial`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`\n## 参考资源\n### REGL\n- [Official Gallery](https://regl-project.github.io/regl/www/gallery.html)\n- [Gallery Source Code](https://github.com/regl-project/regl/tree/gh-pages/example)\n- [REGL API](http://regl.party/api)\n- [REGL Introduction](https://vallandingham.me/regl_intro.html)\n- [The Book of Shaders](https://thebookofshaders.com/)\n- [The Book of Shaders Github](https://github.com/patriciogonzalezvivo/thebookofshaders)\n- [Online Editor](http://editor.thebookofshaders.com/)\n\n### WebGL\n- [WebGL Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html)\n- [WebGL Shaders and GLSL](https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html)\n- [WebGL Collection by Ricky Reusser](https://observablehq.com/collection/@rreusser/webgl)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"md`## 基本功能`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"md`\n### 清除画布\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"viewof clearColor = {\n const form = html`\n \n `;\n\n form.oninput = () =>\n (form.value = {\n red: form.red.value,\n green: form.green.value,\n blue: form.blue.value,\n alpha: form.alpha.value\n });\n\n form.oninput();\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"baseGL = createGLContext()","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"{\n baseGL.regl.clear({\n color: [clearColor.red, clearColor.green, clearColor.blue, clearColor.alpha]\n });\n\n return baseGL.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"md `\n### 三角形绘制\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"triangle = createGLContext()","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"{\n triangle.regl({\n frag: `\n precision mediump float;\n uniform vec4 color;\n\n void main () {\n gl_FragColor = color;\n }`,\n\n vert: `\n precision mediump float;\n attribute vec2 position;\n\n void main () {\n gl_Position = vec4(position, 0, 2);\n }`,\n\n attributes: {\n position: [[-1, 1], [-1, -1], [1, -1]]\n },\n uniforms: {\n color: [0, 0, 1, 0.5]\n },\n count: 3\n })();\n\n return triangle.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`\n### 矩形绘制\n 矩形可分解成两个直角三角形，通过矩形的左上角、右下角分解后，生成位置矩阵\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"rectangle = createGLContext()","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"{\n rectangle.regl({\n frag: `\n precision mediump float;\n uniform vec4 color;\n\n void main () {\n gl_FragColor = color;\n }`,\n\n vert: `\n precision mediump float;\n attribute vec2 position;\n uniform float scale;\n\n void main () {\n gl_Position = vec4(position, 0, scale);\n }`,\n\n attributes: {\n position: [[-1, 1], [-1, -1], [1, -1], [-1, 1], [1, 1], [1, -1]]\n },\n uniforms: {\n color: [0.5, 0.5, 0, 1],\n scale: 1.5\n },\n count: 6\n })();\n\n return rectangle.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"md `\n### 动态绘制\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"dots = createGLContext(width / 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"md`\n## 通用功能\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"md`\n### 创建绘图\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"createGLContext = (height = 480, options = {}) => {\n const canvas = html`