shader-park-core

<a href="https://shaderpark.com"><img width="1536" alt="Shader Park HeroF Crop2" src="https://yellow-cdn.veclightyear.com/835a84d5/005cab82-82ea-4bd7-9e77-22ddedb9b017.png"></a>

<span class="badge-npmversion"><a href="https://npmjs.org/package/shader-park-core" title="在NPM上查看此项目"><img src="https://yellow-cdn.veclightyear.com/835a84d5/03f9ec16-44a0-4248-be2e-d663ecbba2a1.svg" alt="NPM版本" /></a></span> <span class="badge-npmdownloads"><a href="https://npmjs.org/package/shader-park-core" title="在NPM上查看此项目"><img src="https://yellow-cdn.veclightyear.com/835a84d5/9fd5b0f9-8c54-4f89-af9d-a38672bb0893.svg" alt="NPM下载量" /></a></span>

Shader Park简化了使用JavaScript创建程序化图形的过程。 只需几行代码，即可创建具有以下特性的着色器：

• 动画效果
• 交互性
• 2D或3D

尝试在线编辑器 ✍️

浏览交互式文档 📖

基于模板/示例项目构建 🛠️

加入Discord社区 💬

轻松集成于：

• 网页
• three.js
• TouchDesigner
• Unity（开发中）

探索数百个示例

安装

npm install shader-park-core

使用方法

查看Glitch上的示例

CLI使用方法：

npm run toThreeJS my-sculpture.js npm run toOffline my-sculpture.js npm run toRawSDF4Meshing my-sculpture.js

用于SP网站开发：

在shader-park-core仓库中运行 npm link 或 yarn link

在shader-park-website仓库中运行 npm link shader-park-core 或 yarn link shader-park-core

API使用方法：

converters目录中的简单CLI工具是API使用方法的简单示例。（待办：在readme和examples文件夹中添加更多示例） 目前，请探索index.js中可用的函数，并查看它们在targets目录中的实现。

添加新目标：

1. 在targets中实现一个将雕塑转换为目标所需格式的类（参考现有目标了解可用工具）
2. 在index.js中对外暴露函数
3. 实现基本的CLI转换器（目前只需复制粘贴现有转换器并替换单个转换器函数。可以将样板代码提取出来，自动生成CLI转换器），作为CLI工具使用，或直接使用API。