diff --git a/public/plugins/rayMarchingAndThreejs/preview/位置变换.png b/public/plugins/rayMarchingAndThreejs/preview/位置变换.png index 503d6bb9..eac699b0 100644 Binary files a/public/plugins/rayMarchingAndThreejs/preview/位置变换.png and b/public/plugins/rayMarchingAndThreejs/preview/位置变换.png differ diff --git a/public/plugins/rayMarchingAndThreejs/preview/光追基础框架.png b/public/plugins/rayMarchingAndThreejs/preview/光追基础框架.png index 9cef976f..f266d710 100644 Binary files a/public/plugins/rayMarchingAndThreejs/preview/光追基础框架.png and b/public/plugins/rayMarchingAndThreejs/preview/光追基础框架.png differ diff --git a/public/plugins/rayMarchingAndThreejs/preview/创建复杂几何体.png b/public/plugins/rayMarchingAndThreejs/preview/创建复杂几何体.png new file mode 100644 index 00000000..baffa4c8 Binary files /dev/null and b/public/plugins/rayMarchingAndThreejs/preview/创建复杂几何体.png differ diff --git a/public/plugins/rayMarchingAndThreejs/preview/多个sdf.png b/public/plugins/rayMarchingAndThreejs/preview/多个sdf.png index 04dc7c20..ebdeed47 100644 Binary files a/public/plugins/rayMarchingAndThreejs/preview/多个sdf.png and b/public/plugins/rayMarchingAndThreejs/preview/多个sdf.png differ diff --git a/public/plugins/rayMarchingAndThreejs/preview/综合案例1.png b/public/plugins/rayMarchingAndThreejs/preview/综合案例1.png index 65eef526..0705580d 100644 Binary files a/public/plugins/rayMarchingAndThreejs/preview/综合案例1.png and b/public/plugins/rayMarchingAndThreejs/preview/综合案例1.png differ diff --git a/public/plugins/rayMarchingAndThreejs/preview/蘑菇.png b/public/plugins/rayMarchingAndThreejs/preview/蘑菇.png index cb0d1fd7..5fe4ed0f 100644 Binary files a/public/plugins/rayMarchingAndThreejs/preview/蘑菇.png and b/public/plugins/rayMarchingAndThreejs/preview/蘑菇.png differ diff --git a/public/plugins/rayMarchingAndThreejs/preview/颜色赋值.png b/public/plugins/rayMarchingAndThreejs/preview/颜色赋值.png new file mode 100644 index 00000000..2051ee2a Binary files /dev/null and b/public/plugins/rayMarchingAndThreejs/preview/颜色赋值.png differ diff --git a/src/plugins/rayMarchingAndThreejs/components/rayMarchingMaterialColor.vue b/src/plugins/rayMarchingAndThreejs/components/rayMarchingMaterialColor.vue new file mode 100644 index 00000000..fb14c1f1 --- /dev/null +++ b/src/plugins/rayMarchingAndThreejs/components/rayMarchingMaterialColor.vue @@ -0,0 +1,58 @@ + + + + diff --git a/src/plugins/rayMarchingAndThreejs/components/rayMarchingMaterialFract.vue b/src/plugins/rayMarchingAndThreejs/components/rayMarchingMaterialFract.vue new file mode 100644 index 00000000..7ee48156 --- /dev/null +++ b/src/plugins/rayMarchingAndThreejs/components/rayMarchingMaterialFract.vue @@ -0,0 +1,58 @@ + + + + diff --git a/src/plugins/rayMarchingAndThreejs/config.js b/src/plugins/rayMarchingAndThreejs/config.js index 92a24da8..87d556af 100644 --- a/src/plugins/rayMarchingAndThreejs/config.js +++ b/src/plugins/rayMarchingAndThreejs/config.js @@ -14,6 +14,12 @@ export default { src: 'plugins/rayMarchingAndThreejs/preview/多个sdf.png', type: 'img', name: 'rayMarchingCombination', title: '光追创建多个实体', referenceSource: { title: 'Inigo Quilez ', url: 'https://iquilezles.org/articles/distfunctions/' } }, + { + src: 'plugins/rayMarchingAndThreejs/preview/创建复杂几何体.png', type: 'img', name: 'rayMarchingFract', title: '光追创建复杂几何体', + }, + { + src: 'plugins/rayMarchingAndThreejs/preview/颜色赋值.png', type: 'img', name: 'rayMarchingColor', title: '颜色赋值', + }, { src: 'plugins/rayMarchingAndThreejs/preview/蘑菇.png', type: 'img', name: 'rayMarchingMushroom', title: '光追构建蘑菇', referenceSource: { title: 'XsBSzh', url: 'https://www.shadertoy.com/view/XsBSzh' } diff --git a/src/plugins/rayMarchingAndThreejs/pages/rayMarchingColor.vue b/src/plugins/rayMarchingAndThreejs/pages/rayMarchingColor.vue new file mode 100644 index 00000000..6eee93a1 --- /dev/null +++ b/src/plugins/rayMarchingAndThreejs/pages/rayMarchingColor.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/plugins/rayMarchingAndThreejs/pages/rayMarchingFract.vue b/src/plugins/rayMarchingAndThreejs/pages/rayMarchingFract.vue new file mode 100644 index 00000000..4f608014 --- /dev/null +++ b/src/plugins/rayMarchingAndThreejs/pages/rayMarchingFract.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformColor.frag b/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformColor.frag new file mode 100644 index 00000000..7320619b --- /dev/null +++ b/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformColor.frag @@ -0,0 +1,105 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec3 u_mouse; +uniform float u_time; +varying vec2 vUv; +vec4 sphere(vec3 p,float d,vec3 color){ + return vec4((length(p*2.)-d)/2.,color); +} +vec4 colorMin(vec4 a,vec4 b){ + if(a.xp.x)?p.zx:p.xz; + p.xz-=.5; + + vec3 q=vec3(p.z,h*p.y-.5*p.x,h*p.x+.5*p.y); + + float s=max(-q.x,0.); + float t=clamp((q.y-.5*p.z)/(m2+.25),0.,1.); + + float a=m2*(q.x+s)*(q.x+s)+q.y*q.y; + float b=m2*(q.x+.5*t)*(q.x+.5*t)+(q.y-m2*t)*(q.y-m2*t); + + float d2=min(q.y,-q.x*m2-q.y*.5)>0.?0.:min(a,b); + + return vec4(sqrt((d2+q.z*q.z)/m2)*sign(max(q.z,-p.y)),color); +} +vec4 sdBoxFrame(vec3 p,vec3 b,float e,vec3 color) +{ + p=abs(p)-b; + vec3 q=abs(p+e)-e; + return vec4(min(min( + length(max(vec3(p.x,q.y,q.z),0.))+min(max(p.x,max(q.y,q.z)),0.), + length(max(vec3(q.x,p.y,q.z),0.))+min(max(q.x,max(p.y,q.z)),0.)), + length(max(vec3(q.x,q.y,p.z),0.))+min(max(q.x,max(q.y,p.z)),0.)),color); + } + mat2 rot2D(float angle){ + float s=sin(angle); + float c=cos(angle); + return mat2(c,-s,s,c); + } + //彩色画板 + vec3 palette(float t){ + vec3 a=vec3(.5,.5,.5); + vec3 b=vec3(.5,.5,.5); + vec3 c=vec3(1.,1.,1.); + vec3 d=vec3(.263,.416,.557); + + return a+b*cos(6.28318*(c*t+d)); + } + vec4 map(vec3 p){ + p.xy*=rot2D(u_time); + // p=(fract(p)-.5)*2.; + // p=mod(p,1.)-.5; + vec3 pos=vec3(sin(u_time*10.),0.,0.); + vec4 spheresdf=sphere(p,.5,vec3(.2118,.0314,.9333)); + vec4 BoxFramesdf=sdBoxFrame(p,vec3(.5,.3,.5),.025,vec3(.1059,.9725,.0275))/2.; + vec4 entity=colorMin(BoxFramesdf,spheresdf); + return entity; + } + + void main(){ + vec3 ro=vec3(0.,0.,-4.);//起始位置 + vec3 rd=normalize(vec3(vUv-.5,1.));//方向 + // horizontal camera rotation + + ro.xz*=rot2D(-u_mouse.x*.001); + rd.xz*=rot2D(-u_mouse.x*.001); + ro.xy*=rot2D(-u_mouse.y*.001); + rd.xy*=rot2D(-u_mouse.y*.001); + float t=0.; + vec4 color=vec4(0.); + vec4 d=vec4(0.); + for(int i=0;i<80;i++){ + vec3 p=ro+rd*t; + p.xy*=rot2D(t*.2); + d=map(p); + t+=d.x; + //优化效率 + if(d.x<.001){ + break; + } + if(t>100.){ + color=vec4(.5255,.2078,.2078,1.); + gl_FragColor=color; + }else{ + color=vec4(t*d.yzw,1.); + gl_FragColor=color; + } + + } + // color=vec4(t*d.yzw,1.); + + } \ No newline at end of file diff --git a/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformColor.vert b/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformColor.vert new file mode 100644 index 00000000..9946a066 --- /dev/null +++ b/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformColor.vert @@ -0,0 +1,5 @@ +varying vec2 vUv; +void main(){ + gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.); + vUv=uv; +} \ No newline at end of file diff --git a/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformFract.frag b/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformFract.frag new file mode 100644 index 00000000..bed84ce2 --- /dev/null +++ b/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformFract.frag @@ -0,0 +1,82 @@ +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; +uniform vec3 u_mouse; +uniform float u_time; +varying vec2 vUv; +float sphere(vec3 p,float d){ + return(length(p*2.)-d)/2.; +} + +float sdPyramid(vec3 p,float h) +{ + float m2=h*h+.25; + + p.xz=abs(p.xz); + p.xz=(p.z>p.x)?p.zx:p.xz; + p.xz-=.5; + + vec3 q=vec3(p.z,h*p.y-.5*p.x,h*p.x+.5*p.y); + + float s=max(-q.x,0.); + float t=clamp((q.y-.5*p.z)/(m2+.25),0.,1.); + + float a=m2*(q.x+s)*(q.x+s)+q.y*q.y; + float b=m2*(q.x+.5*t)*(q.x+.5*t)+(q.y-m2*t)*(q.y-m2*t); + + float d2=min(q.y,-q.x*m2-q.y*.5)>0.?0.:min(a,b); + + return sqrt((d2+q.z*q.z)/m2)*sign(max(q.z,-p.y)); +} +float sdBoxFrame(vec3 p,vec3 b,float e) +{ + p=abs(p)-b; + vec3 q=abs(p+e)-e; + return min(min( + length(max(vec3(p.x,q.y,q.z),0.))+min(max(p.x,max(q.y,q.z)),0.), + length(max(vec3(q.x,p.y,q.z),0.))+min(max(q.x,max(p.y,q.z)),0.)), + length(max(vec3(q.x,q.y,p.z),0.))+min(max(q.x,max(q.y,p.z)),0.)); + } + mat2 rot2D(float angle){ + float s=sin(angle); + float c=cos(angle); + return mat2(c,-s,s,c); + } + + float map(vec3 p){ + p.xy*=rot2D(u_time); + p=(fract(p)-.5)*2.; + // p=mod(p,1.)-.5; + vec3 pos=vec3(sin(u_time*10.),0.,0.); + float spheresdf=sphere(p,.5)/2.; + float BoxFramesdf=sdBoxFrame(p,vec3(.5,.3,.5),.025)/2.; + float entity=min(BoxFramesdf,spheresdf); + return entity; + } + + void main(){ + vec3 ro=vec3(0.,0.,-4.);//起始位置 + vec3 rd=normalize(vec3(vUv-.5,1.));//方向 + // horizontal camera rotation + + ro.xz*=rot2D(-u_mouse.x*.001); + rd.xz*=rot2D(-u_mouse.x*.001); + ro.xy*=rot2D(-u_mouse.y*.001); + rd.xy*=rot2D(-u_mouse.y*.001); + float t=0.; + vec3 color=vec3(0.); + for(int i=0;i<80;i++){ + vec3 p=ro+rd*t; + float d=map(p); + t+=d; + //优化效率 + if(t>100.||d<.001){ + break; + } + } + color=vec3(t*.2); + gl_FragColor=vec4(color,1.); + + } \ No newline at end of file diff --git a/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformFract.vert b/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformFract.vert new file mode 100644 index 00000000..9946a066 --- /dev/null +++ b/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformFract.vert @@ -0,0 +1,5 @@ +varying vec2 vUv; +void main(){ + gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.); + vUv=uv; +} \ No newline at end of file diff --git a/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformMushroom.frag b/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformMushroom.frag index e063f454..37196449 100644 --- a/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformMushroom.frag +++ b/src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformMushroom.frag @@ -12,20 +12,39 @@ mat2 rot2D(float angle){ float c=cos(angle); return mat2(c,-s,s,c); } -float sdCutSphere(vec3 p,float r,float h) + +float sdCutHollowSphere(vec3 p,float r,float h,float t) { - // sampling independent computations (only depend on shape) + float w=sqrt(r*r-h*h); + vec2 q=vec2(length(p.xz),p.y); + return((h*q.x100.||d<.001){ - break; + void main(){ + vec3 ro=vec3(0.,0.,-8.);//起始位置 + vec3 rd=normalize(vec3(vUv-.5,1.));//方向 + ro.xz*=rot2D(-u_time); + rd.xz*=rot2D(-u_time); + ro.y-=4.; + rd.y+=.5; + float t=0.; + vec4 color=vec4(0.); + for(int i=0;i<80;i++){ + vec3 p=ro+rd*t; + vec4 d=map(p)/1.8; + t+=d.x; + //优化效率 + if(t>100.||d.x<.001){ + break; + } + color=vec4(t*d.yzw*.13,1.); } - } - color=vec3(t)*.2; - gl_FragColor=vec4(color,1.); - - } \ No newline at end of file + gl_FragColor=color; + + } \ No newline at end of file