---
title: "THREE-CustomShaderMaterial"
description: "Extends Three.js built-in materials with your own vertex and fragment shaders while keeping lighting, shadows and depth passes intact."
canonical: "https://vibing.inc/library/three-customshadermaterial-vg-1746"
category: "Shaders, WebGL & Creative Coding"
subcategory: "R3F ecosystem"
license: "MIT"
author: "Faraz Shaikh (@FarazzShaikh)"
source: "https://github.com/FarazzShaikh/THREE-CustomShaderMaterial"
---

# THREE-CustomShaderMaterial
Extends Three.js built-in materials with your own vertex and fragment shaders while keeping lighting, shadows and depth passes intact.
## Facts
- Source: https://github.com/FarazzShaikh/THREE-CustomShaderMaterial
- Category: Shaders, WebGL & Creative Coding / R3F ecosystem
- Author: Faraz Shaikh (@FarazzShaikh)
- Licence: MIT
- Tags: three.js, shaders, r3f, materials
## Why it's a gem
Solves the hardest r3f problem: custom shaders that still receive real lighting and shadows.
---
Listed in The Vibeary: https://vibing.inc/library/three-customshadermaterial-vg-1746 · JSON: https://vibing.inc/api/public/library/gems/three-customshadermaterial-vg-1746