I've encountered an error and spent hours searching for a solution, but unfortunately found nothing. The correct way to import shader code from a file is:
import {ColourShader} from '../shaders/ColourShader.js'Here is the content of my 'ColourShader.js' file:
export var ColourShader = {
vertexShader: [
'void main() {',
'gl_Position = vec4( position, 1.0 );',
'}'
].join(),
fragmentShader: [
'uniform vec2 u_resolution;',
'uniform float u_time;',
'const int octaves = 6;',
'const float seed = 43758.5453123;',
// more shader code...
].join('\n')
}When I import this shader using a script tag, it works fine. However, when trying to import it into my Vue.js single file component, I encounter multiple errors such as:
THREE.WebGLShader: Shader couldn't compile.
THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog invalid shaders