Basic Custom Lambert Shader Material Extension for Forge Viewer

shader-material-extension-part2.js

/////////////////////////////////////////////////////////////////
// ShaderMaterial Extension - Part 2
// By Philippe Leefsma, February 2016
//
/////////////////////////////////////////////////////////////////
import ShaderMaterialPanel from './Viewing.Extension.ShaderMaterial.Panel'
import ExtensionBase from 'Viewer.ExtensionBase'

// code for our previous basic shader 
// without light computation
//const vertexShader = `
//
//  varying vec2 vUv;
//
//  void main() {
//      vUv = uv;
//      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
//  }
//`
//
//const fragmentShader = `
//
//  uniform vec4 color;
//
//  varying vec2 vUv;
//
//  void main() {
//      gl_FragColor = color;
//  }
//`

class ShaderMaterialExtension2 extends ExtensionBase {

  /////////////////////////////////////////////////////////////////
  // Class constructor
  //
  /////////////////////////////////////////////////////////////////
  constructor (viewer, options) {

    super (viewer, options)
  }

  /////////////////////////////////////////////////////////////////
  // Extension Id
  //
  /////////////////////////////////////////////////////////////////
  static get ExtensionId() {

    return 'Viewing.Extension.ShaderMaterial2'
  }

  /////////////////////////////////////////////////////////////////
  // Load callback
  //
  /////////////////////////////////////////////////////////////////
  load() {

    this.selectionHandler = this.selectionHandler.bind(this)

    this.viewer.addEventListener(
      Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT,
      this.selectionHandler)

    // display all presets avail in shader lib
    console.log('THREE.ShaderLib:')
    console.log(THREE.ShaderLib)

    const shader = THREE.ShaderLib.lambert

    // available default uniforms
    console.log('lambert.uniforms:')
    console.log(shader.uniforms)

    // available default uniforms
    console.log('lambert.fragmentShader:')
    console.log(shader.fragmentShader)

    this.material = this.createShaderMaterial(
      Object.assign({}, shader, {
        name: 'shader-material'
      }))

    this.randomUpdate ()

    console.log('Viewing.Extension.ShaderMaterial2 loaded')

    return true
  }

  /////////////////////////////////////////////////////////////////
  // Unload callback
  //
  /////////////////////////////////////////////////////////////////
  unload() {

    console.log('Viewing.Extension.ShaderMaterial2 unloaded')

    return true
  }

  /////////////////////////////////////////////////////////////////
  //
  //
  /////////////////////////////////////////////////////////////////
  createShaderMaterial (data) {

    const material = new THREE.ShaderMaterial(data)

    this._viewer.impl.matman().addMaterial(
      data.name, material, true)

    return material
  }

  /////////////////////////////////////////////////////////////////
  //
  //
  /////////////////////////////////////////////////////////////////
  selectionHandler (event) {

    if (event.selections && event.selections.length) {

      const selection = event.selections[0]

      const fragIds = selection.fragIdsArray

      this.setMaterial(fragIds, this.material)

      this._viewer.clearSelection()
    }
  }

  /////////////////////////////////////////////////////////////////
  //
  //
  /////////////////////////////////////////////////////////////////
  setMaterial(fragIds, material) {

    const fragList = this._viewer.model.getFragmentList()

    this.toArray(fragIds).forEach((fragId) => {

      fragList.setMaterial(fragId, material)
    })

    this._viewer.impl.invalidate(true)
  }

  /////////////////////////////////////////////////////////////////
  //
  //
  /////////////////////////////////////////////////////////////////
  randomUpdate() {

    const color = new THREE.Color(
      Math.random(),
      Math.random(),
      Math.random())

    //this.material.uniforms.specular.value = color
    //this.material.uniforms.diffuse.value = color

    this.material.uniforms.emissive.value = color

    this.material.needsUpdate = true

    this._viewer.impl.sceneUpdated(true)

    window.setTimeout(() => this.randomUpdate(), 2000)
  }

  /////////////////////////////////////////////////////////////////
  //
  //
  /////////////////////////////////////////////////////////////////
  toArray (obj) {

    return obj ? (Array.isArray(obj) ? obj : [obj]) : []
  }
}

Autodesk.Viewing.theExtensionManager.registerExtension(
  ShaderMaterialExtension2.ExtensionId,
  ShaderMaterialExtension2)