shader-doodle 开源项目教程

尚丽桃Kimball

于 2024-08-27 08:25:57 发布

阅读量815

点赞数 23

本文链接：https://blog.csdn.net/gitblog_01180/article/details/141584846

版权

shader-doodle 开源项目教程

shader-doodleA friendly web-component for writing and rendering shaders.项目地址:https://gitcode.com/gh_mirrors/sh/shader-doodle

项目介绍

shader-doodle 是一个友好的 Web 组件，用于编写和渲染着色器。它基于 WebGL，允许开发者使用 GLSL 编写着色器代码，并在网页中实时渲染。该项目旨在简化着色器的开发流程，提供了一系列内置的统一变量（uniforms），以便于开发者快速上手。

项目快速启动

安装

首先，你需要在你的项目中安装 shader-doodle。你可以使用 npm 或 yarn 进行安装：

npm install shader-doodle

或者

yarn add shader-doodle

使用

在你的 HTML 文件中引入 shader-doodle 并编写一个简单的着色器：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Shader Doodle Example</title>
  <script src="node_modules/shader-doodle/dist/shader-doodle.js"></script>
</head>
<body>
  <shader-doodle>
    <script type="x-shader/x-fragment">
      precision mediump float;
      uniform float u_time;
      uniform vec2 u_resolution;

      void main() {
        vec2 uv = gl_FragCoord.xy / u_resolution.xy;
        vec3 color = vec3(sin(u_time + uv.x), cos(u_time + uv.y), sin(u_time));
        gl_FragColor = vec4(color, 1.0);
      }
    </script>
  </shader-doodle>
</body>
</html>