1. 简介 之前我们使用光照让物体表面有不同的颜色，看起来更加立体逼真。但是没有影子还是缺了点真实感，这里我们用到上一节的帧缓冲，通过阴影贴图shadow map或称深度贴图depth map技巧，实现...

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

哈喽大家好啊，我是广州小井。继上节实现了深入纹理 FILTER 后，本文将继续深入WRAP和多纹理的细节，探讨各种配置参数的效果，多纹理实战。文中附有大量实战案例在线演示，通俗易懂～ 因为要更...

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

哈喽大家好啊，我是广州小井。上一小节我们初步用矩阵实战了图形平移，但它的应用远不如此！本文，我们将继续深入矩阵，看看它是如何在复合变换中发光发热的吧～ 因为要更好的学习 WebGL 就需要...

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

WebGL 是一项令人兴奋的技术，它赋予了网页浏览器强大的3D图形绘制能力。通过 WebGL，我们可以在浏览器中创建逼真的3D场景、动画和交互体验。本文将带你深入了解 WebGL 的基础知识，并通过简单...

回顾曲线的绘制 前面使用造型函数绘制曲线的一般方法是， 计算出当前x坐标对应的曲线的y坐标y1，和当前片元凡人y坐标y0相减， 取其绝对值。 显然，当差值为0 的时候，说明这个点，精准的落在曲...

2.1 使用缓冲区对象 2.1.1 什么是缓冲区对象     缓冲区对象是WebGL系统中的一块内存区域，可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。 ...

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

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

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

哈喽大家好啊，我是广州小井。经过上两个小节的学习，我们基本掌握了矩阵在 WebGL 中的应用，2D的图形变换实现也不在话下了。那么这一小节，我们接着以上学习的变换效果，来实战图形动画，让图...

材质（Material）是用来定义物体外观的重要组成部分。它们决定了物体如何反射光线并显示在屏幕上。Three.js 提供了多种不同类型的材质，每种材质都有不同的特性和效果。材质就像物体的皮肤，它...

哈喽大家好啊，我是广州小井。继上一章节了解 WebGL 颜色和纹理后，接着来学习图形的二维变换。从本文开始我们将逐步了解 WebGL 中的图形二维变换、动画的实现。文中附有大量实战案例在线演示，...

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

哈喽大家好啊，我是广州小井。在学习和铺垫了很多枯燥无味的基础知识后，我们终于要开始接触到 WebGL 神奇的另外一面——三维图形了！于是乎，当我们学成以后，那种炫酷网页上面的 3D 效果对于...

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

大家好，我是前端西瓜哥，今天我们来了解 WebGL 的纹理对象（Texture） 纹理对象，是将像素（texels）以数组方式传给 GPU 的对象，常见场景是贴图，就是将图片的数据应用到 3D 物体上。 纹理对...

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