CODEWITHSUNDEEP
three.jsglslviteshaderreact-three-fiber
dik james
dik james

Reputation: 9

vite not updating it page when GLSL code have been updated

I been trying to learn GLSL in this past few days but there's something that limited my progression is that the page won't updated when The GLSL code have been updated where i need to manually updating it by refreshing the page. Hope you guys can provide me a bit of guidance here and thank you.

here's my vite.config file

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import glsl from 'vite-plugin-glsl'

export default defineConfig({
  plugins: [react(),glsl({ 
    include:[`<br>
      '**/*.glsl', '**/*.wgsl',
      '**/*.vert', '**/*.frag',
      '**/*.vs', '**/*.fs'
    ],
    exclude: undefined,
    warnDuplicatedImports: true,
    defaultExtension: 'glsl',
    compress: false,
    watch: true,
    root: '/'
  })],
})

my fragmentfile

#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);
}

vertexfile

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

my scenefile

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

i try using rawloader but it seems it still have the problem where it will only updated only if i manually refresh the page i found out it seems it only automatically updated it if the glsl code its in the same file as the scene function as the code below.

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

Upvotes: 0

Views: 51

Answers (1)

Oleksandr Ulashyn
Oleksandr Ulashyn

Reputation: 1

Try to don't rewrite default config of glsl. Just use in plugin glsl(),.

Upvotes: 0

Related Questions