从文件导入着色器时出现编译错误。 THREE.js + Vue.js + WebPack

Question

有错误，搜索了很多小时的解决方案，但一无所获( 以这种方式从文件导入着色器代码：
从 '../shaders/ColourShader.js'

导入 {ColourShader}

这是我的 'ColourShader.js' 代码：

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;',
'const float seed2 = 73156.8473192;',
'vec2 random2(vec2 st, float seed){',
    'st = vec2( dot(st,vec2(127.1,311.7)),',
              'dot(st,vec2(269.5,183.3)) );',
    'return -1.0 + 2.0*fract(sin(st)*seed);',
'}',
'float noise(vec2 st, float seed) {',
   'vec2 i = floor(st);',
    'vec2 f = fract(st);',
    'vec2 u = f*f*(3.0-2.0*f);',
    'return mix( mix( dot( random2(i + vec2(0.0,0.0), seed ), f - vec2(0.0,0.0) ),' ,
                     'dot( random2(i + vec2(1.0,0.0), seed ), f - vec2(1.0,0.0) ), u.x),',
                'mix( dot( random2(i + vec2(0.0,1.0), seed ), f - vec2(0.0,1.0) ),' ,
                     'dot( random2(i + vec2(1.0,1.0), seed ), f - vec2(1.0,1.0) ), u.x), u.y);',
'}',
'float fbm1(in vec2 _st, float seed) {',
  'float v = 0.0;',
  'float a = 0.5;',
  'vec2 shift = vec2(100.0);',
  'mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50));',
  'for (int i = 0; i < octaves; ++i) {',
      'v += a * noise(_st, seed);',
      '_st = rot * _st * 2.0 + shift;',
      'a *= 0.4;',
  '}',
  'return v;',
'}',
'float pattern(vec2 uv, float seed, float time, inout vec2 q, inout vec2 r) {',
  'q = vec2( fbm1( uv + vec2(0.0,0.0), seed ), fbm1( uv + vec2(5.2,1.3), seed ) );',
  'r = vec2( fbm1( uv + 4.0*q + vec2(1.7 - time / 2.,9.2), seed ), fbm1( uv + 4.0*q + vec2(8.3 - time / 2.,2.8), seed ) );',
  'vec2 s = vec2( fbm1( uv + 4.0*r + vec2(21.7 - time / 2.,90.2), seed ), fbm1( uv + 4.0*r + vec2(80.3 - time / 2.,20.8), seed ) );',
  'vec2 t = vec2( fbm1( uv + 4.0*s + vec2(121.7 - time / 2.,90.2), seed ), fbm1( uv + 4.0*s + vec2(180.3 - time / 2.,20.8), seed ) );',
  'float rtn = fbm1( uv + 4.0*t, seed );',
' rtn = clamp(rtn, 0., .5);' ,
 'return rtn;',
'}',
'void main() {',
  'vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;',
  'uv *= 1. + dot(uv, uv)*.3;',
  'float time = u_time / 20.;',
  'mat2 rot = mat2(cos(time), sin(time), -sin(time), cos(time));',
  'uv = rot * uv;',
  'uv *= 1.4 + sin(time) * .3;',
  'uv.x -= time;',
  'vec2 q = vec2(0.,0.);',
  'vec2 r = vec2(0.,0.);',
  'vec3 colour = vec3(pattern(uv, seed, time, q, r));',
  'float QR = clamp(dot(q, r), -1., 1.);',
  'colour += vec3(',
    '(q.x + q.y) + QR * 30.,',
    'QR * 15.', 
    'r.x * r.y + QR * 5.',
  ');',
  'colour += .1;',
  'colour = clamp(colour, 0.05, 1.);',
  'gl_FragColor = vec4(colour + (abs(colour) * .1), 1.);',
'}'].join('\n')}

所以，当我使用这个着色器通过标签导入它时它工作正常，但是如果我尝试将这个着色器导入我的 Vue.js 单个文件组件会出现很多错误，例如

THREE.WebGLShader: 着色器无法编译。

THREE.WebGLProgram：着色器错误：0 35715 false gl.getProgramInfoLog 无效着色器

Answer 1

你的问题出在你看不清楚，结果是这样的：

'colour += vec3(',
'(q.x + q.y) + QR * 30.,',
'QR * 15.', //// <------ Missing comma here
'r.x * r.y + QR * 5.',
');',

使用模板字面量会让您的生活更轻松，带有更正代码的示例：

let fragmentShader = `
uniform vec2 u_resolution;
uniform float u_time;
const int octaves = 6;
const float seed = 43758.5453123;
const float seed2 = 73156.8473192;

vec2 random2(vec2 st, float seed){
  st = vec2( dot(st,vec2(127.1,311.7)), dot(st,vec2(269.5,183.3)) );
  return -1.0 + 2.0*fract(sin(st)*seed);
}

float noise(vec2 st, float seed) {
  vec2 i = floor(st);
  vec2 f = fract(st);
  vec2 u = f*f*(3.0-2.0*f);
  return mix( mix( dot( random2(i + vec2(0.0,0.0), seed ), f - vec2(0.0,0.0) ),
              dot( random2(i + vec2(1.0,0.0), seed ), f - vec2(1.0,0.0) ), u.x),
              mix( dot( random2(i + vec2(0.0,1.0), seed ), f - vec2(0.0,1.0) ),
              dot( random2(i + vec2(1.0,1.0), seed ), f - vec2(1.0,1.0) ), u.x), u.y);
}

float fbm1(in vec2 _st, float seed) {
  float v = 0.0;
  float a = 0.5;
  vec2 shift = vec2(100.0);
  mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50));
  for (int i = 0; i < octaves; ++i) {
    v += a * noise(_st, seed);
    _st = rot * _st * 2.0 + shift;
    a *= 0.4;
  }
  return v;
}

float pattern(vec2 uv, float seed, float time, inout vec2 q, inout vec2 r) {
  q = vec2( fbm1( uv + vec2(0.0,0.0), seed ), fbm1( uv + vec2(5.2,1.3), seed ) );
  r = vec2( fbm1( uv + 4.0*q + vec2(1.7 - time / 2.,9.2), seed ), fbm1( uv + 4.0*q + vec2(8.3 - time / 2.,2.8), seed ) );
  vec2 s = vec2( fbm1( uv + 4.0*r + vec2(21.7 - time / 2.,90.2), seed ), fbm1( uv + 4.0*r + vec2(80.3 - time / 2.,20.8), seed ) );
  vec2 t = vec2( fbm1( uv + 4.0*s + vec2(121.7 - time / 2.,90.2), seed ), fbm1( uv + 4.0*s + vec2(180.3 - time / 2.,20.8), seed ) );
  float rtn = fbm1( uv + 4.0*t, seed );
  rtn = clamp(rtn, 0., .5);
  return rtn;
}

void main() {
  vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;
  uv *= 1. + dot(uv, uv)*.3;
  float time = u_time / 20.;
  mat2 rot = mat2(cos(time), sin(time), -sin(time), cos(time));
  uv = rot * uv;
  uv *= 1.4 + sin(time) * .3;
  uv.x -= time;
  vec2 q = vec2(0.,0.);
  vec2 r = vec2(0.,0.);
  vec3 colour = vec3(pattern(uv, seed, time, q, r));
  float QR = clamp(dot(q, r), -1., 1.);
  colour += vec3((q.x + q.y) + QR * 30.,
  QR * 15.,
  r.x * r.y + QR * 5.
  );
  colour += .1;
  colour = clamp(colour, 0.05, 1.);
  gl_FragColor = vec4(colour + (abs(colour) * .1), 1.);
}
`

从文件导入着色器时出现编译错误。 THREE.js + Vue.js + WebPack

Have compile error while importing shader from file. THREE.js + Vue.js + WebPack

javascript

shader

webgl

three.js

vue.js