ThreeJS 获取Shader源码

(7条消息) 获取运行时Three.js Shader源码_DSLMing的博客-CSDN博客

原生提供的方法打印

const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });

const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();

// ... your scene setup code ...
// ... you MUST add the material to an object in the scene! ...

// Force shaders to be built
renderer.compile(scene, camera);

// Get the GL context:
const gl = renderer.getContext();

// Print the shader source!
console.log(
  gl.getShaderSource(material.program.fragmentShader)
);

利用浏览器插件

class ThreeLiveRawShaderEditor {

  constructor(renderer, camera, scene) {
    this.renderer = renderer;
    this.camera = camera;
    this.scene = scene;
  }

  compile() {
    this.renderer.compile(this.scene, this.camera);
  }
}
var TLRSE= new ThreeLiveRawShaderEditor(renderer, camera, scene);

onBeforeCompile

var geometry = new THREE.BoxGeometry(size, size, size);
var material = new THREE.MeshDepthMaterial()
var cube = new THREE.Mesh(geometry, material);
cube.material.onBeforeCompile = v => {
  console.error(v.vertexShader)
  console.error(v.fragmentShader);
}