THREE.Material Shader Sources Logging

by Matt

HTML

<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
		"imports": {
			"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js"
		}
}
</script>

Open your browser console

JavaScript

import * as THREE from 'three'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera()

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.toneMapping = THREE.ACESFilmicToneMapping

const geometry = new THREE.BufferGeometry()
const material = new THREE.ShaderMaterial()

const mesh = new THREE.Mesh (geometry, material )
scene.add( mesh )

// need to compile or render once before reading sources
renderer.compile( scene, camera );

logShaders( renderer, material );


/**
 * @param {THREE.WebGLRenderer} renderer
 * @param {THREE.Material} material
 */
function getShaderSources( renderer, material ) {
	
  const gl = renderer.getContext();
  const materialProperties = renderer.properties.get( material );
  
  const glVertexShader = materialProperties.currentProgram.vertexShader;
  const glFragmentShader = materialProperties.currentProgram.fragmentShader;
  
  return {
  	vertexShader: gl.getShaderSource( glVertexShader ),
    fragmentShader: gl.getShaderSource( glFragmentShader )
  }
  
}

/**
 * @param {THREE.WebGLRenderer} renderer
 * @param {THREE.Material} material
 */
function logShaders( renderer, material ) {

	const {
		vertexShader,
		fragmentShader
  } = getShaderSources( renderer, material );
  
  console.groupCollapsed( "vertexShader" )
  console.log( vertexShader )
  console.groupEnd()

  console.groupCollapsed( "fragmentShader" )
  console.log( fragmentShader )
  console.groupEnd()

}