Three.js引入GLSL文件并高亮显示代码的方法

在现代Web开发中，Three.js已经成为了创建3D图形的首选库之一。它基于WebGL，提供了丰富的API来简化3D场景的创建和管理。然而，为了实现更复杂的视觉效果，开发者通常需要编写自定义的着色器代码，即GLSL（OpenGL Shading Language）。本文将详细介绍如何在Three.js项目中引入GLSL文件，并实现代码的高亮显示。

1. 为什么需要引入GLSL文件？

在Three.js中，着色器代码通常以字符串的形式直接嵌入到JavaScript代码中。例如：

const vertexShader = `
  varying vec2 vUv;

  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

const fragmentShader = `
  uniform float time;
  varying vec2 vUv;

  void main() {
    gl_FragColor = vec4(vUv, 0.5 + 0.5 * sin(time), 1.0);
  }
`;

虽然这种方式简单直接，但随着着色器代码的复杂性增加，直接在JavaScript中嵌入GLSL代码会变得难以维护。因此，将GLSL代码分离到单独的文件中，并通过异步加载的方式引入，是一种更为优雅的解决方案。

2. 如何引入GLSL文件？

2.1 创建GLSL文件

首先，我们需要创建两个GLSL文件，分别用于存储顶点着色器和片段着色器的代码。例如：

• vertexShader.glsl
• fragmentShader.glsl

在vertexShader.glsl中，我们可以编写如下代码：

varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

在fragmentShader.glsl中，我们可以编写如下代码：

uniform float time;
varying vec2 vUv;

void main() {
  gl_FragColor = vec4(vUv, 0.5 + 0.5 * sin(time), 1.0);
}

2.2 使用fetch加载GLSL文件

在Three.js中，我们可以使用fetch API来异步加载GLSL文件。以下是一个简单的示例：

async function loadShader(url) {
  const response = await fetch(url);
  return await response.text();
}

async function init() {
  const vertexShader = await loadShader('vertexShader.glsl');
  const fragmentShader = await loadShader('fragmentShader.glsl');

  const material = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
      time: { value: 1.0 }
    }
  });

  // 创建场景、相机、渲染器等
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // 创建几何体并应用材质
  const geometry = new THREE.BoxGeometry();
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  camera.position.z = 5;

  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }

  animate();
}

init();

在这个示例中，我们定义了一个loadShader函数，用于异步加载GLSL文件。然后，在init函数中，我们使用await关键字等待GLSL文件的加载完成，并将加载的代码传递给THREE.ShaderMaterial。

2.3 处理加载错误

在实际开发中，网络请求可能会失败，因此我们需要处理加载错误的情况。可以通过try-catch语句来捕获异常：

async function loadShader(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Failed to load shader: ${response.statusText}`);
    }
    return await response.text();
  } catch (error) {
    console.error('Error loading shader:', error);
    return null;
  }
}

如果加载失败，我们可以选择使用默认的着色器代码，或者显示错误信息。

3. 高亮显示GLSL代码

在开发过程中，能够高亮显示GLSL代码对于调试和理解代码非常有帮助。我们可以使用一些现有的代码高亮库来实现这一功能，例如Prism.js或highlight.js。

3.1 使用Prism.js高亮显示GLSL代码

首先，我们需要引入Prism.js的库文件。可以通过CDN引入：

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-glsl.min.js"></script>

然后，我们可以在HTML中创建一个<pre>标签来显示GLSL代码：

<pre><code class="language-glsl" id="vertexShaderCode"></code></pre>
<pre><code class="language-glsl" id="fragmentShaderCode"></code></pre>

在JavaScript中，我们可以将加载的GLSL代码插入到这些标签中，并调用Prism.highlightAll()来高亮显示代码：

async function init() {
  const vertexShader = await loadShader('vertexShader.glsl');
  const fragmentShader = await loadShader('fragmentShader.glsl');

  document.getElementById('vertexShaderCode').textContent = vertexShader;
  document.getElementById('fragmentShaderCode').textContent = fragmentShader;

  Prism.highlightAll();

  // 其他Three.js初始化代码...
}

3.2 使用highlight.js高亮显示GLSL代码

与Prism.js类似，highlight.js也是一个流行的代码高亮库。首先，我们需要引入highlight.js的库文件：

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/languages/glsl.min.js"></script>

然后，我们可以在HTML中创建一个<pre>标签来显示GLSL代码：

<pre><code class="glsl" id="vertexShaderCode"></code></pre>
<pre><code class="glsl" id="fragmentShaderCode"></code></pre>

在JavaScript中，我们可以将加载的GLSL代码插入到这些标签中，并调用hljs.highlightAll()来高亮显示代码：

async function init() {
  const vertexShader = await loadShader('vertexShader.glsl');
  const fragmentShader = await loadShader('fragmentShader.glsl');

  document.getElementById('vertexShaderCode').textContent = vertexShader;
  document.getElementById('fragmentShaderCode').textContent = fragmentShader;

  hljs.highlightAll();

  // 其他Three.js初始化代码...
}

4. 总结

通过将GLSL代码分离到单独的文件中，并使用异步加载的方式引入，我们可以使Three.js项目更加模块化和易于维护。同时，使用代码高亮库如Prism.js或highlight.js，可以显著提高代码的可读性和开发效率。希望本文介绍的方法能够帮助你在Three.js项目中更好地管理和展示GLSL代码。