shadertoy各个uniform对应three.js值

着色器输入
uniform vec3 iResolution; // viewport resolution (in pixels)
uniform float iTime; // shader playback time (in seconds)
uniform float iTimeDelta; // render time (in seconds)
uniform float iFrameRate; // shader frame rate
uniform int iFrame; // shader playback frame
uniform float iChannelTime[4]; // channel playback time (in seconds)
uniform vec3 iChannelResolution[4]; // channel resolution (in pixels)
uniform vec4 iMouse; // mouse pixel coords. xy: current (if MLB down), zw: click
uniform samplerXX iChannel0…3;

iResolution

const { width, height } = renderer.getSize(new THREE.Vector2());
    /**
     * x,y canvas width height
     * z renderer的像素比
     */
    const iResolution = new THREE.Vector3(
        width,
        height,
        helper.renderer.pixelRatio
    );

iTime

const clock = new THREE.Clock()
iTime = clock.getElapsedTime()

iTimeDelta

const clock = new THREE.Clock()
iTimeDelta = clock.getElapsedTime();

iFrame
render的次数

iFrame++

iMouse

/**
     * x,y 鼠标位置
     * z 鼠标是否按下
     * w click
     */
    const iMouse = new THREE.Vector4();

iChannel0…3
图片使用

iChannel0: {
                value: new THREE.TextureLoader().load(
                    "/textures/te1.jpg",
                    (t) => {
	                    //需要重复的话加入下面两行
                        t.wrapS = THREE.RepeatWrapping;
                        t.wrapT = THREE.RepeatWrapping;
                    }
                ),
            },

音频使用buffer使用