某科学的three.js

最近看到有小伙伴发了一个小米 SU7 的展示网页，那是相当的酷炫。花了几天功夫，我将上面的特效给还原了出来。

相信不久前大家已经被这个粒子动画给刷屏了吧： 之前看过很多人都在分析跟这个效果相关的跨窗口通信技术，尽管这样是挺好，但我依旧有点纳闷：为什么没有人讲讲背后的粒子特效是怎么实现的呢？

之前看到有人在浏览器端复刻了原神的登录界面，效果非常还原。 本文就让我们一起来看看这种效果是如何实现的，主要分析Shader相关的部分。 怀着学习的目的，我自己也写了一版。

呀哈喽！这里是alphardex。 在使用three.js开发时，有时会感觉场景的渲染不是非常美观，本文就来一步一步地将一个不是很美观的场景重新焕发它的生机。

呀哈喽！这里是alphardex。 最近我用three.js模拟了一下现实中的下雨效果，让我们一起来看看它是怎么实现的吧。 https://code.juejin.cn/pen/72002870966

呀哈喽！这里是alphardex。 最近受到轮回系作品《寒蝉鸣泣之时》中时空裂缝场景的启发，我用three.js实现了一个实时渲染的时空裂缝场景。本文将简要地介绍下实现该效果的要点。

呀哈喽！这里是alphardex。让我们一起来通过three.js的 MeshSurfaceSampler来打造炫酷的文字粒子特效吧！

呀哈喽！这里是alphardex。 让我们一起来看看如何用HTML和Raymarching来实现一种炫酷的液晶球效果吧~

哟哈喽！这里是alphardex。本文就让我们一起来通过莉可丽丝的人物介绍页案例来探究如何将HTML与WebGL进行融合的方法以及一些WebGL特效的常用技法吧~

大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。本文就让我们来用kokomi.js实现一个飘逸的3D轮播效果。

大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。本文就让我们来用kokomi.js的shadertoy组件将Shadertoy上的炫酷特效移植到我们的桌面上~

大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。本文就让我们来用kokomi.js的raymarching组件来画一个精灵球吧~ 泼给莫，给托打贼！

本文就让我们来用kokomi.js实现一个非常经典的物理游戏——粉碎弹珠（Smash Hit）。 游戏中你将成为一颗弹珠，通过弹射来粉碎面前的一切障碍物，特别适合用来解压。

大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。本文我们将认识一位新的小伙伴——kokomi.js，她能带给大家绝赞的3D创作体验

大家好，这里是 CSS兼WebGL 魔法使——alphardex。本文我们将用three.js来实现火花特效，一起来创作吧！

大家好，这里是 CSS兼WebGL 魔法使——alphardex。 本文我们将用three.js来实现风暴云特效，一起来创作吧！

大家好，这里是 CSS 魔法使——alphardex。 本文我们将用three.js来画个炫彩液晶球，一起来创作吧！

大家好，这里是 CSS 魔法使——alphardex。 做好离屏渲染的准备工作后，可以开始本文的重点——着色器了。 Long may the sunshine.

大家好，这里是 CSS 魔法使——alphardex。 爆炸，简而言之就是大量的微粒在一定空间内进行不规则的大幅运动而形成的奇观。说到“不规则”，我们首先就能想到一个词——“噪声”。

大家好，这里是 CSS 魔法使——alphardex。 平时我们见过很多的图片悬浮和滚动特效，大部分是用CSS和SVG实现的，但是有一种特效它们绝对实现不了——扭曲特效。为何？CSS擅长直线型变换，而SVG擅长曲线型变换。扭曲特效则两者都不是，它是像素级变换，能做到像素级变换的…