How to Convert Unreal Engine Shaders to Three.js
Unreal Engine (UE) shaders use a node-based system powered by HLSL, whereas Three.js uses GLSL for its WebGL materials. Converting a shader from Unreal to Three.js requires manually translating HLSL shader code into GLSL and adapting it to the Three.js rendering pipeline.
This article covers the key steps and best practices for converting UE shaders to Three.js.
—
## **1. Understanding Shader Differences**
### **Unreal Engine Shader System**
– Uses **HLSL** (High-Level Shader Language).
– Relies on a node-based material editor.
– Supports advanced rendering techniques like PBR, screen-space effects, and virtual texturing.
### **Three.js Shader System**
– Uses **GLSL** (OpenGL Shading Language) for WebGL.
– Provides built-in materials (e.g., `MeshStandardMaterial`, `MeshPhongMaterial`).
– Supports custom shaders using `ShaderMaterial` and `RawShaderMaterial`.
To convert a shader, we must rewrite HLSL logic into GLSL while ensuring compatibility with Three.js.
—
## **2. Extracting Unreal Engine Shader Code**
1. **Open the Unreal Engine Material Editor.**
2. **Locate the shader nodes.**
3. **Enable Custom HLSL Code:**
– Some materials allow you to add custom HLSL code via the *Custom* node.
4. **Export the Shader as HLSL:**
– You can find HLSL source files in `Engine/Shaders/`.
– Use `r.DumpShaderDebugInfo 1` in the UE console to extract compiled shaders.
—
## **3. Translating HLSL to GLSL**
### **Key Syntax Differences**
| **Feature** | **Unreal HLSL** | **Three.js GLSL** |
|——————–|—————-|—————-|
| Variable Types | `float`, `float3` | `float`, `vec3` |
| Texture Sampling | `Texture2D.Sample(sampler, uv)` | `texture2D(texture, uv)` |
| Matrix Multiplication | `mul(matrix, vector)` | `matrix * vector` |
| Conditional Compilation | `#if` / `#endif` | `#ifdef` / `#endif` |
### **Example: Diffuse Lighting Shader**
#### **Unreal HLSL Version**
“`hlsl
float3 DiffuseLight(float3 normal, float3 lightDir, float3 albedo) {
float NdotL = max(dot(normal, lightDir), 0.0);
return albedo * NdotL;
}
“`
#### **Three.js GLSL Version**
“`glsl
vec3 DiffuseLight(vec3 normal, vec3 lightDir, vec3 albedo) {
float NdotL = max(dot(normal, lightDir), 0.0);
return albedo * NdotL;
}
“`
—
## **4. Implementing the Shader in Three.js**
Once converted, the shader can be used in Three.js with `ShaderMaterial`:
“`javascript
const vertexShader = `
varying vec3 vNormal;
void main() {
vNormal = normalize(normalMatrix * normal);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
const fragmentShader = `
uniform vec3 lightDir;
uniform vec3 albedo;
varying vec3 vNormal;
void main() {
float NdotL = max(dot(vNormal, normalize(lightDir)), 0.0);
gl_FragColor = vec4(albedo * NdotL, 1.0);
}
`;
const material = new THREE.ShaderMaterial({
uniforms: {
lightDir: { value: new THREE.Vector3(1, 1, 1).normalize() },
albedo: { value: new THREE.Color(0.8, 0.3, 0.3) }
},
vertexShader,
fragmentShader
});
“`
—
## **5. Handling Textures & PBR Shaders**
Unreal Engine materials often use PBR (Physically Based Rendering). In Three.js, you can achieve similar results using `MeshStandardMaterial` or a custom shader.
### **Texture Sampling Example**
#### **Unreal HLSL**
“`hlsl
float4 color = Texture2D.Sample(SamplerState, uv);
“`
#### **Three.js GLSL**
“`glsl
uniform sampler2D texture;
vec4 color = texture2D(texture, uv);
“`
### **PBR Shader Adjustments**
– Replace **metallic & roughness calculations** from UE’s material editor with Three.js `MeshStandardMaterial` or GLSL equivalents.
– Convert normal maps from DirectX to OpenGL format by flipping the Y channel.
—
## **6. Optimizing for Web Performance**
– Minimize shader complexity to maintain performance in WebGL.
– Use **Three.js’s built-in uniforms** like `cameraPosition` and `normalMatrix` for better integration.
– Consider pre-processing Unreal shaders using tools like **glslify** or **Babylon.js Shader Compiler** for easier conversion.
—
## **Conclusion**
Converting Unreal Engine shaders to Three.js requires translating HLSL code into GLSL, adapting it to the Three.js shader system, and optimizing for WebGL. While some advanced UE shaders may be challenging to replicate fully, many effects can be achieved with careful conversion and Three.js’s flexible `ShaderMaterial`.
For complex shaders, tools like **node-based GLSL editors** or **AI-powered translation tools** can help speed up the process.
Would you like a step-by-step guide for a specific shader type, like water, toon shading, or post-processing effects?