一个简单利用WebGL绘制频谱瀑布图示例
## 先看效果  还是比较节省性能的，这个还是包含了生成测试数据的性能，实际应用如果是直接通信获得数据应该还能少几毫秒吧 ... »
我用WebGL打造了一款动态壁纸
# 我用WebGL打造了一款动态壁纸 ## 简述 最近在给自己电脑换壁纸的时候发现了一张很有特点的图（就是下面这张），于是我突发奇想，要是能把这张图变成一张动态的壁纸。那该多好。于是我打算用threejs开发一个3D的动态壁纸网页。 `函数可以获取`WebGLRenderingContext`。 跟据参数的不同，`getContext()`函数可以获取不同种类的渲染上下文。 ### 接口 **` ... »
打造原生 WebGL 2D 引擎：一场创意与技术的融合
# 打造原生 WebGL 2D 引擎：一场创意与技术的融合 ## 1.引言 在当今数字化时代，网页的功能越来越丰富，已经远远超越了传统的文本和图片呈现。我们生活在一个充满交互性和视觉魅力的网络世界。每天都会遇到许多令人惊叹的网页效果和动画。作为一个Web3D图形的开发，希望可以通过网页来实现更多强大 ... »
H5 WebGL实现水波特效
# 前言 零几年刚开始玩电脑的时候，经常在安装程序上看到一种水波特效，鼠标划过去的时候，就像用手在水面划过一样，感觉特别有意思。但是后来，就慢慢很少见过这种特效了。最近突然又想起了这种特效，于是开始折磨怎么实现这种效果。 # 思路 我们知道，水波的运动轨迹可以看成随时间变化的三角函数，那么我们可以记 ... »
ChatGPT 时代，程序员的生存之道 | 人工智能 AI
ChatGPT 近期炙手可热，仿佛没有什么问题是它不能解决的。出于对 ChatGPT 的好奇，我们决定探索下它对于前端开发人员来讲，是作为辅助工具多一些，还是主力工具更多一些？ ... »
图扑虚拟现实 VR 智慧办公室可视化
图扑软件基于自研可视化引擎 HT for Web 搭建的 VR 图扑软件天津分部办公室，是将天津分部办公室搬到 VR 虚拟场景。 ... »
使用 React Three Fiber 和 GSAP 实现 WebGL 轮播动画
参考：[Building a WebGL Carousel with React Three Fiber and GSAP](https://tympanus.net/codrops/2023/04/27/building-a-webgl-carousel-with-react-three-fibe ... »
WebGL高级变换之Matrix4使用介绍
目录 引言 gl-matrix简介 示例--旋转矩阵变换 WebGL按列矩阵 gl-matrix 旋转矩阵 复合变换 效果 放缩因子 引言 上一篇结尾的说到了按列矩阵，但是如果是按照最原始的方式变换的话，开发的成本其实是很高的，所以，只需要了解原理即可，在实际开发中，我们会用到封装后 »
WebGL 绘制与变换使用示例详解
目录 缓冲区对象(buffer object) api说明 绘制图形 参数类型 移动、旋转、缩放 自动旋转 缩放 补充说明 缓冲区对象(buffer object) 其中的API方法的说明官方网址：WebGLRenderingContext 紧接上一篇的问题，其实通过片元着色器可以修 »
WebGL 颜色与纹理使用介绍
目录 引言 颜色 三角形颜色 纹理 纹理坐标 特别说明： 图片坐标 解决方案 纹理图像 着色器设置 引言 基于之前的知识，这里主要是 将顶点的其他数据--如颜色等-传入顶点着色器 图元光栅化--在顶点着色器和片元着色器之间的从图形到片元的转化 将纹理映射到图形或三维对象的表面上 »
WebGL 多重纹理的使用介绍
目录 引言 激活 绑定 配置 分配 传递 效果 代码 着色器设置 数据缓存区的设置 纹理对象的初始化 绘制和动态变化 小结一下 引言 基于上篇的内容，纹理中最小的单位是纹素，若干纹素组成一个纹理单元，每个纹理单元用一个number值来管理，那么我们来看看它是如何工作的。 激活 »
CesiumJS 源码杂谈 - 从光到 Uniform
之前对实时渲染（RealTimeRendering）的殿堂就十分向往，也有简单了解过实时渲染中的光，无奈一直没能系统学习。鉴于笔者已经有一点 CesiumJS 源码基础，所以就抽了一个周末跟了跟 CesiumJS 中的光照初步，在简单的代码追踪后，发现想系统学习光照材质，仍然是需要 RTR 知识的， ... »
webgl 系列 —— 着色器语言
其他章节请看： webgl 系列 着色器语言 本篇开始学习着色器语言 —— GLSL全称是 Graphics Library Shader Language （图形库着色器语言） GLSL 是一门独立的语言，和其他语言一样有自己的变量、运算符、函数、循环(for)、控制语句（if）、函数、数组等等。 ... »
webgl 系列 —— 着色器语言
其他章节请看： webgl 系列 着色器语言 本篇开始学习着色器语言 —— GLSL全称是 Graphics Library Shader Language （图形库着色器语言） GLSL 是一门独立的语言，和其他语言一样有自己的变量、运算符、函数、循环(for)、控制语句（if）、函数、数组等等。 ... »
webgl 系列 —— 绘制猫
其他章节请看： webgl 系列 绘制猫 上文我们了解了如何绘制渐变彩色三角形，明白了图形装配、光栅化，以及片元着色器计算片元的颜色。 现在如果让你绘制如下一只猫。难道绘制很多三角形，然后指定它们的颜色？那样简直太难、太繁琐了。 这时可以使用三维图形学中的纹理映射技术来解决这个问题。 纹理映射简单来 ... »
webgl 系列 —— 绘制猫
其他章节请看： webgl 系列 绘制猫 上文我们了解了如何绘制渐变彩色三角形，明白了图形装配、光栅化，以及片元着色器计算片元的颜色。 现在如果让你绘制如下一只猫。难道绘制很多三角形，然后指定它们的颜色？那样简直太难、太繁琐了。 这时可以使用三维图形学中的纹理映射技术来解决这个问题。 纹理映射简单来 ... »
webgl 系列 —— 渐变三角形
其他章节请看： webgl 系列 渐变三角形 本文通过一个渐变三角形的示例逐步分析：varying变量、合并缓冲区、图形装配、光栅化、varying 内插 绘制三个点v1 需求：绘制三个相同颜色的点，效果如下： 通过三角形的学习，这个需求非常容易实现。代码如下： const VSHADER_SOUR ... »
? 和我一起学【Three.js】「初级篇」：0. 总论
「和我一起学 XXX」是我 2023 年的一个新企划，目的是向读者（也包括未来的自己）介绍我正在学习的某项新技术。文章会通过长期反复迭代的方式保持其内容的新鲜度。文章有较大内容更新时，会在文章开头进行更新时间说明（由于时间精力有限，更新的内容只能保障少数几个平台的同步，请见谅）。 1. 什么是 Th ... »
如何使用webgl(three.js)实现3D消防、3D建筑消防大楼、消防数字孪生、消防可视化解决方案——第十八课（一）
three.js、webgl、3D消防、智慧消防、三维消防、使用three.js(webgl)搭建智慧楼宇消防、3D园区、3D厂房、3D仓库、设备检测、数字孪生、物联网3D、物业3D监控、物业基础设施可视化运维、3d建筑,3d消防,消防演习模拟,3d库房,webGL,threejs,3d机房,bim... ... »