一、初探生成艺术与NFT的交融
作者：ferluht
编译：崔皓
策划：孙淑娟、梁策
在数字艺术的浪潮中，生成艺术以其独特的魅力成为了人们的焦点。将带您走进生成艺术与NFT的世界，以蘑菇的设计案例为切入点，展示如何在区块链上利用JavaScript和Three.js技术，呈现虚拟世界中的艺术生成与发布过程。
背景：
我对NFT的兴起深感震撼，艺术品上链的构想让我充满期待。制造代币生成器，每次“铸造”代币时都能获得独特的艺术品，这是一种前所未有的奇妙体验。受到artblocks.io等艺术平台的启发，我决定在fxhash这一更加自主、便宜、环保的平台艺术的数字之旅。
一、生成式NFT艺术品
NFT艺术品，全称为Non-Fungible Token，即非同质化代币。它们以网页形式呈现，通过vanilla JavaScript或第三方库在画布上绘制。生成式NFT艺术品可根据特点分为以下几类：
1. 抽象数学艺术品：运用数学概念生成抽象图像，包括分形、吸引子、元胞自动机等，展示数学与艺术的完美结合。
2. 有形程序艺术品：通过参数化方式描述具体事物，将现实世界与虚拟世界巧妙结合。
3. 可变手绘艺术品：对图像预先绘制的部分进行简单随机化处理，创造实验性、互动性艺术品，甚至包括模块化合成器和游戏等。
二、实践创作生成式NFT艺术品的旅程——以画蘑菇为例
接下来，我们将进入技术环节，本次项目将完全使用Three.js库，其API使用方式易于上手。让我们开始蘑菇的生成之旅吧！
1. 生成菌柄的基础轮廓：运用Three.js中的CatmullRomCurve3类创建样条曲线，构建菌柄的基本样条线。设定垂直分辨率和角向分辨率，生成菌柄的顶点，并构建菌柄的轮廓曲线。这一过程是构建三维模型的基础。
2. 增强菌柄的自然感：为了模拟真实的菌柄形态，我们在其表面添加噪声，通过设定噪声参数来控制变形的程度。这些微小的随机变化使得菌柄形态更加自然。
3. 菌帽的生成与细节处理：菌帽的生成通过围绕菌柄顶部加入旋转的样条曲线实现。设定基础表面的位置，然后围绕菌柄进行旋转。通过编程方式模拟真实的菌帽纹理和形态，为后续加入噪声函数和细节处理打下基础。图解与说明部分详细展示了菌帽生成的各个阶段和关键步骤。代码片段解读与三维模型构建将更深入地这一过程的细节和技术要点。代码重构阶段将详细菌帽生成的代码逻辑和优化过程。整个模型构建过程体现了编程在艺术创作中的灵活性和便捷性高效性，为后续的模型优化和渲染打下了坚实的基础。随着技术的深入和应用场景的不断拓展我们将带来更多关于生成艺术和NFT的精彩内容为您呈现更广阔的数字艺术天地。期待下一次的分享能够与您共同走进更奇妙的数字艺术世界。在下一篇中我们将深入代码重构的细节以及如何通过编程方式进一步优化蘑菇模型的形态纹理和色彩以创造出更加逼真的虚拟艺术作品敬请期待！接下来，我们开始构建我们的蘑菇模型，首先定义了空的点数组`cap_points`和索引数组`cap_indices`，它们将用于存储菌帽的顶点和面的信息。
一、菌帽顶点的生成
菌帽的顶点是通过函数`cap_surface(a0, t0)`基于极坐标生成的。这个过程涉及多个步骤：从`(a0, t0)`计算`(a, t)`以获取新的坐标，例如应用噪声影响；接着计算样条值；围绕柄端旋转一定的角度；最后应用其他噪声或变换。函数返回的是菌帽表面的一个点。为了生成菌帽的所有顶点，我们遍历角分辨率和径向分辨率，对于每个`(a0, t0)`，调用`cap_surface`函数获取表面的点，并将其添加到`cap_points`数组中。
二、菌帽面的生成与BufferGeometry的创建
完成所有顶点的生成后，我们接下来要计算面的索引并创建一个`BufferGeometry`对象。这里，我们利用THREE.js库中的`BufferGeometry`类来创建模型。我们设定位置属性，将所有的顶点坐标存储在一个Float32Array中。然后，我们设定面的索引，最后计算并设定顶点法线。
三、菌帽的噪声应用
为了让菌帽看起来更真实，我们需要在其表面添加噪声。这些噪声分为径向噪声、角度噪声和法线噪声。径向噪声影响顶点在基础样条上的相对位置，角度噪声改变围绕柄顶部基础样条的旋转角度，而法线噪声则改变顶点沿基面的位置。
在定义菌帽表面时，我们应用2D Perlin噪声来扭曲表面，这里使用noisejs库来完成。通过在不同位置应用不同强度的噪声，我们可以创建出自然且随机的菌帽表面。噪声在构建蘑菇的三维模型时，被广泛应用于创建自然、随机的表面纹理。
在图5中，我们可以看到菌帽上运用了三种不同的噪声分量：径向、角度和法线。这些噪声共同为菌帽的表面增加了丰富的细节和纹理。具体来说：
径向噪声沿着从中心点向外的方向应用，改变菌帽表面的高度，创造出自然起伏的效果。
角度噪声则在菌帽表面上添加微小的旋转扰动，使每一部分都稍微偏离其原始位置，增加模型的动态和真实感。
法线噪声通过改变表面的法线方向，为蘑菇的表面带来更为细腻的变化和纹理。
当我们构建蘑菇的其他部分，如菌鳞、菌褶和菌环时，可以采用类似的方法应用噪声，并根据需要进行调整和优化。
三、蘑菇的几何形态与碰撞检测
在这片奇妙的土地上，每一朵蘑菇都有独特的几何形态。为了真实呈现蘑菇的场景，我们需要进行碰撞检测。想象一下，在一个蘑菇丛林中，多个蘑菇之间可能会出现交叉层叠的情况。为了确保场景的真实呈现，我们需要进行精细的碰撞检测。这里使用光线投射的方法，对每个网格点进行检测，从而判断蘑菇之间的碰撞关系。为了减少计算时间，我们还会为每一个蘑菇生成低模，利用低模来进行碰撞检测。具体实现时，我们对每个顶点进行循环，计算其在全局坐标系中的位置，然后创建光线投射器进行碰撞检测。如果检测到碰撞且碰撞距离小于光线方向向量长度，则触发碰撞处理。
除了真实的呈现，我们还追求展现蘑菇的艺术魅力。通过精细的几何绘制、碰撞检测以及风格化的渲染，我们尽力还原了蘑菇的真实与美丽。最终，我们实现了蘑菇轮廓的铅笔画风格渲染效果，展现出了这片奇妙蘑菇世界的独特魅力。深入蘑菇的纹理与色彩：一个充满想象力的三维艺术
让我们继续这个充满奇幻色彩的世界，聚焦于蘑菇的魅力。今天，我们将一同蘑菇的纹理与色彩，以及如何通过技术手段为其注入生命力。
在三维艺术中，蘑菇的表面应该是充满噪点与柔和阴影的完美结合。如果你不想处理UV，可以采用BufferGeometry API为对象定义顶点颜色。通过这种方式，我们可以实现顶点颜色的参数化，让色彩随着角度和位置的变化而变化。这在我们打造蘑菇的噪声纹理生成时，尤为重要。
如图9所示，蘑菇的每一个顶点都带有丰富的色彩，这些色彩随着角度和位置的变化呈现出独特的效果。为了实现这种效果，我们借助EffectComposer，添加了一些全局噪声和模拟照相膜的随机光学纹理——Film Grain。以下是实现这一视觉奇观的代码流程：
我们创建渲染器并设置抗锯齿，以确保图像更加细腻、自然。然后，我们定义OutlineEffect，为蘑菇添加轮廓效果，使其更加立体。
接下来，我们创建EffectComposer，并添加渲染通道和FilmPass。通过调整各种参数，如噪声强度、扫描线强度、扫描线计数和灰度等，我们可以控制蘑菇的彩色和噪点效果。
图10展示了通过这种方法创造的蘑菇效果，其色彩丰富且充满噪点。蘑菇的纹理和色彩设计几乎已经完成。
但蘑菇的魅力不仅仅在于其外表，更有其名字的魅力。为了生成这些名字，我们采用了马尔可夫链技术。这项技术接受了上千个蘑菇名称的训练，通过预处理和标记这些名称，生成了独特的转换概率。在JS端，我们读取这些概率并堆叠标记来生成单词，创造了一系列富有想象力的蘑菇名称，如Stricosphaete cinus、Fusarium sium等。
结合复杂的视觉效果设计和这些独特的名字，每一个蘑菇作品都独一无二且充满艺术感。我们在fxhash上铸造了十五个独特的蘑菇作品，每一个都是我们的心血结晶。在发布时，只需将代码中的随机调用更改为fxrand()方法，即可确保哈希的唯一性并满足其对输出的特定要求。
在沙箱中测试代币后，即可开启铸造过程。《蘑菇图集》就此诞生！这是一件充满挑战性和前沿性的作品，展现了不同质的美。
值得一提的是，这篇文章的背后离不开创作者崔皓的辛勤付出。他的丰富经验和对技术的热爱使得这个作品得以完美呈现给大家。崔皓对蘑菇的纹理与色彩有着独特的见解和敏锐的洞察力，他的创作让这一作品成为了一件真正的艺术品。
《蘑菇图集》不仅是一件艺术品，更是一次技术创新的尝试。我们希望大家能够深入了解代币背后的故事和技术细节，同时也能够感受到蘑菇的魅力。
