欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 游戏 > WebGL 渲染器 WebGLRenderer

WebGL 渲染器 WebGLRenderer

2025/3/16 23:00:15 来源:https://blog.csdn.net/dabaooooq/article/details/145938688  浏览:    关键词: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;

 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词