如何在Shadertoy中使用JS控制时间暂停？

Question

**问题：如何在Shadertoy中使用JavaScript控制时间暂停与恢复？** 在Shadertoy中，时间是通过内置变量`iTime`自动递增的，常用于动画和动态效果。然而，在某些交互场景下（如暂停按钮或用户控制需求），我们希望使用JavaScript来控制时间的流动，甚至实现暂停与继续功能。那么，如何通过JavaScript与Shadertoy的GLSL代码通信，并实现对`iTime`行为的控制？常见的做法是通过自定义Uniform变量传递时间值，而非依赖默认的`iTime`。接下来的问题是如何正确设置此Uniform、如何从JS更新其值，并确保帧率控制的一致性？此外，还需考虑性能影响及跨域脚本限制等问题。

Answer 1

1. Shadertoy中的时间机制概述

Shadertoy平台默认提供了一个内置变量iTime，它以秒为单位自动递增，用于驱动GLSL着色器中的动态效果。然而，在需要用户交互或动画控制的场景中，例如实现“暂停”与“恢复”功能时，开发者往往希望手动控制这个时间值。

2. 控制时间的基本思路

由于Shadertoy不允许直接修改iTime，通常的做法是引入一个自定义Uniform变量（如u_time），然后通过JavaScript在运行时更新该变量的值。这样可以绕过Shadertoy默认的时间管理机制。

• 使用GLSL代码声明自定义Uniform变量：uniform float u_time;
• 将原本使用iTime的地方替换为u_time
• 在JavaScript中获取对应的Uniform位置，并进行更新

3. JavaScript与Shadertoy通信机制详解

Shadertoy提供了API接口供外部JavaScript调用，允许我们访问Shader实例并与其通信。主要步骤如下：

1. 通过document.getElementById()获取Shadertoy的Canvas元素
2. 调用其内部对象获取WebGL上下文和Program信息
3. 使用getUniformLocation()方法获取Uniform变量的位置
4. 通过uniform1f()设置新的时间值

let canvas = document.getElementById('shadertoy-canvas');
let gl = canvas.getContext('webgl');
let program = ...; // 获取正确的program
let timeLoc = gl.getUniformLocation(program, 'u_time');
gl.uniform1f(timeLoc, customTimeValue);
    

4. 实现暂停与恢复功能的逻辑流程

为了实现时间的暂停与恢复，我们需要维护一个本地的时间状态，并根据用户的操作来决定是否更新时间值。

graph TD A[开始] --> B{是否暂停?} B -- 是 --> C[停止更新时间] B -- 否 --> D[继续累加时间] D --> E[更新u_time] C --> F[保持当前时间不变]

5. 时间控制的帧率同步与性能优化

由于Shadertoy默认每帧都会自动渲染，因此必须确保JavaScript更新时间的频率与Shadertoy内部帧率一致。常见的做法是使用requestAnimationFrame()函数来实现同步更新。

方法	描述	适用场景
setInterval()	固定间隔更新时间	简单场景，不推荐
requestAnimationFrame()	浏览器原生帧同步	高性能、推荐方式

6. 安全性与跨域限制问题

当尝试从外部网页加载Shadertoy内容并与其通信时，可能会遇到跨域脚本限制（CORS）。为了避免此类问题，建议采用以下策略：

• 使用同源嵌入Shadertoy的iframe
• 通过Shadertoy官方提供的API进行通信
• 使用代理服务器解决CORS问题

7. 示例代码：完整的JS控制时间流程

以下是一个完整的JavaScript示例，展示如何通过按钮控制时间的暂停与恢复：

let paused = false;
let startTime = 0;
let lastTime = 0;

function loop() {
    if (!paused) {
        let now = performance.now();
        let elapsed = (now - startTime) / 1000;
        gl.uniform1f(timeLoc, elapsed);
        startTime = now;
    }
    requestAnimationFrame(loop);
}

document.getElementById('pauseBtn').addEventListener('click', () => {
    paused = true;
});

document.getElementById('resumeBtn').addEventListener('click', () => {
    paused = false;
    startTime = performance.now();
});

loop();