又是时隔两个月才更新这第二篇教程，原本以为最多一个星期就能更新出来，但写着写着总觉得有些地方解释的不够清楚，于是写到一半就放在一边，终于觉得不能再拖下去才找出来花两天继续写下去。可...

一个简易的烟花。 一个烟花的生命周期，从初升到徇烂到凋零，这就是全过程。 亮点 首先需要来一个光点。 光点就是中心最亮， 距离越远，亮度衰减的越快，超出一定距离后，视觉上就无光了。 所以...

1.介绍 之前章节学习纹理的时候，我们是将外部现成的图片作为纹理，渲染到图像上。 而这里我们将要使用自己渲染的图像，作为纹理，渲染到另外一个图像上。也就是可以动态生成纹理。 2. 帧缓冲Fr...

打造原生 WebGL 2D 引擎：一场创意与技术的融合 1.引言 在当今数字化时代，网页的功能越来越丰富，已经远远超越了传统的文本和图片呈现。我们生活在一个充满交互性和视觉魅力的网络世界。每天都...

文章更新（可能 ❌ / 一定 ✅）没那么频繁，欢迎加入「可视化交流群」进行交流。加古柳微信「xiaoaizhj」备注「可视化加群」即可，也有机会围观古柳朋友圈，实时追踪最新动态！另外，大家可以点...

哈喽大家好啊，我是广州小井。上一小节中，我们实战了一个渐变色立方体的绘制，学习了新的绘制api，但是在文章的结尾，我留下了个疑问，就是如何绘制一个6面为不同纯色的立方体呢？那我们这一节...

【shader】模糊与区域清晰效果 背景—— 群里大佬发个有意思的视频 刚好有思路写了demo实现一下 shader基础入门的话可以看看这两位大佬的文章 Three.js 进阶之旅：Shader着色器基础图案-旷野之...

哈喽大家好啊，我是广州小井。上一节我们初步了解了相机和视图矩阵，并且通过 three.js 的 lookAt 方法实战感受了通过相机观测图形的效果，get 到了变换相机位置观测图形和变换图形自身是一个反...

我用WebGL打造了一款动态壁纸 简述 最近在给自己电脑换壁纸的时候发现了一张很有特点的图（就是下面这张），于是我突发奇想，要是能把这张图变成一张动态的壁纸。那该多好。于是我打算用threejs...

1.概况 之前粗略入门了一下计算机图形学和webgl，还有很多很多概念都没有涉及到，不过不影响学习新的工具threejs。它是一个帮助你绘制图像的工具库，封装了底层的webgl操作。学习的时候还是要谨...

哈喽大家好啊，我是广州小井。上一节我们初步了解了相机和视图矩阵，并且通过 three.js 的 lookAt 方法实战感受了通过相机观测图形的效果，get 到了变换相机位置观测图形和变换图形自身是一个反...

全景看图是一个比较有趣的功能，全景看图让我们有一种身临场景的感觉，给用户一种更直观的体验。实现全景看图通过CSS3D即可实现，但是这里我分享关于Three.js的全景看图，因为Three.js可以实现...

汽车的3D展示是一个比较常见的应用，今天我就通过three.js来与大家分享如何实现一个非常简单的3D汽车展示场景。 前言 虽然例子很简单，但也需要您掌握基本的three.js知识点，例如场景、模型等基...

问题引出 最近在做基于WebGL的路径追踪时，遇到了一个法线（凹凸）贴图的问题，如下图，凹凸效果走样特别严重。通过问题分析，目前渲染器还缺少对不同纹理过滤类型的实现，今天刚好完成了相关内...

哈喽大家好啊，我是广州小井。从上两个小节我们已经掌握了立方体的绘制方式，并且我们可以通过一定的手段（旋转）来观察出我们绘制的是一个立方体而不是普通的矩形。那么在这其中，涉及到了一些...

前言 本文将讲解网页3D开发中,大量使用的向量方面的知识内容,比如点乘叉乘的意义和作用。 将主要会围绕着什么是向量,作用,运算规则,几何意义和数学推导等几个方面展开。 什么是向量 向量是既有...

心里装着小星星生活才能亮晶晶。 写在最前 相信6月14号 Uzi 复出首场的比赛大伙都赶上了吧，看完感觉和上次复出的状态完全不一样，这一次像是来真的了，发挥的还算不错，对线打团丝毫没有掉链子...

如何实现点选 我们如何控制鼠标在点击后将目标图元做高亮或其他处理呢？ 嗯....，在web端如果是svg或者是dom，我们可以简单绑定click事件修改样式, 那本文差不多也结束了。 ? 额，别急着划开，...

antd得G6v5的alpha版本发布了 总的来说对性能有了质的提升，搓搓手期待！基于v5版本的demo,发布会demo、视频我放下面了： v5demo地址： G6 5.0：优雅 & 专业的图可视化引擎 v5发布会视频地...

本文将直接从threejs的源码的基础几何体正方体和球体入手，深度解析原理。如果有webgl的基础的话，那么几何体的制作是非常容易的。 正方体 我们先看正方体的源码实现 import { BufferGeometry }...