feat(volumeRendering): 增加体渲染案例

src/plugins/volumeRendering/components/basicVolumeRendering.vue

@@ -0,0 +1,111 @@
+<template>
+    <TresMesh ref="meshRef" :rotation-x="Math.PI / -2">
+        <TresSphereGeometry :args="[1, 16, 16]" />
+        <TresShaderMaterial :uniforms="uniforms" :vertexShader="vertex" :fragmentShader="fragment" />
+    </TresMesh>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue'
+import * as Three from 'three'
+import { Pane } from 'tweakpane'
+import vertex from '../shaders/vertex.glsl?raw'
+import fragment from '../shaders/fragment.glsl?raw'
+import { useRenderLoop, useTresContext } from '@tresjs/core'
+
+const dim = 41
+const width = window.innerWidth
+const height = window.innerHeight
+
+const meshRef = ref(null)
+const volumeData = ref<Uint8Array | null>(null)
+
+const handleVolumeFileUpload = () => {
+    fetch('/plugins/volumeRendering/image/nucleon_41x41x41_uint8.raw')
+        .then((response) => response.arrayBuffer())
+        .then((arrayBuffer) => {
+            const uint8Array = new Uint8Array(arrayBuffer)
+            const data = new Uint8Array(dim * dim * dim)
+            for (let i = 0; i < uint8Array.length; i++) {
+                data[i] = uint8Array[i]
+            }
+            volumeData.value = data
+        })
+        .catch((error) => {
+            console.error('Error fetching volume data:', error)
+        })
+}
+
+const clock = new Three.Clock()
+clock.start()
+
+const panel = new Pane()
+const folder = panel.addFolder({ title: 'Display Settings' })
+
+const crossFolder = folder.addFolder({ title: 'Cross Section Settings' })
+const crossSectionSize = new Three.Vector3(0.5, 0.5, 0.5)
+crossFolder.addBinding(crossSectionSize, 'x', { label: 'X', min: 0.02, max: 0.5, step: 0.02 })
+crossFolder.addBinding(crossSectionSize, 'y', { label: 'Y', min: 0.02, max: 0.5, step: 0.02 })
+crossFolder.addBinding(crossSectionSize, 'z', { label: 'Z', min: 0.02, max: 0.5, step: 0.02 })
+crossFolder.expanded = true
+
+const { camera } = useTresContext()
+
+const uniforms = reactive({
+    u_camera: {
+        value: camera.value?.position,
+    },
+    u_resolution: {
+        value: new Three.Vector3(width, height, 1),
+    },
+    u_dt: {
+        value: 0.004,
+    },
+    u_time: {
+        value: 0.0,
+    },
+    u_crossSectionSize: {
+        value: crossSectionSize,
+    },
+    u_color: {
+        value: 1,
+    },
+    u_volume: {
+        value: null as Three.Data3DTexture | null,
+    },
+    u_isoValue: {
+        value: 0.2,
+    },
+    u_alphaVal: {
+        value: 0.2,
+    },
+})
+
+const algoFolder = folder.addFolder({ title: 'Algorithm Settings' })
+algoFolder.addBinding(uniforms.u_dt, 'value', { label: 'dt', min: 0.0004, max: 0.016, step: 0.0002 })
+algoFolder.addBinding(uniforms.u_color, 'value', { label: 'color', min: 1, max: 3, step: 1 })
+algoFolder.addBinding(uniforms.u_alphaVal, 'value', { label: 'alphaVal', min: 0.01, max: 1, step: 0.01 })
+algoFolder.addBinding(uniforms.u_isoValue, 'value', { label: 'isoValue', min: 0, max: 1, step: 0.04 })
+
+watch(volumeData, (newData) => {
+    if (newData) {
+        const volumeDataTexture = new Three.Data3DTexture(newData, dim, dim, dim)
+        volumeDataTexture.format = Three.RedFormat
+        volumeDataTexture.minFilter = Three.LinearFilter
+        volumeDataTexture.magFilter = Three.LinearFilter
+        volumeDataTexture.wrapT = Three.RepeatWrapping
+        volumeDataTexture.needsUpdate = true
+
+        uniforms.u_volume.value = volumeDataTexture
+    }
+})
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+    uniforms.u_time.value = clock.getElapsedTime()
+})
+
+onMounted(() => {
+    handleVolumeFileUpload()
+})
+</script>

src/plugins/volumeRendering/config.js

@@ -0,0 +1,13 @@
+export default {
+	"name": "volumeRendering",
+	"title": "体积渲染",
+	"intro": "体积渲染是一种三维图形技术,可以将三维数据集(如CT、MRI扫描)渲染成二维图像。这里展示了基础的体积渲染示例。<br/> 目前只使用raw数据集渲染, 并且参数较少, 更完善的体积渲染请使用 <a href='https://www.icegl.cn/tvtstore/tvtVolumeRendering.html' target='_blank'>TvT.js体渲染插件</a>",
+	"version": "0.0.1",
+	"author": "石头web",
+	"website": "https://github.com/a876691666",
+	"state": "active",
+	"require": [],
+	"preview": [
+		{ "src": "plugins/volumeRendering/preview/basicVolume.png", "type": "img", "name": "basicVolume", "title": "基础体积渲染" },
+	]
+}

src/plugins/volumeRendering/pages/basicVolume.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="info">
+        <a href="https://klacansky.com/open-scivis-datasets/skull/skull_256x256x256_uint8/raw" target="_blank">
+            https://klacansky.com/open-scivis-datasets/skull/skull_256x256x256_uint8/raw
+        </a>
+        <br />
+        请自行下载数据集, 复制到 /plugins/volumeRendering/image/skull_256x256x256_uint8.raw
+        并更改文件请求指向和 dim 大小
+    </div>
+    <TresCanvas clearColor="#201919" v-bind="state">
+        <TresPerspectiveCamera :fov="75" :near="0.001" :far="1000" :position="[-1, 0.4, -1]" :look-at="[0, 0, 0]" :up="[0, 1, 0]" />
+        <TresAmbientLight :intensity="2" />
+        <OrbitControls v-bind="controlsState" />
+        <Suspense>
+            <basicVolume :position="[0, 0, 0]" />
+        </Suspense>
+        <TresGridHelper :args="[50, 50]" :position="[0, -5, 0]" />
+    </TresCanvas>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { OrbitControls } from '@tresjs/cientos'
+import basicVolume from '../components/basicVolumeRendering.vue'
+
+const state = reactive({
+    windowSize: true,
+    alpha: true,
+    antialias: true,
+    autoClear: false,
+    disableRender: true,
+})
+
+const controlsState = reactive({
+    enableDamping: true,
+    enableZoom: true,
+    enablePan: true,
+    enableRotate: true,
+    makeDefault: true,
+})
+</script>
+
+<style scoped>
+.info {
+    position: absolute;
+    top: 50px;
+    left: 10px;
+    z-index: 1000;
+    color: #fff;
+}
+
+.info a {
+    color: #fff;
+}
+</style>

src/plugins/volumeRendering/shaders/fragment.glsl

@@ -0,0 +1,120 @@
+precision mediump int;
+precision mediump float;
+
+uniform vec3 u_camera;
+uniform vec3 u_resolution;
+uniform mediump sampler3D u_volume;
+uniform vec3 u_crossSectionSize;
+uniform float u_dt;
+uniform float u_time;
+uniform float u_color;
+uniform float u_isoValue;
+uniform float u_alphaVal;
+
+vec3 palette(in float t) {
+  vec3 a = vec3(0.5, 0.5, 0.5);
+  vec3 b = vec3(0.5, 0.5, 0.5);
+  vec3 c = vec3(1.0, 1.0, 1.0);
+  vec3 d = vec3(0.00, 0.33, 0.67);
+
+  return a + b * cos(6.28318 * (c * t + d));
+}
+
+varying vec3 v_hitPos;
+varying vec3 v_hitPosWorldSpace;
+varying vec3 v_cameraObjectSpace;
+
+vec2 intersect_box(vec3 orig, vec3 dir) {
+
+  vec3 box_min = vec3(-u_crossSectionSize);
+  vec3 box_max = vec3(u_crossSectionSize);
+  vec3 inv_dir = 1.0 / dir;
+  vec3 tmin_tmp = (box_min - orig) * inv_dir;
+  vec3 tmax_tmp = (box_max - orig) * inv_dir;
+  vec3 tmin = min(tmin_tmp, tmax_tmp);
+  vec3 tmax = max(tmin_tmp, tmax_tmp);
+  float t0 = max(tmin.x, max(tmin.y, tmin.z));
+  float t1 = min(tmax.x, min(tmax.y, tmax.z));
+  return vec2(t0, t1);
+}
+
+void main() {
+  vec3 rayOrigin = vec3(0.0, 0.0, -3.0);
+  rayOrigin = v_cameraObjectSpace;
+
+  vec2 uv = 2.0 * gl_FragCoord.xy / u_resolution.xy - 1.0;
+  vec3 rayDir = normalize(vec3(uv, 1.0));
+  rayDir = normalize(v_hitPos - rayOrigin);
+
+  vec2 t_hit = intersect_box(rayOrigin, rayDir);
+  if (t_hit.x > t_hit.y) {
+    discard;
+  }
+
+  t_hit.x = max(t_hit.x, 0.0);
+
+  float dt = u_dt;
+
+  vec4 color = vec4(0.0);
+
+  vec3 p = rayOrigin + t_hit.x * rayDir + 0.5;
+  for (float t = t_hit.x; t < t_hit.y; t += dt) {
+
+    float textureVal = texture(u_volume, p).r;
+
+    vec4 val_color = vec4(0.0);
+    float val_color_alpha = textureVal * 0.1;
+
+    val_color_alpha = smoothstep(0.0, u_alphaVal, val_color_alpha);
+
+    vec3 red = vec3(1.0, 0.0, 0.0);
+    vec3 white = vec3(1.0);
+    if (abs(u_color - 1.0) <= 0.01) {
+      val_color = vec4(white, val_color_alpha);
+    } else if (abs(u_color - 2.0) <= 0.01) {
+      val_color = vec4(mix(red, white, val_color_alpha), val_color_alpha);
+    } else {
+      val_color = vec4(palette(textureVal), val_color_alpha);
+    }
+
+    color.rgb += (1.0 - color.a) * val_color.a * val_color.rgb;
+    color.a += (1.0 - color.a) * val_color.a;
+
+    if (textureVal > u_isoValue) {
+      float gxLess = texture(u_volume, vec3(p.x - rayDir.x * u_dt, p.y, p.z)).r;
+      float gxMore = texture(u_volume, vec3(p.x + rayDir.x * u_dt, p.y, p.z)).r;
+      float dgx = gxMore - gxLess;
+
+      float gyLess = texture(u_volume, vec3(p.x, p.y - rayDir.y * u_dt, p.z)).r;
+      float gyMore = texture(u_volume, vec3(p.x, p.y + rayDir.y * u_dt, p.z)).r;
+      float dgy = gyMore - gyLess;
+
+      float gzLess = texture(u_volume, vec3(p.x, p.y, p.z - rayDir.z * u_dt)).r;
+      float gzMore = texture(u_volume, vec3(p.x, p.y, p.z + rayDir.z * u_dt)).r;
+      float dgz = gzMore - gzLess;
+      vec3 n = normalize(vec3(dgx, dgy, dgz));
+
+      vec3 lightSource = vec3(1.0);
+      vec3 lightDir = normalize(lightSource);
+      float diffuseStrength = max(dot(n, lightDir), 0.0);
+
+      vec3 viewSource = normalize(rayOrigin);
+      vec3 reflectSource = normalize(reflect(-lightSource, n));
+      float specularStrength = max(0.0, dot(viewSource, reflectSource));
+      specularStrength = pow(specularStrength, 64.0);
+
+      color.rgb = diffuseStrength * val_color.rgb + specularStrength * val_color.rgb;
+      color.rgb *= val_color.rgb;
+      color.a = 0.95;
+      break;
+    }
+
+    if (color.a >= 0.95) {
+      break;
+    }
+
+    p += rayDir * dt;
+  }
+
+  gl_FragColor = color;
+}

src/plugins/volumeRendering/shaders/vertex.glsl

@@ -0,0 +1,21 @@
+precision mediump float;
+
+uniform vec3 u_camera;
+uniform vec3 u_resolution;
+uniform float u_time;
+
+varying vec3 v_hitPos;
+varying vec3 v_hitPosWorldSpace;
+varying vec3 v_cameraObjectSpace;
+
+void main() {
+  vec3 pos = position;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+
+  v_hitPos = position.xyz;
+
+  v_hitPosWorldSpace = (modelMatrix * vec4(position, 1.0)).xyz;
+
+  v_cameraObjectSpace = (inverse(modelMatrix) * vec4(u_camera, 1.0)).xyz;
+}