分析three.js OutlinePass 实现模式

原创

JediHongbin 2023-02-14 09:13:56 博主文章分类：webGL ©著作权

文章标签 webgl 着色器 three.js 边缘检测官网 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者JediHongbin的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

官网案例
文件位置
结构解析
核心逻辑
概述

OutlinePass 实现物体边界高亮效果

官网案例

webgl_postprocessing_outline

分析three.js OutlinePass 实现模式_官网

文件位置

three.js-master/examples/jsm/postprocessing/OutlinePass.js

结构解析

分析three.js OutlinePass 实现模式_着色器_02

class OutlinePass extends Pass {

  constructor(resolution, scene, camera, selectedObjects) {
  }

  dispose() {
  }

  setSize(width, height) {
  }

  changeVisibilityOfSelectedObjects(bVisible) {
  }

  changeVisibilityOfNonSelectedObjects(bVisible) {
  }

  updateTextureMatrix() {
  }

  render(renderer, writeBuffer, readBuffer, deltaTime, maskActive) {

    if (this.selectedObjects.length > 0) {
      // 使选定对象不可见
      // 1. 在深度缓冲区中绘制非选定对象
      // 使选定对象可见
      // 更新纹理矩阵以进行深度比较
      // 通过比较非选定对象的深度缓冲区，使非选定对象不可见，并仅绘制选定对象
      // 2. 将采样降低到半分辨率
      // 3. 应用边缘检测过程
      // 4. 在半分辨率上应用模糊
      // 对四分之一分辨率应用模糊
      // 在输入纹理上添加它
      
    }

    if (this.renderToScreen) {
    }
  }
  /**
  * 获取准备面膜材料
  */
  getPrepareMaskMaterial() {
  }
  /**
  * 获取边缘检测材料
  */
  getEdgeDetectionMaterial() {
  }
  /**
  * 可分离模糊材料
  */
  getSeperableBlurMaterial(maxRadius) {
  }
  /**
  * 获取覆盖材质
  */
  getOverlayMaterial() {
  }

}