增加了 新款 网格组件

src/plugins/floor/components/gridFloor.vue

@@ -0,0 +1,66 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-02-07 16:18:23
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-02-07 16:48:54
+-->
+<template>
+    <TresMesh :rotate-x="-Math.PI / 2">
+        <TresPlaneGeometry :args="[10, 10, 32, 32]" />
+        <TresShaderMaterial v-bind="tsm" />
+    </TresMesh>
+</template>
+
+<script lang="ts" setup>
+import * as THREE from 'three'
+import { watchEffect } from 'vue'
+import gridFloorVertexShader from '../shaders/gridFloor.vert'
+import gridFloorFragmentShader from '../shaders/gridFloor.frag'
+
+const props = defineProps({
+    gridColor: {
+        default: '#c4d6ff' as any,
+    },
+    gridThickness: {
+        default: 0.02,
+    },
+    crossColor: {
+        default: '#7a91df' as any,
+    },
+    crossThickness: {
+        default: 0.02,
+    },
+    uCross: {
+        default: 0.2,
+    },
+    floorColor: {
+        default: '#ffffff' as any,
+    },
+})
+
+const tsm = {
+    vertexShader: gridFloorVertexShader,
+    fragmentShader: gridFloorFragmentShader,
+    side: THREE.DoubleSide,
+    transparent: true,
+    uniforms: {
+        uFloorColor: { value: new THREE.Color(props.floorColor) },
+        uGridThickness: { value: props.gridThickness },
+        uGridColor: { value: new THREE.Color(props.gridColor) },
+        uCrossThickness: { value: props.crossThickness },
+        uCross: { value: props.uCross },
+        uCrossColor: { value: new THREE.Color(props.crossColor) },
+    },
+}
+
+watchEffect(() => {
+    tsm.uniforms.uFloorColor.value.set(props.floorColor)
+    tsm.uniforms.uGridColor.value.set(props.gridColor)
+    tsm.uniforms.uCrossColor.value.set(props.crossColor)
+    tsm.uniforms.uGridThickness.value = props.gridThickness
+    tsm.uniforms.uCrossThickness.value = props.crossThickness
+    tsm.uniforms.uCross.value = props.uCross
+})
+</script>

src/plugins/floor/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-12-20 17:01:37
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-12-26 15:54:22
+ * @LastEditTime: 2025-02-07 16:15:30
  */
 export default {
     name: 'floor',
@@ -28,6 +28,7 @@ export default {
         { src: 'plugins/floor/preview/hexGridGround.png', type: 'img', name: 'hexGridGround', title: '网格动态底座' },
         { src: 'plugins/floor/preview/whiteFloor.png', type: 'img', name: 'whiteFloor', title: '白色边缘模糊' },
         { src: 'plugins/floor/preview/gridPlus.png', type: 'img', name: 'gridPlus', title: '网格扩展' },
+        { src: 'plugins/floor/preview/gridFloor.png', type: 'img', name: 'gridFloor', title: '网格地板' },
         {
             src: 'plugins/floor/preview/grass.png',
             type: 'img',

src/plugins/floor/pages/gridFloor.vue

@@ -0,0 +1,88 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2025-02-07 16:14:35
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2025-02-07 16:58:15
+-->
+<template>
+    <TresCanvas v-bind="state" window-size>
+        <TresPerspectiveCamera :position="[6, 6, 6]" :fov="45" :near="0.1" :far="1000" />
+        <OrbitControls v-bind="controlsState" />
+        <TresAmbientLight :intensity="0.5" />
+        <TresDirectionalLight :position="[15, 15, 15]" :intensity="1" />
+
+        <TresMesh :position="[0, 0.5, 0]" :scale="0.2">
+            <TresTorusKnotGeometry :args="[1, 0.35, 100, 32]" />
+            <TresMeshStandardMaterial color="#ff33ff" :roughness="0" :metalness="1" />
+        </TresMesh>
+
+        <gridFloor v-bind="gridState" />
+
+        <Suspense>
+            <Environment
+                :files="['pos-x.jpg', 'neg-x.jpg', 'pos-y.jpg', 'neg-y.jpg', 'pos-z.jpg', 'neg-z.jpg']"
+                path="https://opensource-1314935952.cos.ap-nanjing.myqcloud.com/images/skyBox/6jpg/"
+            />
+        </Suspense>
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { ACESFilmicToneMapping } from 'three'
+import { reactive } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, Environment } from '@tresjs/cientos'
+import { Pane } from 'tweakpane'
+import gridFloor from '../components/gridFloor.vue'
+
+const state = reactive({
+    alpha: true,
+    toneMapping: ACESFilmicToneMapping,
+    windowSize: true,
+    clearColor: 0x333333,
+})
+const controlsState = reactive({
+    enableDamping: true,
+    autoRotate: false,
+})
+
+const gridState = reactive({
+    gridColor: '#ffffff',
+    crossColor: '#ef57ff',
+    floorColor: '#000000',
+    gridThickness: 0.02,
+    crossThickness: 0.03,
+    uCross: 0.29,
+})
+
+const paneControl = new Pane()
+paneControl.addBinding(gridState, 'gridColor', {
+    label: '网格颜色',
+})
+paneControl.addBinding(gridState, 'gridThickness', {
+    label: '网格厚度',
+    min: 0.01,
+    max: 1,
+    step: 0.01,
+})
+paneControl.addBinding(gridState, 'crossColor', {
+    label: '十字颜色',
+})
+paneControl.addBinding(gridState, 'crossThickness', {
+    label: '十字厚度',
+    min: 0.01,
+    max: 1,
+    step: 0.01,
+})
+paneControl.addBinding(gridState, 'uCross', {
+    label: '十字大小',
+    min: 0.01,
+    max: 1,
+    step: 0.01,
+})
+paneControl.addBinding(gridState, 'floorColor', {
+    label: '地板颜色',
+})
+</script>

src/plugins/floor/shaders/gridFloor.frag

@@ -0,0 +1,164 @@
+uniform float uGridThickness;
+uniform vec3 uGridColor;
+uniform float uCrossScale;
+uniform float uCrossThickness;
+uniform float uCross;
+uniform vec3 uCrossColor;
+uniform vec3 uFloorColor;
+
+varying vec2 vUv;
+
+float gridFloor(vec2 uv, vec2 lineWidth) {
+    //💡 derivatives of original uv
+    //   to create anti-aliasing line with smoothstep
+    // how much a specific value is changing between one pixel and the next
+    // width change depending on angle & distance from camera can be found with space partial derivatives
+    // fwidth - approximation of derivatives
+    //float lineAA = fwidth(uv.x);
+    // vec2 uvDeriv = fwidth(uv);
+    vec4 uvDDXY = vec4(dFdx(uv), dFdy(uv));
+    vec2 uvDeriv = vec2(length(uvDDXY.xz), length(uvDDXY.yw));
+
+    // 💡 Invert Line Trick
+    // since 0.5 clamp was use, to handle line thickness > 0.5
+    // draw black lines on white offset by half a grid width
+    bool invertLine = lineWidth.x > 0.5;
+    vec2 targetWidth = invertLine ? 1.0 - lineWidth : lineWidth;
+
+    // 💡 Phone-wire AA
+    // STEP 1: ensure line does not get smaller than one pixel
+    // if so, we will clamp it to one pixel
+    // vec2 drawWidth = max(uvDeriv, lineWidth);
+    // clamp to 0.5 to ensure line fades to grey, not black
+    vec2 drawWidth = clamp(targetWidth, uvDeriv, vec2(0.5));
+
+    // 💡 1 pixel wide smoothstep can be too sharp causing aliasing
+    // hence using 1.5 pixel wide smoothstep
+    // AA - anti-aliasing
+    vec2 lineAA = uvDeriv * 1.5;
+    
+    //💡 prepare uv for lines
+    // 0-1(uv) 👉 0-2(multiply) 👉 -1-0-1(shift) 👉 1-0-1(absolute)
+    // 👉 0-1-0(shift) make white at center(0,0) position
+    // (fract) - make sawtooth wave
+    //float lineUV = 1.0 - abs(fract(uv.x) * 2.0 - 1.0);
+    vec2 gridUV = abs(fract(uv) * 2.0 - 1.0);
+    gridUV = invertLine ? gridUV : 1.0 - gridUV;
+
+    //💡 repeating lines
+    // use the derivative to make the lines smooth
+    //float line = smoothstep(lineWidth.x + lineAA, lineWidth.x - lineAA,lineUV);
+    vec2 grid2 = smoothstep(drawWidth + lineAA, drawWidth - lineAA, gridUV);
+
+    // 💡 Phone-wire AA
+    // STEP 2: fades the line out as it gets thinner
+    // how thick we want divided by how thick we’re drawing
+    grid2 *= clamp(targetWidth / drawWidth, 0.0, 1.0);
+
+    // 💡 Moire Suppresion
+    // grid cells < a pixel(when derivative > 1.0), moire pattern can appear
+    // note: after the 0.5 clamp, moire would be more pronounced, but in my case, i do not see any moire
+    // fade to solid color when 0.5 > derivative > 1.0 
+    // anti-aliased lines start to merge
+    grid2 = mix(grid2, targetWidth, clamp(uvDeriv * 2.0 - 1.0, 0.0, 1.0));
+    grid2 = invertLine ? 1.0 - grid2 : grid2;
+
+    // overlap xy lines
+    float grid = mix(grid2.x, 1.0, grid2.y);
+
+    return grid;
+}
+
+float crossFloor(vec2 uv, float scale, float thickness, float crossIntensity) {
+    vec2 lineWidth = vec2(thickness);
+
+    //💡 derivatives of original uv
+    //   to create anti-aliasing line with smoothstep
+    // how much a specific value is changing between one pixel and the next
+    // width change depending on angle & distance from camera can be found with space partial derivatives
+    // fwidth - approximation of derivatives
+    //float lineAA = fwidth(uv.x);
+    // vec2 uvDeriv = fwidth(uv);
+    vec4 uvDDXY = vec4(dFdx(uv), dFdy(uv));
+    vec2 uvDeriv = vec2(length(uvDDXY.xz), length(uvDDXY.yw));
+
+    // 💡 Invert Line Trick
+    // since 0.5 clamp was use, to handle line thickness > 0.5
+    // draw black lines on white offset by half a grid width
+    bool invertLine = lineWidth.x > 0.5;
+    // vec2 targetWidth = invertLine ? 1.0 - lineWidth : lineWidth;
+    vec2 targetWidth = lineWidth;
+
+    // 💡 Phone-wire AA
+    // STEP 1: ensure line does not get smaller than one pixel
+    // if so, we will clamp it to one pixel
+    // vec2 drawWidth = max(uvDeriv, lineWidth);
+    // clamp to 0.5 to ensure line fades to grey, not black
+    vec2 drawWidth = clamp(targetWidth, uvDeriv, vec2(0.5));
+
+    // 💡 1 pixel wide smoothstep can be too sharp causing aliasing
+    // hence using 1.5 pixel wide smoothstep
+    // AA - anti-aliasing
+    vec2 lineAA = uvDeriv * 1.5;
+    
+    // Cross Intensity
+    float cutOffX = abs(fract(uv.y) * 2.0 - 1.0) > crossIntensity ? 1.0 : 0.0;
+    float cutOffY = abs(fract(uv.x) * 2.0 - 1.0) > crossIntensity ? 1.0 : 0.0;
+
+    //💡 prepare uv for lines
+    // 0-1(uv) 👉 0-2(multiply) 👉 -1-0-1(shift) 👉 1-0-1(absolute)
+    // 👉 0-1-0(shift) make white at center(0,0) position
+    // (fract) - make sawtooth wave
+    //float lineUV = 1.0 - abs(fract(uv.x) * 2.0 - 1.0);
+    // vec2 gridUV = abs(fract(uv) * 2.0 - 1.0);
+    // UV
+    float uvX = abs(fract(uv.x) * 2.0 - 1.0) + cutOffX;
+    float uvY = abs(fract(uv.y) * 2.0 - 1.0) + cutOffY;
+    vec2 gridUV = vec2(uvX, uvY);
+
+    // gridUV = invertLine ? gridUV : 1.0 - gridUV;
+
+    //💡 repeating lines
+    // use the derivative to make the lines smooth
+    //float line = smoothstep(lineWidth.x + lineAA, lineWidth.x - lineAA,lineUV);
+    vec2 grid2 = smoothstep(drawWidth + lineAA, drawWidth - lineAA, gridUV);
+
+    // 💡 Phone-wire AA
+    // STEP 2: fades the line out as it gets thinner
+    // how thick we want divided by how thick we’re drawing
+    grid2 *= clamp(targetWidth / drawWidth, 0.0, 1.0);
+
+    // 💡 Moire Suppresion
+    // grid cells < a pixel(when derivative > 1.0), moire pattern can appear
+    // note: after the 0.5 clamp, moire would be more pronounced, but in my case, i do not see any moire
+    // fade to solid color when 0.5 > derivative > 1.0 
+    // anti-aliased lines start to merge
+    grid2 = mix(grid2, targetWidth, clamp(uvDeriv * 2.0 - 1.0, 0.0, 1.0));
+    // grid2 = invertLine ? 1.0 - grid2 : grid2;
+
+    // overlap xy lines
+    float grid = mix(grid2.x, 1.0, grid2.y);
+
+    return grid;
+}
+
+void main()
+{
+    vec2 lineWidth = vec2(uGridThickness);
+    //💡 scaling uv to get multiple repeating lines
+    vec2 uv = vUv * 20.0;
+
+    // grid floor
+    float grid = gridFloor(uv, lineWidth);
+    // mix with floor color
+    vec3 gridColor = mix(uFloorColor, uGridColor, vec3(grid));
+
+    // cross grid
+    float crossUv = crossFloor(uv, uCrossScale, uCrossThickness, uCross);
+    // 💡 to add more grids on top, ensure the base is taken from previous gridColor
+    vec3 gridColor2 = mix(gridColor, uCrossColor, vec3(crossUv));
+    
+    vec3 color =  gridColor2;
+
+    gl_FragColor = vec4(color, 1.0);
+}

src/plugins/floor/shaders/gridFloor.vert

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