泊头公司做网站,重庆网站营销案例,北京市网站开发公司,制作网页的超文本标记语言WebGL 绘制圆点
基于片元着色器来画圆形片元着色器在屏幕中画图是基于一个个的像素的每次画一个像素时#xff0c;都会执行片元着色器中的main方法那么#xff0c;我们就可以从这一堆片元中(n个像素点)找出属于圆形的部分片元的位置叫做 gl_PointCoord (一个点中片元的坐标位…WebGL 绘制圆点
基于片元着色器来画圆形片元着色器在屏幕中画图是基于一个个的像素的每次画一个像素时都会执行片元着色器中的main方法那么我们就可以从这一堆片元中(n个像素点)找出属于圆形的部分片元的位置叫做 gl_PointCoord (一个点中片元的坐标位) 比如一个点的宽高都是1 , 片元的 x,y 位置在 0 - 1 之间点的中心点的坐标位置是(0.5, 0.5), 如果片元到中心的位置 小于 0.5那么可以认为这个片元是在圆内的这样只渲染圆内的片元圆外的片元就不再渲染 文档 https://registry.khronos.org/OpenGL-Refpages/gl4/html/gl_PointCoord.xhtmlhttps://registry.khronos.org/OpenGL-Refpages/gl4/
script idfragmentShader typex-shader/x-fragmentprecision mediump float;uniform vec4 u_FragColor;void main() {float dist distance(gl_PointCoord, vec2(0.5, 0.5));if(dist 0.5) {gl_FragColor u_FragColor;} else {discard;}}
/scriptdistance 是计算两个点之间距离的函数discard 丢弃即不会一个片元进行渲染其他参考上篇文章来画出圆形
WebGL 中与CSS配合展示背景图
在 css 中设置背景图#canvas {background: url(./bg.jpg);background-size: cover;background-position: right bottom;
}在 js 刷底色的时候, 给一个透明色, 这样才能看见canvas的css背景gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);WebGL中片元透明度的设定
一般来说绘制图形让图形有一定的颜色并且有一定的透明度光是使用 uniform4fv 设置是不行的还需要做两件事gl.enable(gl.BLEND); // 开启片元的颜色合成功能
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); // 设置片元的合成方式之后正常使用uniform4fv进行渲染即可
const arr new Float32Array([0.87, 0.91, 1, a]);
gl.uniform4fv(u_FragColor, arr);WebGL中设置图形的动画
所谓的动画就是一帧一帧的图像变化累计的结果如果我们想要使用代码实现动画还需要了解一下概念 关键帧可以说这是动画中的里程碑连续两个关键帧之间我们可以用数学来实现渐变时间轨一次动画执行完成所需要的时间轨道包含不同的关键帧通过关键帧对其中目标对象的状态进行插值计算补间动画一个物体不同关键帧即连续相邻的两个关键帧之间的状态进行差值运算得到当前过渡时间的不同画面来实现平滑过渡合成不同物体所表示的多个时间轨的集合 对动画进行封装 框架层面我们要针对合成对象做设计画布上可能会有多个对象做动画运动运动层面我们要对时间轨做计算针对每个对象在一个完整动画的时间轨上应如何补全关键帧之间的间隔渲染
1 框架层面的设计
export default class Compose {constructor() {this.parent null // 当前对象parent置空这是一个编程习惯this.children [] // 用于存储多个对象}add(obj) {obj.parent this // 当前对象和当前工具建立关系this.children.push(obj) // 将当前对象加入子队列数组}// 这里是工具的updateupdate(t) {// 内部调用每个对象的update方法实现动画this.children.forEach(ele {ele.update(t)})}
}2 时间轨的设计
export default class Track {constructor(target) {this.target target // 当前对象this.parent null // 父对象合成对象默认为空this.start 0 // 开始时间默认是0this.timeLen 5 // 一个时间轨的长度也就是完成一次完整动画所需要的时间单位毫秒this.loop false // 是否循环播放动画this.keyMap new Map() // 关键帧的集合}// 当前对象的每一帧运动函数update(t) {const { keyMap, timeLen, target, loop } thislet time t - this.start // 当前时间距离开始时间的时间长度// 如果开启循环则加入取余操作将当前时间循环递增不让超过自身设定if(loop) {time time % timeLen}for(const [key,fms] of keyMap.entries()) {const last fms.length - 1 // 最后一项if(time fms[0][0]) {// 在第一个关键帧之前的设置为第一个关键帧的状态target[key] fms[0][1]} else if(time fms[last][0]) {// 时间在最后一个关键帧之后设定为最后一个关键帧的状态target[key] fms[last][1]} else {// 在各个中间态实行数学计算状态渐变即补间状态target[key] getValBetweenFms(time, fms, last)}}}
}// 补间状态计算函数
function getValBetweenFms(time,fms,last) {for(let i 0; i last; i) {const fm1 fms[i]const fm2 fms[i1]if(time fm1[0] time fm2[0]) {const delta {x: fm2[0] - fm1[0],y: fm2[1] - fm1[1],}const k delta.y / delta.xconst b fm1[1] - fm1[0] * kreturn k * time b}}
}上述 keyMap 关键帧集合这里是一个对象的关键帧集合结构如下[[对象属性1,[[时间1,属性值], //关键帧[时间2,属性值], //关键帧]],[对象属性2,[[时间1,属性值], //关键帧[时间2,属性值], //关键帧]],
]time 当前时间fms 某个属性的关键帧集合last 最后一个关键帧的索引位置其实现思路如下 遍历所有关键帧判断当前时间在哪两个关键帧之间基于这两个关键帧的时间和状态求点斜式基于点斜式求本地时间对应的状态 这里 y kx b 这个公式是一般公式(推荐)还可以用其他曲线公式来处理动画
3 应用
const compose new Compose()
const stars [] // 点数据的集合
canvas.addEventListener(click, function(event) {const { x, y } getPosByMouse(event,canvas) // 获取当前坐标这里具体实现可看之前博客代码只是做了个函数封装const a 1const s Math.random() * 5 2const obj { x, y, s, a } // x坐标y坐标s尺寸a透明度stars.push(obj)const track new Track(obj)track.start new Date()track.keyMap new Map([[a, [[500, a],[1000, 0],[1500, a],]]])track.timeLen 2000track.loop truecompose.add(track)
})渲染方法如下参考之前博客代码
function render(){gl.clear(gl.COLOR_BUFFER_BIT);stars.forEach(({x,y,s,a}) {gl.vertexAttrib2f(a_Position,x,y);gl.vertexAttrib1f(a_PointSize,s);gl.uniform4fv(u_FragColor, new Float32Array([0.87,0.92,1, a]));gl.drawArrays(gl.POINTS, 0, 1);})
}用请求动画帧驱动动画连续更新数据渲染视图
!(function ani() {compose.update(new Date())render()requestAnimationFrame(ani) // 重复执行
})()
