是不支持更多属性吗

[peter100u]

你好，我测试了一个https://www.shadertoy.com/view/ldSSzV 想看看这个库对shadertoy的兼容怎么样，发现不支持手势，而且感觉比较卡，也没看到怎么获取shadertoy在这个库中的一些属性，如：帧率，分辨率，当前播放帧数，
`<style>
body {
margin: 0
}
</style>

<script type="frag">
/*
"Wet stone" by Alexander Alekseev aka TDM - 2014
License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Contact: [email protected]
*/

#define SMOOTH
#define AA

const int NUM_STEPS = 32;
const int AO_SAMPLES = 4;
const vec2 AO_PARAM = vec2(1.2, 3.5);
const vec2 CORNER_PARAM = vec2(0.25, 40.0);
const float INV_AO_SAMPLES = 1.0 / float(AO_SAMPLES);
const float TRESHOLD = 0.1;
const float EPSILON = 1e-3;
const float LIGHT_INTENSITY = 0.25;
const vec3 RED = vec3(1.0,0.7,0.7) * LIGHT_INTENSITY;
const vec3 ORANGE = vec3(1.0,0.67,0.43) * LIGHT_INTENSITY;
const vec3 BLUE = vec3(0.54,0.77,1.0) * LIGHT_INTENSITY;
const vec3 WHITE = vec3(1.2,1.07,0.98) * LIGHT_INTENSITY;

const float DISPLACEMENT = 0.1;

// math
mat3 fromEuler(vec3 ang) {
vec2 a1 = vec2(sin(ang.x),cos(ang.x));
vec2 a2 = vec2(sin(ang.y),cos(ang.y));
vec2 a3 = vec2(sin(ang.z),cos(ang.z));
mat3 m;
m[0] = vec3(a1.ya3.y+a1.xa2.xa3.x,a1.ya2.xa3.x+a3.ya1.x,-a2.ya3.x);
m[1] = vec3(-a2.ya1.x,a1.ya2.y,a2.x);
m[2] = vec3(a3.ya1.xa2.x+a1.ya3.x,a1.xa3.x-a1.ya3.ya2.x,a2.ya3.y);
return m;
}
vec3 saturation(vec3 c, float t) {
return mix(vec3(dot(c,vec3(0.2126,0.7152,0.0722))),c,t);
}
float hash11(float p) {
return fract(sin(p * 727.1)*435.545);
}
float hash12(vec2 p) {
float h = dot(p,vec2(127.1,311.7));
return fract(sin(h)*437.545);
}
vec3 hash31(float p) {
vec3 h = vec3(127.231,491.7,718.423) * p;
return fract(sin(h)*435.543);
}

// 3d noise
float noise_3(in vec3 p) {
vec3 i = floor(p);
vec3 f = fract(p);
vec3 u = ff(3.0-2.0*f);

vec2 ii = i.xy + i.z * vec2(5.0);
float a = hash12( ii + vec2(0.0,0.0) );
float b = hash12( ii + vec2(1.0,0.0) );
float c = hash12( ii + vec2(0.0,1.0) );
float d = hash12( ii + vec2(1.0,1.0) );
float v1 = mix(mix(a,b,u.x), mix(c,d,u.x), u.y);

ii += vec2(5.0);
a = hash12( ii + vec2(0.0,0.0) );
b = hash12( ii + vec2(1.0,0.0) );
c = hash12( ii + vec2(0.0,1.0) );
d = hash12( ii + vec2(1.0,1.0) );
float v2 = mix(mix(a,b,u.x), mix(c,d,u.x), u.y);

return max(mix(v1,v2,u.z),0.0);

}

// fBm
float fbm3(vec3 p, float a, float f) {
return noise_3(p);
}

float fbm3_high(vec3 p, float a, float f) {
float ret = 0.0;
float amp = 1.0;
float frq = 1.0;
for(int i = 0; i < 5; i++) {
float n = pow(noise_3(p * frq),2.0);
ret += n * amp;
frq *= f;
amp *= a * (pow(n,0.2));
}
return ret;
}

// lighting
float diffuse(vec3 n,vec3 l,float p) { return pow(max(dot(n,l),0.0),p); }
float specular(vec3 n,vec3 l,vec3 e,float s) {
float nrm = (s + 8.0) / (3.1415 * 8.0);
return pow(max(dot(reflect(e,n),l),0.0),s) * nrm;
}

// distance functions
float plane(vec3 gp, vec4 p) {
return dot(p.xyz,gp+p.xyz*p.w);
}
float sphere(vec3 p,float r) {
return length(p)-r;
}
float capsule(vec3 p,float r,float h) {
p.y -= clamp(p.y,-h,h);
return length(p)-r;
}
float cylinder(vec3 p,float r,float h) {
return max(abs(p.y/h),capsule(p,r,h));
}
float box(vec3 p,vec3 s) {
p = abs(p)-s;
return max(max(p.x,p.y),p.z);
}
float rbox(vec3 p,vec3 s) {
p = abs(p)-s;
return length(p-min(p,0.0));
}
float quad(vec3 p,vec2 s) {
p = abs(p) - vec3(s.x,0.0,s.y);
return max(max(p.x,p.y),p.z);
}

// boolean operations
float boolUnion(float a,float b) { return min(a,b); }
float boolIntersect(float a,float b) { return max(a,b); }
float boolSub(float a,float b) { return max(a,-b); }

// smooth operations. thanks to iq
float boolSmoothIntersect(float a, float b, float k ) {
float h = clamp(0.5+0.5*(b-a)/k, 0.0, 1.0);
return mix(a,b,h) + kh(1.0-h);
}
float boolSmoothSub(float a, float b, float k ) {
return boolSmoothIntersect(a,-b,k);
}

// world
float rock(vec3 p) {
float d = sphere(p,1.0);
for(int i = 0; i < 9; i++) {
float ii = float(i);
float r = 2.5 + hash11(ii);
vec3 v = normalize(hash31(ii) * 2.0 - 1.0);
#ifdef SMOOTH
d = boolSmoothSub(d,sphere(p+vr,r * 0.8), 0.03);
#else
d = boolSub(d,sphere(p+vr,r * 0.8));
#endif
}
return d;
}

float map(vec3 p) {
float d = rock(p) + fbm3(p*4.0,0.4,2.96) * DISPLACEMENT;
d = boolUnion(d,plane(p,vec4(0.0,1.0,0.0,1.0)));
return d;
}

float map_detailed(vec3 p) {
float d = rock(p) + fbm3_high(p*4.0,0.4,2.96) * DISPLACEMENT;
d = boolUnion(d,plane(p,vec4(0.0,1.0,0.0,1.0)));
return d;
}

// tracing
vec3 getNormal(vec3 p, float dens) {
vec3 n;
n.x = map_detailed(vec3(p.x+EPSILON,p.y,p.z));
n.y = map_detailed(vec3(p.x,p.y+EPSILON,p.z));
n.z = map_detailed(vec3(p.x,p.y,p.z+EPSILON));
return normalize(n-map_detailed(p));
}
vec2 getOcclusion(vec3 p, vec3 n) {
vec2 r = vec2(0.0);
for(int i = 0; i < AO_SAMPLES; i++) {
float f = float(i)INV_AO_SAMPLES;
float hao = 0.01+fAO_PARAM.x;
float hc = 0.01+fCORNER_PARAM.x;
float dao = map(p + n * hao) - TRESHOLD;
float dc = map(p - n * hc) - TRESHOLD;
r.x += clamp(hao-dao,0.0,1.0) * (1.0-f);
r.y += clamp(hc+dc,0.0,1.0) * (1.0-f);
}
r.x = clamp(1.0-r.xINV_AO_SAMPLESAO_PARAM.y,0.0,1.0);
r.y = clamp(r.yINV_AO_SAMPLES*CORNER_PARAM.y,0.0,1.0);
return r;
}
vec2 spheretracing(vec3 ori, vec3 dir, out vec3 p) {
vec2 td = vec2(0.0);
for(int i = 0; i < NUM_STEPS; i++) {
p = ori + dir * td.x;
td.y = map(p);
if(td.y < TRESHOLD) break;
td.x += (td.y-TRESHOLD) * 0.9;
}
return td;
}

// stone
vec3 getStoneColor(vec3 p, float c, vec3 l, vec3 n, vec3 e) {
c = min(c + pow(noise_3(vec3(p.x20.0,0.0,p.z20.0)),70.0) * 8.0, 1.0);
float ic = pow(1.0-c,0.5);
vec3 base = vec3(0.42,0.3,0.2) * 0.35;
vec3 sand = vec3(0.51,0.41,0.32)*0.9;
vec3 color = mix(base,sand,c);

float f = pow(1.0 - max(dot(n,-e),0.0), 5.0) * 0.75 * ic;
color += vec3(diffuse(n,l,0.5) * WHITE);
color += vec3(specular(n,l,e,8.0) * WHITE * 1.5 * ic);
n = normalize(n - normalize(p) * 0.4);
color += vec3(specular(n,l,e,80.0) * WHITE * 1.5 * ic);
color = mix(color,vec3(1.0),f);

color *= sqrt(abs(p.y*0.5+0.5)) * 0.4 + 0.6;
color *= (n.y * 0.5 + 0.5) * 0.4 + 0.6;

return color;

}

vec3 getPixel(in vec2 coord, float time) {
vec2 iuv = coord / iResolution.xy * 2.0 - 1.0;
vec2 uv = iuv;
uv.x *= iResolution.x / iResolution.y;

// ray
vec3 ang = vec3(0.0,0.2,time);
if(iMouse.z > 0.0) ang = vec3(0.0,clamp(2.0-iMouse.y*0.01,0.0,3.1415),iMouse.x*0.01);
mat3 rot = fromEuler(ang);

vec3 ori = vec3(0.0,0.0,2.8);
vec3 dir = normalize(vec3(uv.xy,-2.0));
ori = ori * rot;
dir = dir * rot;

// tracing
vec3 p;
vec2 td = spheretracing(ori,dir,p);
vec3 n = getNormal(p,td.y);
vec2 occ = getOcclusion(p,n);
vec3 light = normalize(vec3(0.0,1.0,0.0));

// color
vec3 color = vec3(1.0);
if(td.x < 3.5 && p.y > -0.89) color = getStoneColor(p,occ.y,light,n,dir);
color *= occ.x;
return color;

}

// main
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
float time = iTime * 0.3;

#ifdef AA
vec3 color = vec3(0.0);
for(int i = -1; i <= 1; i++)
for(int j = -1; j <= 1; j++) {
vec2 uv = fragCoord+vec2(i,j)/3.0;
color += getPixel(uv, time);
}
color /= 9.0;
#else
vec3 color = getPixel(fragCoord, time);
#endif
color = sqrt(color);
color = saturation(color,1.7);

// vignette
vec2 iuv = fragCoord / iResolution.xy * 2.0 - 1.0;
float vgn = smoothstep(1.2,0.7,abs(iuv.y)) * smoothstep(1.1,0.8,abs(iuv.x));
color *= 1.0 - (1.0 - vgn) * 0.15;

fragColor = vec4(color,1.0);

}
</script>

<script src="https://unpkg.com/[email protected]/build/kokomi.umd.js"></script> <script> kokomi.ShaderToyElement.register(); </script>

`

[alphardex]

手势支持日后会完善
比较卡是因为raymarching本身比较烧显卡，shadertoy的是小窗口渲染，网页全屏渲染分辨率高了肯定会卡
shadertoy的uniforms都封装在kokomi.UniformInjector里了，都是最常用的
帧率暂不支持，本身不怎么常用，要查看的话可以用kokomi.Stats
分辨率已支持，是iResolution
由于没做暂停功能，当前播放帧数可以直接用经过时间iTime代替

[peter100u]

那太可惜，等完善好了，我再来，期待！！！