qq_21476953的博客

混合公式确定如何将新像素与 中 WebGLFramebuffer 已有的像素组合。: RGB 混合方程和 alpha 混合方程设置为单个方程。: 用于分别设置 RGB 混合方程和 alpha 混合方程。: 分别混合 RGB 和 alpha 分量的混合函数。destination: 已经画在了帧缓冲区中的颜色。: RGB 和 alpha 设置为单个混合函数。, destination 的 RGBA.source: 接下来要画的颜色。, source 的 RGBA.用于混合像素算法的函数。

在传统的 canvas 绘图中，绘制操作是即时执行的，意味着一旦调用绘图 API 绘制图形，绘制指令就会立即发送到绘图设备进行处理，然后绘制缓冲区的内容会被复制到显示缓冲区并进行显示。canvas的绘制缓冲区和显示缓冲区理解为两个容器，它们用于存储绘制结果。绘制缓冲区是用于存储渲染管线生成的像素数据，而显示缓冲区是绘制缓冲区最终的存储位置。，绘制缓冲区的内容一般会被复制到显示缓冲区中，并在屏幕上进行显示。，是指所有的绘制指令已经被发送到绘图设备（如 GPU）进行处理，并且绘制缓冲区中的图像已经被更新。

three.js 深度不完全解读

浅聊 Three.js Pass.needsSwap的作用

three.js 最小环境

three.js 硬核代码片段

shader 广告牌(sprite)1、positionvs:vColor = position.x;fs:varying float vColor;void main() { gl_FragColor = vec4(vec3(vColor, 0., 0.), 1.);}可以看出来,x分布:--------------->x-10 0 10如果:vColor = position.x * -1;那么:也就是说,符号只会改变方向.2、始终朝向

探究眼坐标前提条件：相机的位置=50顶点着色器:varying float viewZ;varying float viewW;void main() { // 都变换到相机(眼)坐标系下 vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); viewW = mvPosition.w; viewZ = mvPosition.z; gl_Position = projectionMatrix * mvPosition;

可视化NDC ndc = gl_Position.xyz / gl_Position.w;varying vec3 ndc;void main() { gl_FragColor = vec4(vec3(ndc.x+1)*0.5, ndc.y, 0.), 1.);}范围是-1~1,也可以映射到0~1:vec3 fNdc = ndc;fNdc.xy += 1.;fNdc.xy *= 0.5;gl_FragColor = vec4(vec3(fNdc.x, fNdc.y, 0.),

探究 gl_Position.w结论: w是顶点距离相机的距离。0、环境搭建geometry:const size = 10var geometry = new THREE.BoxBufferGeometry(size, size, size);var material = new THREE.ShaderMaterial({ uniforms: { camPos: { type: "f", value: this.stage.camera.position.z } }, v

效果:思路:对纹理采样,生成几何体。采样贴图:核心代码:import Stage from 'three_stage'import * as THREE from 'three'import * as dat from "dat.gui";import fragment from "./shader/fragment.glsl.js";import vertex from "./shader/vertex.glsl.js";window.THREE = THREEclass Op

Github首页地球学习(2)-光源参考1参考2效果:代码:export default function getGlowLight() { const cl = 25; const mat = new THREE.ShaderMaterial({ uniforms: { c: { type: "f", value: 0.7, }, p: { type: "f", value: 1

Github首页地球学习(1)-Earth参考1参考2说明原始代码使用 event-emitter,作为事件分发器,需要借助打包工具使用。最终效果:该小结效果：1、边缘发光顶点着色器: varying vec3 vWorldPosition; void main() { // 常规操作 vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_Position = projectionM

基于模型的扩散效果(学习精神小伙的代码)最终效果:shadertoy:// 应用: 基于模型的扩散效果#define PI 3.1415926float lerp (float x,float y,float t ) { return ( 1.0 - t ) * x + t * y;}void mainImage( out vec4 fragColor, in vec2 fragCoord ){ // 当前像素的位置 vec2 uv = (fragCoord.xy/iR

使用svg生成背景参考:https://formidablelabs.github.io/github-2049/?cachebust=123使用svg生成背景也可以使用react-vectory.js生成svg图表,我没有实现。依赖:生成背景的关键代码:Background.jsimport { getSVGGeometry, SVG } from "./panel.js";import { randomSquares } from "./shapes.js";export d

sdf 渲染文字在three.js中最终效果:上面是 SDF文字贴图,下面是在webgl中渲染。实现使用tiny-sdf制作sdf文字贴图。在场景中渲染,核心类:/** * 生成SDF标签 */class LabelSDF { constructor({ height, content }) { const bufferF = 8; // 影响生成文字图片的分辨率 const fontSize = 256; const fontWidth = fo

取余运算应用(2)-在glsl中初始化,根据到圆心的距离绘制一个圆void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = (fragCoord.xy/iResolution.xy-0.5); float l = length(uv); fragColor = vec4(vec3(l),1.);}一、mod(x,1)只改变mod(x,y) 的x,y 始终等于11、情况1,对1取余void mainIma

取余运算应用(1)-在js中1、应用1, 让一个数在一个范围内内循环// 参考: https://zhuanlan.zhihu.com/p/55210125// eg.让temp在0~5循环let temp = 0;setInterval(() => { temp++; temp = temp % 6; console.error(temp);}, 500);2、应用2, 防止越界let arr = [1, 2, 3, 4, 5];let index = 0;functio

物体相交描边可以应用在:WebGL2 : 064 : Impact Shield EffectFunWithWebGL2当物体靠近表面时，如何编写一个可以点亮的着色器？简单的盾牌着色器参考代码最终效果:距离能量罩(盾牌)效果只差一步。1、方案实现思路:首先得到相交物体的深度图。根据自己的深度和刚才得到的深度进行差异比较。最后放大差异即可。2、其他方案使用深度纹理: MeshDepthMaterial,但是该方法对相机参数(far, near)要求较高,实现难度大。检查

网格半边结构(Half edge mesh)1、网格的表示在计算机图形学上，表达表面网格的数据结构有三种，分别是面列表( List of faces)、邻接矩阵(Adjacency matrix)、半边结构(Half-edge)。面列表示例:邻接矩阵示例:半边结构示例:2、网格分类流形网格(manifold mesh)非流形网格(non-manifold mesh)如果网格的每个边最多被两个面片共用，那么这个网格就是流形网络，否则称为非流形网络。非流形网络例子:3、网格半边结

代码仓库 looper案例分析出处 缩放盒子盒子的缩放动画1、缓动曲线这个例子使用的是y=x^4这个缓动曲线。function InQuart(t) { return t * t * t * t; }其他缓动曲线:缓动曲线的作用:对于给定的一个输入函数,使用缓动函数的方式去逼近拟合。例如:缓动函数是:y=x^4。输入函数是:y=sin(x)那么缓动之后的逼近就是:y=t^4, t=sin(x)2、时间时间使用api performance.now()获取, 0~1范围。

three.js 中shader 的几种呈现方式这里以改变box的颜色为例。方式1-使用three.js 内置的shader// 改变颜色-方式1: 通过顶点属性修改, 使用three.js自带shader addColorBox1(size) { var geometry = new THREE.BoxBufferGeometry(size, size, size); var material = new THREE.MeshBasicMaterial({ ver

参考:Three.js Optimize Lots of ObjectsThree.js 优化之合并 Mesh(2)接着上一篇,当前绘制了1.9万个长方体,优化的方向将所有盒子合并为一个几何。 // 版本2-合并几何体 addBoxes_ver2(file) { const scene = this.stage.scene const {min, max, data} = file; const range = max - min; // 我们可以将lon辅.

参考Three.js中矩阵和向量的使用教程(附例子)改变对象位置的几种方式改变对象的位置、缩放、角度有多种方式。这里以位置为例。让其在出现y轴正方向5处。addBox(size) { var geometry = new THREE.BoxBufferGeometry(size, size, size); var material = new THREE.MeshPhongMaterial({ color: 0x63e42a, emissive:.

参考:Three.js Optimize Lots of ObjectsThree.js 优化之合并 Mesh(1)Three.js 优化方向模型不应该太大,添加到场景的时间太长模型loader可以使用woker优化合并 mesh接下来使用合并 mesh的方式做一个例子:世界人口可视化:World Population。最终效果:1、数据源世界人口公开数据出处数据格式:ParameterDescriptionRequirementsNCOLSNumb.

https://github.com/mrdoob/three.js/wiki/Migration-Guide#r110–r111在r111新增加了下面的代码:这就意味着，BufferAttribute 必须要有 index和 position 属性, 所以,代码要这么写: this.geometry.addAttribute('charIndex', charIndicesBufferAttribute); this.geometry.setIndex(new THREE.BufferAtt

一个小工具: 字符串rgba转数组。/** * 字符串rgba转数组 * @param {*} color "rgba(1,2,3,4)" * @param {*} normalized 是否被255归一化 * @return [1,2,3,4] */export function rgba2arr(color, normalized = true) { let ret = []; let colorStr = new RegExp(/(?<=\()\S+(?=\))/).exec(

在3d作图软件模型正常,但是模型导入到three.js后坐标不对。可能原因:相机的坐标系和模型坐标系是否相同.（都是Y轴朝上？）模型的子模块的坐标系可能是相对的世界坐标系,需要设置坐标为局部坐标。...

光带冲击波效果参考出处: https://blog.youkuaiyun.com/lin5165352/article/details/89521029原理// https://thebookofshaders.com/glossary/?search=smoothstepfloat plot(vec2 st, float pct){ return smoothstep( pct-0.2, pct, st.y) - smoothstep( pct, pct, st.y);}voi

广告牌效果2-绕任意轴的朝向相机基本思路:根据广告牌的法线确定与相机的夹角然后重新生成广告牌对应的几何体坐标最后效果:(无论如何旋转,该广告牌都朝向相机)1、明确一些名词 // // ^ up // | // | // start ---------> end direction = end - start这是一个平面几何体包含起点坐标start和终点坐标end平面的宽度是width平面的方向是directio

素描效果案例分析自: three.js/ToonShader.js/ToonShaderHatching1、gl_FragColor顶点着色器仅仅是显示几何体, 条纹处理都在片元着色器。常规的顶点着色器:varying vec3 vNormal;void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); vNormal = normalize( normalMatrix

错误信息：[.WebGL-0x7feb0c1a0600]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0原因:可能是数组没有类型化多个uv的情况，每个uv的数量要和几何体顶点的总数量相等 let geometry = new THREE.BufferGeometry(); geometry.setAttribute('position'

014-自定义网格几何体-九宫格代码最后效果:1、顶点描述(position)确定原点:顶点坐标: const points = [ // 第0列起点 { x: -140, y: 0, z: 0 }, { x: -140, y: 40, z: 0 }, { x: -140, y: 100, z: 0 }, { x: -140, y: 140, z: 0 },...

这是学习Three.js 官方案例系列001-webaudio - visualizer体验地址片元 shader:// tAudioData: 0~64数组,只在 tAudioData[0].a 有数值,该数值表示该通道上的音值大小。uniform sampler2D tAudioData;uniform float style;varying vec2 vUv;void...