regl

原文链接: regl 三角形切片拟合二维圆 这种做法相对而言比较低效, 最好是先根据顶点是否相邻做分割, 用并查分割出几个集合, 然后每次在这些集合中绘制, 这样会减少大量时间 import createREGL from "regl"; import { randomColor } from "../../utils"; import Delaunator from "delaunator"; export default () => { const regl = createREGL(); const points: [number, number][] = []; const height = 100; const step = 4; for (let r = 0; r <= height; r += step) { for (let x = 0; x <= r; x += 10) { const y = (r ** 2 - x ** 2) ** 0.5; points.push([x, y]); points.push([x, -y]); points.push([-x, y]); points.push([-x, -y]); } } console.log(points.length); console.time("delaunay"); const delaunay =

原文链接: regl 画两个不同颜色的三角形拼接的矩形 分两次绘制, 每次三个点, color数组对应的是点的个数, 矩形四个点, 虽然两个三角形是六个点, 但是点只有四个, color也就是只有四个了 color中的值是[0,1], 如果这两个三角形在一次绘制中, 那么总会出现线性插值, 除非四个点都是一样的颜色, 这个其实可以在vs和fs中使用条件判断来实现 import createREGL from "regl"; import { randomColor } from "../../utils"; export default () => { const regl = createREGL(); regl.clear({ color: [0, 0, 0, 1], depth: 1, }); // windows上大多数情况下, 线宽都是1 const lineWidth = Math.min(3, regl.limits.lineWidthDims[1]); console.log("lineWidth", lineWidth, regl.limits); const drawTri = (position, elements, aVsColor) => { regl({ frag: ` precision mediump float; uniform vec4

1. modbus协议简介： 　　modbus协议基于rs485总线，采取一主多从的形式，主设备轮询各从设备信息，从设备不主动上报。 日常使用都是RTU模式，协议帧格式如下所示： 　　地址 功能码 寄存器地址 读取寄存器个数 寄存器数据1 ..... CrcL CrcH /* AA 03 00 00 00 0A DC 16 addr cmd regH regL lenH lenL crcL crcH 主机发送 AA 03 14 00 00 00 00 00 00 00 00 00 03 00 01 00 00 00 18 00 1C 00 00 81 4B 从机回复 addr cmd datelen .... AA 10 00 0a 00 01 02 00 02 主机修改从机寄存器值 addr cmd regH regL regNum datalen data */ 　 功能码及对应的操作字长： 目前比较简单的实现了读多个保持寄存器，以及写多个保持寄存器，由于不是使用的PLC，所以寄存器地址的划分没有严格按照上表，具体地址后面解释。 2.Modbus协议编写步骤：很多设备厂家都会有自己的modbus协议，大多数都不是很标准 　　　（1）分析板子的具体信息，编写不同的设备结构体，比如只读的结构体，可读写的结构体，保存配置信息的结构体（当主机发送改变配置信息的消息帧时，会改变相应的变量

I'm rendering circles using regl, and have three goals: The canvas should be transparent, showing HTML content behind it. Circles should be antialiased smoothly. Overlapping circles should look reasonable (blend colors, no corners showing) So far, I have this: Glitch code and demo . UPDATE: The demo links now reflect the working, accepted answer. Code below is unchanged. index.js const regl = require('regl'); const glsl = require('glslify'); const vertexShader = glsl.file('../shaders/vertex.glsl'); const fragmentShader = glsl.file('../shaders/fragment.glsl'); // Create webgl context and clear.