Three.js 材质对象Material对应的着色器Shader代码

• 点材质PointsMaterial：顶点着色器文件points_vert.glsl、片元着色器文件points_frag.glsl
• 基础网格材质MeshBasicMaterial：顶点着色器文件meshbasic_vert.glsl、片元着色器文件meshbasic_frag.glsl
• 高光网格材质MeshPhongMaterial：顶点着色器文件meshphong_vert.glsl、片元着色器文件meshphong_frag.glsl

材质对象封装

通过材质对象的.type属性，可以判断材质对象是哪种材质对象，一个材质对象具有一个惟一的type类型。

JavaScript语法

把字符串作为属性名访问对象的属性。

  var shaderIDs = {
  MeshBasicMaterial: 'basic',
  MeshLambertMaterial: 'lambert',
  MeshPhongMaterial: 'phong',
  };
  // 查看shaderIDs对象MeshBasicMaterial属性的值
  console.log(shaderIDs.MeshBasicMaterial);
  console.log('查看属性值',shaderIDs[ 'MeshBasicMaterial' ]);

 

shaders目录简介

着色器代码文件目录是three.js-master\src\renderers\shaders，shaders目录下有两个着色器代码的文件ShaderChunk和ShaderLib。

ShaderChunk目录下的着色器代码文件.glsl都是具有特定功能的模块，ShaderLib目录下的着色器文件会通过#include 调用ShaderChunk目录下特定功能的着色器代码块构建出来具有具有特定功能的顶点着色器文件和片元着色器文件。

• 点材质PointsMaterial：顶点着色器文件points_vert.glsl、片元着色器文件points_frag.glsl
• 基础网格材质MeshBasicMaterial：顶点着色器文件meshbasic_vert.glsl、片元着色器文件meshbasic_frag.glsl
• 高光网格材质MeshPhongMaterial：顶点着色器文件meshphong_vert.glsl、片元着色器文件meshphong_frag.glsl

1. ShaderChunk.js：用来获得ShaderChunk和ShaderLib文件中的着色器代码
2. ShaderLib.js：设置好点、线、网格材质对应的uniforms变量值、顶点着色器代码、片元着色器代码
3. UniformsLib.js、UniformsUtils.js：着色器中uniform变量对应的值

WebGLRenderer.js

通过WebGLPrograms对象的方法.getParameters()返回一个parameters对象，返回的parameters对象的shaderID属性保留了材质对象类型type的信息，通过材质对象信息可以在ShaderLib对象中获得材质对象对应的着色器代码。

import {ShaderLib} from './shaders/ShaderLib.js';
import {WebGLPrograms} from './webgl/WebGLPrograms.js';
programCache = new WebGLPrograms(_this, extensions, capabilities);

function initMaterial(material, fog, object) {

  // 返回一个parameters对象，具有shaderID属性，通过shaderID的属性值可以获得材质对象对应的着色器代码。
  var parameters = programCache.getParameters(material, lights.state, shadowsArray, ...object);

  // 通过shaderID键对应的值，作为ShaderLib对象的键名获得相应的值，uniforms对象、定点着色器代码、片元着色器代码
  var shader = ShaderLib[parameters.shaderID];

  materialProperties.shader = {
  name: material.type,
  uniforms: UniformsUtils.clone(shader.uniforms),
  vertexShader: shader.vertexShader,
  fragmentShader: shader.fragmentShader
  };
  // 处理着色器代码、编译着色器代码、返回程序对象program
  program = programCache.acquireProgram(material, materialProperties.shader, parameters, code);
}

 WebGLPrograms.js

构造函数WebGLPrograms封装了.getParameters()、.getProgramCode()、.acquireProgram()等方法和.programs属性。

function WebGLPrograms( renderer, extensions, capabilities ) {
  var shaderIDs = {
  MeshDepthMaterial: 'depth',
  MeshDistanceMaterial: 'distanceRGBA',
  MeshNormalMaterial: 'normal',
  MeshBasicMaterial: 'basic',
  MeshLambertMaterial: 'lambert',
  MeshPhongMaterial: 'phong',
  MeshToonMaterial: 'phong',
  MeshStandardMaterial: 'physical',
  MeshPhysicalMaterial: 'physical',
  LineBasicMaterial: 'basic',
  LineDashedMaterial: 'dashed',
  PointsMaterial: 'points',
  ShadowMaterial: 'shadow'
};
this.getParameters = function (material, lights,...){
  // 通过材质对象.type值，从shaderIDs提取相应的属性值
  var shaderID = shaderIDs[ material.type ];

  var parameters = {
// 该属性用于判断材质对象
  shaderID: shaderID,
  precision: precision,
  vertexColors: material.vertexColors,
  numSpotLights: lights.spot.length,
  numRectAreaLights: lights.rectArea.length,
  numHemiLights: lights.hemi.length,
  };

return parameters;
}
}