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假gl.getProgramInfoLog无效的着色器

Answer 1

您的问题在于您对清晰度的迷惑，而这种情况发生了：

select m.name as "Market Name",
   avg(w.employee_id) as "Avg.NumberofEmployeesPerMarket"
from workson w
left join employee e on ( e.employee_id = w.employee_id )
left join market m on ( m.market_id = w.market_id )
group by m.name;

使用模板文字将使您的生活更轻松，例如带有正确代码的示例：

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

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

1 个答案: