更新 GLSL 代码后，vite 不更新页面

Question

过去几天我一直在尝试学习 GLSL，但有一点限制了我的进步，那就是当 GLSL 代码更新时页面不会更新，而我需要通过刷新页面来手动更新它。希望大家能给我一些指导，谢谢。

这是我的

vite.config

文件

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

import glsl from 'vite-plugin-glsl'

export default defineConfig({

plugins: [react(),glsl({ 

include:[

'**/*.glsl', '**/*.wgsl',

'**/*.vert', '**/*.frag',

 '**/*.vs', '**/*.fs'

 ],

 exclude: undefined,

warnDuplicatedImports: true,

 defaultExtension: 'glsl',

compress: false,

watch: true,

  root: '/'

  })],

})

我的片段文件

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

void main() {
    gl_FragColor = vec4(abs(sin(u_time)),0.0,0.0,1.0);
}

顶点文件

varying vec2 vUv;

void main() {
  vUv = uv;
  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
  vec4 viewPosition = viewMatrix * modelPosition;
  vec4 projectedPosition = projectionMatrix * viewPosition;

  gl_Position = projectedPosition;
}

我的场景文件

import { useRef, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { Canvas } from '@react-three/fiber'
import * as THREE from 'three'
import Fragmentjsx from './Fragment.glsl'
import Vertextjsx from './Vertex.glsl'



function App() {
  const [count, setCount] = useState(0)
  const mesh = useRef()
  return (
    <>
      <Canvas camera={{ position: [0.0, 0.0, 1.0] }}>
      <mesh ref={mesh} position={[0, 0, 0]} scale={1.0}>
          <planeGeometry args={[1, 1, 32, 32]} />
          <pointLight args={[1,1]}/>
          <shaderMaterial attach="material" fragmentShader={Fragmentjsx} vertexShader={Vertextjsx}/>
        </mesh>
      </Canvas>
    </>
  )
}

export default App

我尝试使用rawloader，但似乎仍然存在问题，只有当我手动刷新页面时，它才会更新我发现，如果glsl代码与场景函数位于同一个文件中，它似乎只会自动更新它代码如下。

import { useRef, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { Canvas } from '@react-three/fiber'
import * as THREE from 'three'
import Fragmentjsx from './Fragment.glsl'
import Vertextjsx from './Vertex.glsl'

const CustomShader = {
  uniforms:{uColor:new THREE.Color(0.0,0.0,0.0),
  },
  vertexShader: `
    void main() { 
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,

  fragmentShader: `
    void main(){
      gl_FragColor = vec4(0.1,0.3,1.0,1.0);
    }
  `
}

export { CustomShader }

function App() {
  const [count, setCount] = useState(0)
  const mesh = useRef()
  return (
    <>
      <Canvas camera={{ position: [0.0, 0.0, 1.0] }}>
      <mesh ref={mesh} position={[0, 0, 0]} scale={1.0}>
          <planeGeometry args={[1, 1, 32, 32]} />
          <pointLight args={[1,1]}/>
          <shaderMaterial attach="material" args={[CustomShader]}/>
        </mesh>
      </Canvas>
    </>
  )
}

export default App

Answer 1

尽量不要重写glsl的默认配置。只需在插件中使用即可

glsl(),

。