Merge branch 'master' of gitee.com:ice-gl/icegl-three-vue-tres

src/plugins/rayMarchingAndThreejs/components/rayMarchingMaterialColor.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: Jsonco
+ * @Date: 2023-11-29 20:09:06
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2023-11-30 23:02:23
+-->
+<template>
+    <TresMesh ref="MeshRef" :rotation="[Math.PI / 2, 0, 0]">
+        <TresPlaneGeometry ref="TresTubeGeometryRef" :args="[1000, 1000]" />
+        <TresShaderMaterial v-bind="shader" />
+    </TresMesh>
+</template>
+
+<script setup lang="ts">
+import { TresCanvas, useRenderLoop, useTresContextProvider, useTresContext, useTexture } from '@tresjs/core';
+import { OrbitControls } from '@tresjs/cientos';
+import { AdditiveBlending, DoubleSide, Vector2, LinearFilter, RGBAFormat, WebGLRenderTarget, Color } from 'three';
+import { ref, watch, defineExpose, watchEffect } from 'vue';
+import stringVertex from '../shaders/rayMarchingTranformColor.vert?raw';
+import stringFrag from '../shaders/rayMarchingTranformColor.frag?raw';
+const { onLoop, onAfterLoop } = useRenderLoop();
+const shader = {
+    transparent: true,
+    depthWrite: true,
+    depthTest: true,
+    side: DoubleSide,
+    vertexShader: stringVertex,
+    fragmentShader: stringFrag,
+    uniforms: {
+        u_resolution: {
+            value: new Vector2(window.innerWidth, window.innerHeight),
+        },
+        u_mouse: {
+            value: new Vector2(0, 0),
+        },
+        u_time: {
+            value: 0,
+        },
+    },
+};
+const windowHalfX = window.innerWidth / 2;
+const windowHalfY = window.innerHeight / 2;
+let mouseX = 0;
+let mouseY = 0;
+function onMouseMove(e) {
+    mouseX = e.clientX - windowHalfX;
+    mouseY = e.clientY - windowHalfY;
+}
+document.addEventListener('mousemove', onMouseMove, false);
+watchEffect(() => {});
+onLoop(({ elapsed }) => {
+    shader.uniforms.u_time.value += 0.001;
+    shader.uniforms.u_mouse.value = new Vector2(mouseX, mouseY);
+});
+onAfterLoop(() => {});
+</script>

src/plugins/rayMarchingAndThreejs/components/rayMarchingMaterialFract.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: Jsonco
+ * @Date: 2023-11-29 20:09:06
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2023-11-30 23:02:23
+-->
+<template>
+    <TresMesh ref="MeshRef" :rotation="[Math.PI / 2, 0, 0]">
+        <TresPlaneGeometry ref="TresTubeGeometryRef" :args="[1000, 1000]" />
+        <TresShaderMaterial v-bind="shader" />
+    </TresMesh>
+</template>
+
+<script setup lang="ts">
+import { TresCanvas, useRenderLoop, useTresContextProvider, useTresContext, useTexture } from '@tresjs/core';
+import { OrbitControls } from '@tresjs/cientos';
+import { AdditiveBlending, DoubleSide, Vector2, LinearFilter, RGBAFormat, WebGLRenderTarget, Color } from 'three';
+import { ref, watch, defineExpose, watchEffect } from 'vue';
+import stringVertex from '../shaders/rayMarchingTranformFract.vert?raw';
+import stringFrag from '../shaders/rayMarchingTranformFract.frag?raw';
+const { onLoop, onAfterLoop } = useRenderLoop();
+const shader = {
+    transparent: true,
+    depthWrite: true,
+    depthTest: true,
+    side: DoubleSide,
+    vertexShader: stringVertex,
+    fragmentShader: stringFrag,
+    uniforms: {
+        u_resolution: {
+            value: new Vector2(window.innerWidth, window.innerHeight),
+        },
+        u_mouse: {
+            value: new Vector2(0, 0),
+        },
+        u_time: {
+            value: 0,
+        },
+    },
+};
+const windowHalfX = window.innerWidth / 2;
+const windowHalfY = window.innerHeight / 2;
+let mouseX = 0;
+let mouseY = 0;
+function onMouseMove(e) {
+    mouseX = e.clientX - windowHalfX;
+    mouseY = e.clientY - windowHalfY;
+}
+document.addEventListener('mousemove', onMouseMove, false);
+watchEffect(() => {});
+onLoop(({ elapsed }) => {
+    shader.uniforms.u_time.value += 0.001;
+    shader.uniforms.u_mouse.value = new Vector2(mouseX, mouseY);
+});
+onAfterLoop(() => {});
+</script>

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' }

src/plugins/rayMarchingAndThreejs/pages/rayMarchingColor.vue

@@ -0,0 +1,31 @@
+<template>
+    <TresCanvas v-bind="state" window-size>
+        <TresPerspectiveCamera ref="perspectiveCameraRef" :position="[0, 800, 0]" :fov="45" :near="1" :far="10000" />
+        <OrbitControls v-bind="controlsState" />
+        <TresAmbientLight color="#ffffff" />
+        <TresDirectionalLight :position="[100, 100, 0]" :intensity="0.5" color="#ffffff" />
+        <rayMarchingMaterialColor />
+        <TresAxesHelper :args="[1000]" :position="[0, 19, 0]" />
+        <TresGridHelper :args="[6000, 100]" :position="[0, 19, 0]" />
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
+import { TresCanvas, useRenderLoop, useTexture } from '@tresjs/core';
+import { OrbitControls } from '@tresjs/cientos';
+import rayMarchingMaterialColor from '../components/rayMarchingMaterialColor.vue';
+import { Pane } from 'tweakpane';
+import axios from 'axios';
+const state = {
+    clearColor: '#000000',
+    shadows: true,
+    alpha: false,
+    useLegacyLights: true,
+};
+const controlsState = { autoRotate: true, enableDamping: true };
+
+const { onLoop } = useRenderLoop();
+onLoop(({ delta }) => {});
+onMounted(() => {});
+</script>

src/plugins/rayMarchingAndThreejs/pages/rayMarchingFract.vue

@@ -0,0 +1,31 @@
+<template>
+    <TresCanvas v-bind="state" window-size>
+        <TresPerspectiveCamera ref="perspectiveCameraRef" :position="[0, 1500, 0]" :fov="45" :near="1" :far="10000" />
+        <OrbitControls v-bind="controlsState" />
+        <TresAmbientLight color="#ffffff" />
+        <TresDirectionalLight :position="[100, 100, 0]" :intensity="0.5" color="#ffffff" />
+        <rayMarchingMaterialFract />
+        <!-- <TresAxesHelper :args="[1000]" :position="[0, 19, 0]" />
+        <TresGridHelper :args="[6000, 100]" :position="[0, 19, 0]" /> -->
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
+import { TresCanvas, useRenderLoop, useTexture } from '@tresjs/core';
+import { OrbitControls } from '@tresjs/cientos';
+import rayMarchingMaterialFract from '../components/rayMarchingMaterialFract.vue';
+import { Pane } from 'tweakpane';
+import axios from 'axios';
+const state = {
+    clearColor: '#000000',
+    shadows: true,
+    alpha: false,
+    useLegacyLights: true,
+};
+const controlsState = { autoRotate: false, enableDamping: true };
+
+const { onLoop } = useRenderLoop();
+onLoop(({ delta }) => {});
+onMounted(() => {});
+</script>

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.x<b.x){
+    return a;
+  }else{
+    return b;
+  }
+}
+vec4 sdPyramid(vec3 p,float h,vec3 color)
+{
+  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 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.);
+        
+      }

src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformColor.vert

@@ -0,0 +1,5 @@
+varying vec2 vUv;
+void main(){
+	gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.);
+	vUv=uv;
+}

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.);
+      
+    }

src/plugins/rayMarchingAndThreejs/shaders/rayMarchingTranformFract.vert

@@ -0,0 +1,5 @@
+varying vec2 vUv;
+void main(){
+	gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.);
+	vUv=uv;
+}

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.x<w*q.y)?length(q-vec2(w,h)):
+  abs(length(q)-r))-t;
+}
+vec4 sdstripe(vec3 p,vec3 color){
+  p.xz=abs(p.xz);
+  float d1=sdCutHollowSphere(p-vec3(.0,-3.3,0.),.8,.01,.01);
+  float d2=sdCutHollowSphere(p-vec3(.9,-3.3,.9),.5,.005,.01);
+  float d=min(d1,d2);
+  return vec4(d,color);
+}
+vec4 sdCutSphere(vec3 p,float r,float h,vec3 color)
+{
+  
   float w=sqrt(r*r-h*h);
   
-  // sampling dependant computations
   vec2 q=vec2(length(p.xz),p.y);
   float s=max((h-r)*q.x*q.x+w*w*(h+r-2.*q.y),h*q.x-w*q.y);
-  return(s<0.)?length(q)-r:
+  float d=(s<0.)?length(q)-r:
   (q.x<w)?h-q.y:
   length(q-vec2(w,h));
+  
+  return vec4(d,color);
 }
-
+vec4 sdPlane(vec3 p,vec3 color){
-float sdCappedCone(vec3 p,vec3 a,vec3 b,float ra,float rb)
+  return vec4(-p.y+.2,color);
+  
+}
+vec4 sdCappedCone(vec3 p,vec3 a,vec3 b,float ra,float rb,vec3 color)
 {
   float rba=rb-ra;
   float baba=dot(b-a,b-a);
@@ -39,57 +58,62 @@ float sdCappedCone(vec3 p,vec3 a,vec3 b,float ra,float rb)
   float cbx=x-ra-f*rba;
   float cby=paba-f;
   float s=(cbx<0.&&cay<0.)?-1.:1.;
-  return s*sqrt(min(cax*cax+cay*cay*baba,
+  return vec4(s*sqrt(min(cax*cax+cay*cay*baba,
-    cbx*cbx+cby*cby*baba));
+      cbx*cbx+cby*cby*baba)),color);
-  }
+    }
-  float smin(float d1,float d2,float k){
+    float smin(float d1,float d2,float k){
-    float h=clamp(.5+.5*(d2-d1)/k,0.,1.);
+      float h=clamp(.5+.5*(d2-d1)/k,0.,1.);
-    return mix(d2,d1,h)-k*h*(1.-h);
+      return mix(d2,d1,h)-k*h*(1.-h);
-  }
+    }
-  //模糊摆动，y的值越大，摆动频率越大
+    vec4 colorMin(vec4 a,vec4 b){
-  vec3 bendPoint(vec3 p,float k)
+      if(a.x<b.x){
-  {
+        return a;
-    float c=cos(k*p.y);
+      }else{
-    float s=sin(k*p.y);
+        return b;
-    mat2 m=mat2(c,-s,s,c);
+      }
-    vec3 q=vec3(m*p.xy,p.z);
+    }
-    return q;
+    //模糊摆动，y的值越大，摆动频率越大
-  }
+    vec3 bendPoint(vec3 p,float k)
-  float map(vec3 p){
+    {
-    vec3 q=p;
+      float c=cos(k*p.y);
-    p=bendPoint(p,sin(u_time*5.));
+      float s=sin(k*p.y);
-    // p.xy*=rot2D(sin(u_time)*.1);
+      mat2 m=mat2(c,-s,s,c);
-    vec3 pp2=vec3(0.,.8,0.);
+      vec3 q=vec3(m*p.xy,p.z);
-    vec3 pp1=vec3(0.,-.2,0.);
+      return q;
-    float CappedConesdf=sdCappedCone(-p,pp1,pp2,.2,.1);
+    }
-    float CutSpheresdf=sdCutSphere(-p-vec3(0.,.4,0.),.5,.2)-.1;
+    vec4 map(vec3 p){
-    float entity=smin(CappedConesdf,CutSpheresdf,.1);
+      vec3 q=p;
-    entity=smin(entity,-q.y+.1,.2);
+      p=bendPoint(p,sin(u_time*5.));
-    return entity;
+      vec3 pp2=vec3(0.,.8,0.);
-  }
+      vec3 pp1=vec3(0.,-.2,0.);
-  
+      vec4 CappedConesdf=sdCappedCone(-p,pp1,pp2,.2,.1,vec3(.8667,.8667,.7216));
-  void main(){
+      vec4 CutSpheresdf=sdCutSphere(-p-vec3(0.,.4,0.),.5,.2,vec3(.9608,.4667,.4))-.1;
-    vec3 ro=vec3(0.,0.,-4.);//起始位置
+      vec4 entity=colorMin(CappedConesdf,CutSpheresdf);
-    vec3 rd=normalize(vec3(vUv-.5,1.));//方向
+      entity=colorMin(entity,sdstripe(p*4.,vec3(3.5))/4.);
-    // horizontal camera rotation
+      entity=colorMin(entity,sdPlane(q,vec3(.4196,.5529,.3647)));
+      return entity;
+    }
     
-    // ro.xz*=rot2D(-u_mouse.x*.001);
+    void main(){
-    // rd.xz*=rot2D(-u_mouse.x*.001);
+      vec3 ro=vec3(0.,0.,-8.);//起始位置
-    // ro.xy*=rot2D(-u_mouse.y*.001);
+      vec3 rd=normalize(vec3(vUv-.5,1.));//方向
-    // rd.xy*=rot2D(-u_mouse.y*.001);
+      ro.xz*=rot2D(-u_time);
-    float t=0.;
+      rd.xz*=rot2D(-u_time);
-    vec3 color=vec3(0.);
+      ro.y-=4.;
-    for(int i=0;i<80;i++){
+      rd.y+=.5;
-      vec3 p=ro+rd*t;
+      float t=0.;
-      float d=map(p);
+      vec4 color=vec4(0.);
-      t+=d;
+      for(int i=0;i<80;i++){
-      //优化效率
+        vec3 p=ro+rd*t;
-      if(t>100.||d<.001){
+        vec4 d=map(p)/1.8;
-        break;
+        t+=d.x;
+        //优化效率
+        if(t>100.||d.x<.001){
+          break;
+        }
+        color=vec4(t*d.yzw*.13,1.);
       }
       
-    }
+      gl_FragColor=color;
-    color=vec3(t)*.2;
+      
-    gl_FragColor=vec4(color,1.);
+    }
-    
-  }