three.meshline包MeshLineMaterial顶点着色器报错 ‘isPerspectiveMatrix‘ : no matching overloaded function found

1. 问题描述

使用three.meshline包，实例化MeshLineMaterial运行，控制台报错（three.js1版本0.141.0, three.meshline版本1.4.0），如下图所示：

three.module.js?6573:18994 THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Vertex shader is not compiled.

ERROR: 0:148: 'isPerspectiveMatrix' : no matching overloaded function found

  143:     gl_Position = finalPosition;
  144: 
  145: #ifdef USE_LOGDEPTHBUF
  146: 	#ifdef USE_LOGDEPTHBUF_EXT
  147: 		vFragDepth = 1.0 + gl_Position.w;
> 148: 		vIsPerspective = float( isPerspectiveMatrix( projectionMatrix ) );
  149: 	#else
  150: 		if ( isPerspectiveMatrix( projectionMatrix ) ) {
  151: 			gl_Position.z = log2( max( EPSILON, gl_Position.w + 1.0 ) ) * logDepthBufFC - 1.0;
  152: 			gl_Position.z *= gl_Position.w;
  153: 		}
  154: 	#endif

2. 解决思路

• 首先看报错信息：Vertex shader说明为顶点着色器，错误内容——isPerspectiveMatrix没有找到匹配的重载函数。那么干脆给它加上一个匹配的重载函数呗。
• 浅浅打个日志，看下这个材质实例化后，对象的结构，和顶点着色器具体的内容。

     console.log("meshLineMaterial", meshLineMaterial);

从对象中找到顶点着色器（vertexShader）

• 由此可见，可以直接在vertexShader的前面加上isPerspectiveMatrix的定义, 具体操作方式如下：

 meshLineMaterial.vertexShader = `
        bool isPerspectiveMatrix(mat4) {
            return true;
        }
    ` + meshLineMaterial.vertexShader;

• 再次运行后，控制台报错果然消失，可以正常运行。

3. 关键代码

以下是部分代码（主要是生成曲线和生成MeshLine的部分）。

  // 要绘制的路径上的一些关键点，每3个一组 
  const pointArr = [
        121.78093686863522, 0, -4.603376409073572,
        121.81339509799925, 0, -1.0333897782644268,
        88.18838269349277, 0, -1.0333897782644268,
        88.18838269349277, 0, 63.55900780432629,
        87.16531645200739, 0, 68.04794277498671,
        83.06620769318347, 0, 70.98695971872945,
        -1.130897005741467, 0, 70.34667258938468,
        -5.231039038271652, 0, 68.42613876317515,
        -7.758389327064392, 0, 64.62409029746112,
        -7.758389327064392, 0, 46.44123345882236,
        -114.62656106119152, 0, 46.44123345882236,
        -119.82497669490243, 0, 44.45968445743292,
        -121.94606515130032, 0, 39.4725534305143,
        -121.94606515130032, 0, -42.76532835182727,
        -120.11831411582477, 0, -48.53850237391983,
        -116.83579669695663, 0, -49.908124030849784,
        78.54313968215955, 0, -49.908124030849784,
        85.10694214192533, 0, -50.16532666595109,
        89.88557886450108, 0, -55.064547179368375,
        89.88557886450108, 0, -93.93831946321087,
        91.96632492268847, 0, -98.37744840781204,
        95.1920071430169, 0, -100.1746448114269,
        152.736779207395, 0, -100.1746448114269,
        157.30932898344975, 0, -96.64823157224308,
        160.4735065923067, 0, -99.846029526487,
        302.4743190232127, 0, -99.846029526487,
        307.28097694970387, 0, -98.29435216740127,
        309.4249527931002, 0, -93.79194193938966,
        317.1439029555364, 0, -10.678271186410282,
        322.7256435681537, 0, 64.82345541146658,
        321.948957384584, 0, 69.41475711676998,
        269.58743740380316, 0, 71.05051147709406,
        163.1264743368946, 0, 71.05051147709406,
        159.53952961773413, 0, 68.13337162416227,
        159.53952961773413, 0, -4.677615417615058,
        124.42066238999215, 0, -4.677615417615058,
      ];
      
  // 将上面的数组转换成坐标的数组
  const points = [];
  for (let i = 0; i < pointArr.length; i += 3) {
    
    
  	points.push(new Three.Vector3(pointArr[i], pointArr[i + 1], pointArr[i + 2]));
  }
      
  // 根据所有点，生成一条“不闭合”的曲线
  const pathCurve = new Three.CatmullRomCurve3(points, false, 'catmullrom', 0);
      
  // 根据曲线上的点，生成几何体getPoints的数量越大，几何体越平滑
  const geometry = new Three.BufferGeometry().setFromPoints(pathCurve.getPoints(10000));

  // 实例化MeshLine
  const meshLine = new MeshLine();
  meshLine.setGeometry(geometry);
      
  // 纹理贴图
  const arrow = await new Three.TextureLoader().loadAsync(require('@/assets/textures/golden-arrow.png'));
  arrow.wrapS = Three.RepeatWrapping;
  arrow.wrapT = Three.RepeatWrapping;
      
  // 实例化MeshLine的专属材质
  const meshLineMaterial = new MeshLineMaterial({
    
    
        useMap: 1,  // 使用贴图
        map: arrow,
        color: 0xff00ff,    // 贴图叠加颜色
        repeat: new Three.Vector2(500, 1),  // 贴图重复数量
        transparent: true,
        lineWidth: 10,
        dashArray: 0.01,    // 一组虚线占总长度的比例
        side: DoubleSide,
  });
      
  // 解决MeshLine材质顶点着色器报错
  meshLineMaterial.vertexShader = `
        bool isPerspectiveMatrix(mat4) {
            return true;
        }
  ` + meshLineMaterial.vertexShader;
     
  // 实例化渲染出来的网格模型，注意几何体使用MeshLine的几何体 
  const pathToShow = new Three.Mesh(meshLine.geometry, meshLineMaterial);
      
  // 场景的实例化此处不表
  scene.add(pathToShow);

4. 运行效果