WebGL 渲染器 WebGLRenderer

目录

Three.js封装的渲染器 

.domElement属性

.setSize(width, height)方法

帧缓冲区的相关封装

渲染器方法.clear(color,depth,stencil)

 渲染器方法.clearDepth()

渲染器属性.autoClear

---

Three.js封装的渲染器 

.domElement属性

如果想通过WebGL渲染一个三维场景，需要HTML的Canvas画布元素实现，通过渲染器构造函数WebGLRenderer创建一个渲染器对象 ，如果构造函数参数没有设置canvas对象，系统会自动创建一个Cnavas元素。

通过canvas元素返回WebGL上下文gl对象才能调用相关的WebGL API

//通过getElementById()方法获取canvas画布
var canvas=document.getElementById('webgl');
//通过方法getContext()获取WebGL上下文
var gl=canvas.getContext('webgl');
...
gl.enableVertexAttribArray(aposLocation);
...
gl.drawArrays(gl.LINE_LOOP,0,4);
...

 WebGLRenderer.js源码对.domElement属性的相关封装

  function WebGLRenderer(parameters) {
...
parameters = parameters || {};
//如果canvas画布没有通过参数对象parameters的canvas属性设置，通过API创建一个
var _canvas = parameters.canvas !== undefined ? parameters.canvas : document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas'),
...
把_canvas赋值给WebGL渲染器对象的domElement属性
this.domElement = _canvas;
  }

 通过渲染器.domElement属性，可以把Three.js的canvas画布插入到html任何一个元素中，可以在整个body页面上全局显示，也可以插入一个div元素中局部显示，注意canvas画布尺寸设置。

  // 创建渲染器对象
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);
  //body元素中插入Threejs创建的包含canvas对象
  document.body.appendChild(renderer.domElement);

.setSize(width, height)方法

WebGLRenderer.js源码对.setSize()方法的相关封装

...
// pixelRatio：像素比率
_pixelRatio = 1,
...
this.setSize = function(width, height, updateStyle) {
...
  _canvas.width = width * _pixelRatio;
  _canvas.height = height * _pixelRatio;

  if (updateStyle !== false) {
_canvas.style.width = width + 'px';
_canvas.style.height = height + 'px';
  }
...
};

 全屏设置，也就是canvas画布宽高度和窗口尺寸一样

 var width = window.innerWidth; //窗口宽度
  var height = window.innerHeight; //窗口高度

  var renderer = new THREE.WebGLRenderer();
  // 设置渲染尺寸，本质就是设置canvas元素宽高度
  renderer.setSize(width, height);

局部渲染，通过.setSize()方法设置canvas画布的宽高度像素 

  var width = window.innerWidth; //窗口宽度
  var height = window.innerHeight; //窗口高度

  var renderer = new THREE.WebGLRenderer();
  // 设置渲染尺寸，本质就是设置canvas元素宽高度
  renderer.setSize(300, 300);

帧缓冲区的相关封装

帧缓冲区包含颜色缓冲区、深度缓冲区、模板缓冲区，颜色缓冲区存储片元的颜色数据，也就是像素数据，深度缓冲存储片元的深度数据，用于WebGL渲染流程中的深度测试环节，被遮挡的片元会被剔除，不会显示在canvas画布上。

渲染器方法.clear(color,depth,stencil)

原生WebGL方法gl.clear()用来清除帧缓冲区数据

// 清除颜色缓冲区数据
gl.clear(gl.COLOR_BUFFER_BIT)
// 清除深度缓冲区数据
gl.clear(gl.DEPTH_BUFFER_BIT)
// 清除模板缓冲区数据
gl.clear(gl.STENCIL_BUFFER_BIT)

// 清除帧缓冲区的颜色、深度和模板缓冲中数据
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);

 WebGLRenderer.js源码对渲染器方法.clear()的封装

this.clear = function(color, depth, stencil) {
  // “&” 和 “|” 是位运算操作符
  var bits = 0;

  if (color === undefined || color) bits |= _gl.COLOR_BUFFER_BIT;
  if (depth === undefined || depth) bits |= _gl.DEPTH_BUFFER_BIT;
  if (stencil === undefined || stencil) bits |= _gl.STENCIL_BUFFER_BIT;

  _gl.clear(bits);

};

 渲染器方法.clearDepth()

清除帧缓冲区中深度缓冲区中的片元深度数据

renderer.clearDepth()

// WebGLRenderer.js源码
this.clearDepth = function() {
  this.clear(false, true, false);
};

渲染器属性.autoClear

Three.js渲染器默认情况下，本次执行render方法之前，会把上次执行render方法后帧缓冲区中的数据清除

autoClear默认值true，设置为false，执行render方法的时候不会自动清除上次渲染帧缓冲区中的数据

renderer.autoClear = false;