呀哈喽！这里是 alphardex。

MeshSurfaceSampler，是 three.js 的表面采样器，通过它，我们可以在一个Mesh的表面拾取一定数量的随机点位，从而实现一些炫酷的粒子特效，请看以下的效果（全屏最佳）：

https://code.juejin.cn/pen/7164008029766025223

本文将简要地介绍一下实现这个效果的思路

PS：本文标题 neta 了《孤独摇滚》的 live 曲《吉他与孤独与蓝色星球》

呀哈喽！这里是 alphardex。

之前我写过一篇液晶球相关的文章，里面是用顶点着色器和片元着色器来实现液晶球效果的，不过呢，之前同样写过一篇Raymarching 相关的文章，于是乎我在想能不能把这两种方法给结合起来，实现一个第二版的液晶球呢，经过几天的实验，最终写出了如下的效果（全屏打开最佳）：

https://code.juejin.cn/pen/7161774000031399943

本文将简要地介绍一下实现这个效果的思路

哟哈喽！这里是 alphardex。

Lycoris Recoil，又称“莉可丽丝”或“石蒜”，是笔者最近追完的一部番。这部番主要还是看美少女贴贴的日常，不论是 OP 的击股之交，泷奈的 Sakana~还是千束神一般的闪避能力等都令我记忆犹新。尽管后面几集剧情可能有点争议，但不影响我对这部番的喜爱。

目前还有在追的一部新番孤独摇滚也不错，女主社恐的性格真的跟我十分相似（悲）。

最近我心血来潮，想为石蒜这部动画做一个自制的人物介绍页面，素材借用的是动画官网的素材，原本想做一个简单的包含 CSS 动画的 Swiper 滑动展示页，但转念一想，既然一直在研究 WebGL，为何不搞点更炫的东西呢？于是乎，借助我的框架kokomi.js之力，我成功地将一个普通的 HTML 页面一步步地转化为了一个拥有酷炫交互的 WebGL 页面。

页面链接在下方，点击右上的 logo 全屏观看，效果最佳：
https://code.juejin.cn/pen/7159562292110032900

本文并不会详细地去教大家如何完整地做出整个页面的效果，而是来谈谈 HTML 转 WebGL 的方法以及 WebGL 特效的一些常用技法。

前言

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

（以下 demo 点开全屏观看效果最佳）

https://code.juejin.cn/pen/7141175290247512068

前言

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

前言

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

泼给莫，给托打贼！

前言

大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。本文就让我们来用kokomi.js实现一个非常经典的物理游戏——粉碎弹珠（Smash Hit）。

游戏中你将成为一颗弹珠，通过弹射来粉碎面前的一切障碍物，特别适合用来解压。

前言

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

前言

大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。

之前在练习写粒子特效的时候发现有些特效的实现跟物理知识有很大的关系（比如烟花特效），后来又碰巧发现了一本神书——The Nature of Code，它教你如何运用物理数学知识来模拟实现一些自然界的特效，读完后我的创作之魂被彻底激发，于是就有了这篇文章，它将带你从零开始实现一个由物理驱动的粒子特效。

以下是最终实现的效果图

让我们开始吧！

前言

大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。

最近开始玩起了 p5.js，发现这是一个很有意思的库，用它能创作出各种新奇有趣的特效，本文我们将一起来实现下图的鼠标移动特效。

让我们开始吧！