three.js引入glsl文件并高亮顯示代碼的方法

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代碼。