关于前端:THREEjs如何扩展已有材质

65次阅读

共计 7067 个字符,预计需要花费 18 分钟才能阅读完成。

最近,想要给一个立方体不同的面赋不同的材质,能够是纯色也能够是贴图。而后,我就感觉一个简略的 shaderMaterial 就能够解决了。然而放到理论利用场景中发现,别的物体有光照成果,我写的没有光照成果。所以还得给自定义着色器增加光照成果,于是就有了这篇文章。

本文次要从以下几个方面进行讲述:

  1. 创立没有光照成果的立方体;
  2. 扩大 lambert 材质,创立有光照成果的立方体;

适用人群:对 THREE.js 和 glsl 有根本理解的人。

创立没有光照成果的立方体

本示例会创立一个前后左右面是纯色,上上面是贴图的立方体。该局部的内容次要包含以下局部:

  1. 创立 bufferGeometry;
  2. 自定义 shaderMaterial,在 shaderMaterial 外面判断是用纯色还是贴图;
  3. 创立 mesh。

创立 bufferGeometry

因为想更深刻的理解 THREE.js 的实现原理,所以这块没有间接应用 BoxBufferGeometry,而是本人定义顶点信息:

const geometry = new THREE.BufferGeometry()
const position = [ // 每个面两个三角形,每个三角形三个顶点,每个顶点三个坐标值,所以一个三角形是 3 *3= 9 个值,一个面是 3 *3*2=18 个值
  -1, -1, 1, 1, -1, 1, 1, 1, 1, // front face
  1, 1, 1, -1, 1, 1, -1, -1, 1,
  1, -1, 1, 1, -1, -1, 1, 1, -1, // right face
  1, 1, -1, 1, 1, 1, 1, -1, 1,
  1, -1, -1, -1, -1, -1, -1, 1, -1, // back face
  -1, 1, -1, 1, 1, -1, 1, -1, -1,
  -1, -1, -1, -1, -1, 1, -1, 1, 1, // left face
  -1, 1, 1, -1, 1, -1, -1, -1, -1,
  -1, 1, 1, 1, 1, 1, 1, 1, -1, // top face
  1, 1, -1, -1, 1, -1, -1, 1, 1,
  1, -1, 1, -1, -1, 1, -1, -1, -1, // bottom face
  -1, -1, -1, 1, -1, -1, 1, -1, 1
]
// 定义了一个长宽高都是 2 的立方体,所以下面 xyz 的坐标要么是 1,要么是 -1
geometry.setAttribute('position', new THREE.BufferAttribute(Float32Array.from(position), 3))

而后,给每个顶点增加色彩信息,每个顶点既能够是纯色也能够是贴图,纯色须要 rgb 三个重量,贴图须要 uv 两个重量,所以每个顶点至多须要三个重量来示意。

那么,如何判断这个顶点是纯色还是贴图呢?
咱们当然能够再应用一个数组来示意。然而留神到下面贴图只须要两个重量,那么咱们就能够利用第三个重量来判断。glsl 语言外面 rgb 色值的范畴是 0 -1,所以咱们能够应用这个范畴之外的值示意这是一个贴图。

那取什么值呢?咱们这个立方体定义了上上面是贴图,也就是贴图不只一个,那么这个值还要能推导出是第几个贴图。我这里设置了一个 textureBaseIndex2的变量。

const colors = []
const textureBaseIndex = 2
for (let i = 0; i < 12; i++) {switch (i) {
    case 0: // front color
    case 1:
      colors.push(1, 0, 0, 1, 0, 0, 1, 0, 0) // 红
      break
    case 2: // right color
    case 3:
      colors.push(0, 1, 0, 0, 1, 0, 0, 1, 0) // 绿
      break
    case 4: // back color
    case 5:
      colors.push(0, 0, 1, 0, 0, 1, 0, 0, 1) // 蓝
      break;
    case 6: // left color
    case 7:
      colors.push(1, 1, 0, 1, 1, 0, 1, 1, 0) // 黄
      break
    case 8: // top texture uv,前两个重量示意 uv,第三个重量示意取第几个纹理,在纹理理论索引值的根底上加上 textureBaseIndex
      colors.push(0, 0, textureBaseIndex + 0, 1, 0, textureBaseIndex + 0, 1, 1, textureBaseIndex + 0)
      break
    case 9:
      colors.push(1, 1, textureBaseIndex + 0, 0, 1, textureBaseIndex + 0, 0, 0, textureBaseIndex + 0)
      break
    case 10: // bottom texture uv,前两个重量示意 uv,第三个重量示意取第几个纹理,在纹理理论索引值的根底上加上 textureBaseIndex
      colors.push(1, 1, textureBaseIndex + 1, 0, 1, textureBaseIndex + 1, 0, 0, textureBaseIndex + 1)
      break
    case 11:
      colors.push(0, 0, textureBaseIndex + 1, 1, 0, textureBaseIndex + 1, 1, 1, textureBaseIndex + 1)
      break
  }
}
geometry.setAttribute('color', new THREE.BufferAttribute(Float32Array.from(colors), 3))

自定义 shanderMaterial

顶点着色器的代码比较简单,把 color 属性通过 varying 变量 vColor 传给片元着色器:

function getVertexShader () {
  return `
    attribute vec3 color;

    varying vec3 vColor;

    void main () {
      vColor = color;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `
}

接下来是片元着色器,次要有以下几点:

  1. 通过 vColor.z 判断是纯色还是贴图;
  2. 把贴图信息通过 sampler2D 数组传入,而后在依据 vColor.z 获取数组下标的时候,后面在生成下标的时候加了一个textureBaseIndex,所以用的时候得先减去;
  3. 通过下标获取 sampler2D 数组中的某一项的时候,不能间接应用 textures[index],glsl 要求[] 外面的内容必须是 Integral constant expression,所以应用了一个 generateSwitch 函数动静生成一系列 if 代码;

残缺代码如下:

function getFragmentShader (textureLength, textureBaseIndex) {function generateSwitch () {
    let str = ''
    for (let i = 0; i < textureLength; i++) {str += `${str.length ? 'else' : ''} if (index == ${i}) {gl_FragColor = texture2D(textures[${i}], vec2(vColor.x, vColor.y));
      }
      `
    }

    return str
  }

  return `
    ${textureLength ? `
      uniform sampler2D textures[${textureLength}];
    ` : ''}

    varying vec3 vColor;

    void main () {
      ${textureLength ? `
        if (vColor.z <= 1.0) {gl_FragColor = vec4(vColor, 1.0);
        } else {int index = int(vColor.z) - ${textureBaseIndex};
          ${generateSwitch()}
        }` : `
        gl_FragColor = vec4(vColor, 1.0);
        `
      }
    }
  `
}

生成自定义材质:

const textures = [new THREE.TextureLoader().load('./textures/colors.png'), // 顶面贴图
  new THREE.TextureLoader().load('./textures/colors.png') // 底面贴图
]
const material = new THREE.ShaderMaterial({
  uniforms: {textures: { value: textures} // 片元着色器中会应用
  },
  vertexShader: getVertexShader(),
  fragmentShader: getFragmentShader(textures.length, textureBaseIndex)
})

创立 mesh

这步就比较简单了,创立一个 mesh,并增加到场景中:

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

这样,立方体就创立好了。本例应用了根本的 WebGLRenderer,Scene,PerspectiveCamera,没有非凡解决,这里就不再写了。实现成果截图如下:
front/right/top 面成果截图

back/left/bottom 面成果截图

扩大 lambert 材质,创立有光照成果的立方体

我的理论利用场景中的物体是 lambert 材质,也就是 MeshLambertMaterial。所以,上面的实例代码以扩大 lamert 材质的光照成果为例。要想应用该实现计划,最好钻研下 THREE.js 的源码。

THREE.js 外面事后定义了一系列材质,MeshLambertMaterial 材质就是其中之一。这部分代码在 src/renderers/shaders 文件夹上面,ShaderLib.js 外面是材质的入口,比方 MeshLambertMaterial:

const ShaderLib = {
    lambert: {
        uniforms: mergeUniforms( [ // uniform 变量
            UniformsLib.common,
            UniformsLib.specularmap,
            UniformsLib.envmap,
            UniformsLib.aomap,
            UniformsLib.lightmap,
            UniformsLib.emissivemap,
            UniformsLib.fog,
            UniformsLib.lights,
            {emissive: { value: new Color( 0x000000) }
            }
        ] ),

        vertexShader: ShaderChunk.meshlambert_vert, // 顶点着色器代码
        fragmentShader: ShaderChunk.meshlambert_frag // 片元着色器代码
    },
}

ShaderChunk 和 ShaderLib 文件夹上面就是理论的着色器代码,区别是 ShaderLib 是 THREE.js 给咱们间接应用的,ShaderChunk 是更细粒度的代码。ShderLib 外面的不同材质有很多共有的代码,所以这个共有的代码就提取成一个个 ShaderChunk,达到复用的目标。一个材质是由多个 ShaderChunk 生成的。咱们能够关上 ShaderLib/meshlambert_vert.glsl.js 文件,会发现外面有很多 #include 语句,这些语句最初会被替换为理论的 ShaderChunk 外面的片段。

咱们看到 shaders 文件夹上面只是定义了材质的构造以及 glsl 代码片段,那么,残缺成果的代码是在哪生成的呢?
src/renderers/webgl/WebGLProgram.js文件。

列一下这个文件我理解的一些知识点:

  1. 首先依据咱们创立材质时的参数,定义一些 #define 变量,增加在着色器代码的后面;
  2. 解析 ShaderLib 外面的代码,把 #include 语句替换为理论代码,参见 resolveIncludes 函数;

更重要的是,ShaderLib 外面预约义的一些材质,挂在了 THREE 变量上,这样咱们就能够取得原始代码,并通过批改局部 glsl 代码达到扩大材质的目标。

比方,下面的那个例子,首先革新一下顶点着色器:

  1. 在默认的 lambert 顶点着色器代码后面增加属性变量和 varying 变量;
  2. 在 main 函数外面给 varying 变量赋值;
  3. 具体插在原始 main 函数的哪一行看你的需要;
function getVertexShader () {
  let shader = `
    attribute vec3 color;
    varying vec3 vColor;
  ` + THREE.ShaderLib.lambert.vertexShader

  const index = shader.indexOf('#include <uv_vertex>')
  shader = shader.slice(0, index) + `
    vColor = color;
  ` + shader.slice(index)

  return shader
}

片元着色器的革新如下:

  1. 在默认的 lambert 片元着色器代码后面增加 uniform 变量和 varying 变量;
  2. 在 main 函数外面插入咱们的代码,插入地位我选在了 #include <color_fragment> 前面,因为这个代码片段和我当初的批改做了相似的事件,所以插在这个地位是能够的。留神,此时就不是间接给 gl_FragColor 赋值了,而是把成果加在 diffuseColor 变量上。理论开发的时候,具体批改哪个值就得参考 THREE.js 源码了。
function getFragmentShader (textureLength, textureBaseIndex) {function generateSwitch () {
    let str = ''
    for (let i = 0; i < textureLength; i++) {str += `${str.length ? 'else' : ''} if (index == ${i}) {diffuseColor *= texture2D(textures[${i}], vec2(vColor.x, vColor.y));
      }
      `
    }

    return str
  }

  let shader = `
    uniform sampler2D textures[${textureLength}];
    varying vec3 vColor;
  ` + THREE.ShaderLib.lambert.fragmentShader

  const index = shader.indexOf('#include <color_fragment>')
  shader = shader.slice(0, index) + `
    ${textureLength ? `
      if (vColor.z <= 1.0) {diffuseColor.rgb *= vColor;} else {int index = int(vColor.z) - ${textureBaseIndex};
        ${generateSwitch()}
      }` : `
      diffuseColor.rgb *= vColor;
      `
    }
  ` + shader.slice(index)

  return shader
}

而后,创立着色器:

  1. 批改一下 uniform 变量,把 lambert 默认的 uniform 变量也增加进去;
  2. 增加 lights 参数为 true,否则代码报错;
  3. THREE 源码默认 diffuse 是 0xeeeeee,笼罩一下,批改为 0xffffff;
const material = new THREE.ShaderMaterial({
  uniforms: THREE.UniformsUtils.merge([
    THREE.ShaderLib.lambert.uniforms,
    {textures: { value: textures}
    },
    {
      diffuse: {value: new THREE.Color(0xffffff)
      }
    }
  ]),
  vertexShader: getVertexShader(),
  fragmentShader: getFragmentShader(textures.length, textureBaseIndex),
  lights: true
})

这个时候刷新页面,会发现是一个彩色的立方体,这是因为咱们还没有增加光源:

const light = new THREE.DirectionalLight(0xffffff); // 平行光
light.position.set(1, 1, 1);
scene.add(light);

const ambient = new THREE.AmbientLight(0xffffff, 0.7); // 环境光
scene.add(ambient)

之所以增加两个光源是因为发现:

  1. 环境光不受几何物体法线影响;
  2. 平行光受几何物体法线影响;

增加上述代码后,如果把环境光正文掉,会发现材质还是彩色的,这是因为下面创立的 geometry 没有法线信息,所以须要应用上面的办法增加一下法线信息:

geometry.computeVertexNormals()

最终成果截图如下:
front/right/top 面成果截图,同时受平行光和环境光影响

back/left/bottom 面成果截图,不在平行光照耀范畴内,只受环境光影响

总结

本文例子只是为了解说如何扩大已有材质,可能并没有任何应用意义。

上述观点是基于目前对 THREE.js 的钻研后果,可能会有认知谬误。如有,欢送留言评论。

参考资料:

  1. Extending the Built-in Phong Material Shader in Three.js
  2. Integral constant expression

正文完
 0