【Threejs】轮廓线、边框线、选中效果实现的N种方法以及性能评估(目前7种)
【Threejs】轮廓线、边框线、选中效果实现的N种方法以及性能评估(目前7种)
对于模型较小,面数较少,机器性能很好的情况下,用哪种方法都可以。
但是对于压缩后glb还有100m、200m,几百万面,机器配置又一般的情况下,对于效果和性能,就需要作出选择了。
备注:① example里https://jsfiddle.net开头的链接,需要VPN,能访问国外网络,才能打开;
②所有的性能评估,我是以 机器配置:CPU i5-4460 3.20GHz 、内存 8.00 GB、显卡 NVIDIA GeForce GTX 745 (4096MB) 上 运行压缩后100M 面数150w面左右的glb,在chrome上运行测试的。
OutlinePass
example https://threejs.org/examples/?q=outline#webgl_postprocessing_outline
优点:效果非常赞,可设置 边线大小,光晕,边缘浓度,呼吸闪烁等等效果
缺点:性能消耗double
主要代码片段
// 引入
import {EffectComposer} from 'three/examples/jsm/postprocessing/EffectComposer.js';
import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass.js';
import {ShaderPass} from 'three/examples/jsm/postprocessing/ShaderPass.js';
import {OutlinePass} from 'three/examples/jsm/postprocessing/OutlinePass.js';
import {FXAAShader} from 'three/examples/jsm/shaders/FXAAShader.js';//初始化
// postprocessing
const size = renderer.getSize(new THREE.Vector2());
const _pixelRatio = renderer.getPixelRatio();
const _width = size.width;
const _height = size.height;
const renderTarget = new THREE.WebGLRenderTarget(_width * _pixelRatio,_height * _pixelRatio,{minFilter: THREE.LinearFilter,magFilter: THREE.LinearFilter,format: THREE.RGBAFormat,encoding: THREE.sRGBEncoding}
);
renderTarget.texture.name = "EffectComposer.rt1";
composer = new EffectComposer(renderer, renderTarget);
// composer = new EffectComposer(renderer);const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
composer.addPass(outlinePass);// const textureLoader = new THREE.TextureLoader();
// textureLoader.load('assets/tri_pattern.jpg', function (texture) {//
// outlinePass.patternTexture = texture;
// texture.wrapS = THREE.RepeatWrapping;
// texture.wrapT = THREE.RepeatWrapping;
//
// });effectFXAA = new ShaderPass(FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
composer.addPass(effectFXAA);outlinePass.visibleEdgeColor.set(outlineColor[0]); // 边缘可见部分发颜色 sColor[0].color
outlinePass.hiddenEdgeColor.set(outlineColor[1]); // 边缘遮挡部分发光颜色 sColor[1].color
outlinePass.edgeStrength = Number(10.0); //边框的亮度
outlinePass.edgeGlow = Number(1); //光晕[0,1]
outlinePass.edgeThickness = Number(1.0); //边缘浓度
outlinePass.pulsePeriod = Number(1.8); //呼吸闪烁的速度 闪烁频率 ,默认0 ,值越大频率越低
outlinePass.usePatternTexture = false; //是否使用父级的材质
outlinePass.downSampleRatio = 2; // 边框弯曲度
outlinePass.clear = true;// animate render里
renderer.render(scene, camera);
composer.render();
EdgesGeometry
example https://jsfiddle.net/tgcf1u84/3/
https://threejs.org/examples/?q=help#webgl_helpers
优点:效果还行;性能比OutlinePass,要好一点,但是差距不是很大,大概5-10fps的样子;代码实现简单;
缺点:性能消耗较大,效果一般,线框的宽度不能大于1(官方是这样解释的:由于OpenGL Core Profile与 大多数平台上WebGL渲染器的限制,无论如何设置该值,线宽始终为1。)
主要代码片段
//添加
var edgeMaterial = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 5,} );
object.traverse( function( child ) {if ( child.isMesh ) {var edges = new THREE.EdgesGeometry( child.geometry, 45 );var line = new THREE.LineSegments( edges, edgeMaterial );child.add( line );}
} );
EdgesGeometry + LineSegments2
example https://jsfiddle.net/5qv4Lmog/1/
优点:效果还行;线框宽度可大于1;性能比EdgesGeometry,要差一点,但是差距不是很大;
缺点:性能消耗较大,效果一般,不能在traverse时,直接add,否则会导致无尽的递归行为;
主要代码片段
//添加
edgeMaterial = new LineMaterial( { color: 0xff0000, linewidth: 5 } );
const meshes = [];
object.traverse( function( child ) {if ( child.isMesh ) meshes.push( child );
} );for ( let mesh of meshes ) {var edges = new THREE.EdgesGeometry( mesh.geometry, 45 );var wideEdges = new LineSegmentsGeometry().fromEdgesGeometry( edges );var line = new LineSegments2( wideEdges, edgeMaterial );mesh.add( line );
}
OutlineEffect
example https://threejs.org/examples/?q=toon#webgl_materials_variations_toon (官方案例,单个scene)
https://jsfiddle.net/cwayd9v5/6/(多个scene,模拟实现特定对象出现边框线的效果)
优点:效果还行;性能也OK,代码实现很简单;
缺点:对于结构复杂的模型,不能实现特定对象出现边框线的功能效果(https://stackoverflow.com/questions/59997603/outline-effect-to-target-object/59998722#59998722 这个帖子上思路,能实现我提供的第二个效果,但是对于结构复杂模型,业务功能稍微复杂一些的,就不适用了);
主要代码片段
//引入
import { OutlineEffect } from './jsm/effects/OutlineEffect.js';//初始化
let effect;
//renderer是webgl renderer
effect = new THREE.OutlineEffect(renderer,{defaultThickness: 0.015, //线条粗细defaultColor: [0.2,0.2,1], //线条颜色efaultAlpha: 0.9,// defaultKeepAlive: true // keeps outline material in cache even if material is removed from scene
});//animate render里
effect.render( scene, camera ); //替换 renderer.render( scene, camera );
绘制一个对象两次;一次轮廓颜色对象,一次正常对象
example https://jsfiddle.net/a4x0fwo7/47/
优点:效果还行;性能一般;
缺点:对于结构复杂的模型,会消耗较大的内存和性能;
主要代码片段
https://jsfiddle.net/a4x0fwo7/47/ 看这个链接里的源码
参考文章:https://blog.mozvr.com/cartoon-outline-effect/
法线延伸
example https://omarshehata.github.io/csb-l01dp/
优点:未实现,不清楚
缺点:未实现,不清楚
主要代码片段
https://github.com/OmarShehata/webgl-outlines 看这个链接里的源码
参考文章:https://omar-shehata.medium.com/how-to-render-outlines-in-webgl-8253c14724f9
https://github.com/OmarShehata/webgl-outlines
BoxHelper
example https://jsfiddle.net/maco6fqt/12/
https://threejs.org/examples/?q=box#webgl_helpers (官方案例)
优点:性能最好
缺点:效果比较差(这种效果只能算上选中效果,和边框线,轮廓线没关系)
主要代码片段
const box:any = new THREE.BoxHelper( object, '#00ffff'); //object 模型
object.attach(box);
【Threejs】轮廓线、边框线、选中效果实现的N种方法以及性能评估(目前7种)相关推荐
- 火狐浏览器打印时会出现边框线不显示(缩放页面也会出现)
有人说,这个问题不是浏览器的缘故,而是缩放本身的机制导致的: 但是我发现谷歌缩放是没问题的,火狐就有问题 所谓缩放就是针对展示内容的像素进行缩减,当刚好到某一个点时,就会出现边框线消失的问题了 目前的 ...
- php表格列宽拖拽,JavaScript_JQuery拖动表头边框线调整表格列宽效果代码,类似于桌面程序中的表格拖动 - phpStudy...
JQuery拖动表头边框线调整表格列宽效果代码 类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放 ...
- 【threejs】实现星空、星链、太阳系、线等效果的参考
前言 星空其实就是粒子. 星链是一组星星用线连接. 如果要增加指向的箭头,则需要再加上箭头. 一些入门的Threejs项目参考 效果 threejs实现3D星空效果 没实际跑过,无完整项目代码,效果还 ...
- bootstrap~去除input选中时的蓝色边框线
1.去除input边框 .form-control{border:0;webkit-box-shadow:none;box-shadow:none; } 2.去除input选中时的蓝色边框线 .for ...
- vs矩形框边框线显示被选中的区域;_Excel中,重复的数据高亮显示,如何快速删去?...
快速删去重复数据,雷哥在这里提供4种超简单的解决方法,大家一看就会. 为了更加直接明了地说明,雷哥在这里通过具体案例进行讲解. 案例:下图B列日期中,橘黄色部分是我们已经标记好颜色的重复项. 要求:快 ...
- 为WPF和Silverlight的Grid添加边框线(zz)
Grid是WPF和Silverlight中的一个重要的布局元素,其他的布局元素还有StackPanel, Canvas, Border等等.从字面上说,Grid是一个表格的意思,它的使用也确实很方便, ...
- wps怎么把边框加粗_wps怎么把边框线加粗
1.wps文字处理中的表格边框加粗怎么处理 工具原料:电脑.wps软件 wps文字处理中的表格边框加粗的具体操作步骤: 1.首先,打开一个wps文档. 2.打开之后,选中要加粗的表格,如图点击&quo ...
- html table的边框线怎么变圆角_css实现带有四个圆角的table表格 2019年9月6日
CSS制作一张带有四个圆角的表格 示例如下: 实例 星期星期一星期二星期三星期四星期五 上午 8:30~11:50语文数学英语政治历史语文数学英语政治历史语文数学英语政治历史下午 13:50~17:3 ...
- Axure 10 案例:模拟鼠标拖拽画框线的效果
介绍 鼠标拖拽画框线是我们常用的操作.可以通过Axure来完美的模拟鼠标拖拽画框线的效果,当接触到了其他控件的时候,可以通过交互来表示接触状态. 今天,就让我们来学习如何制作它. 预览效果 预览原型 ...
最新文章
- IOS开发 ARC forbids explicit message send of 'autorelease'错误解决办法
- python区块链开发_Fabric区块链Python开发详解
- 真相了!算法工程师的一天
- 疯狂的程序员-第三章
- Python教程:Python基础知识点梳理!
- socket.io c++库编译不成功的注意事项
- [SpringBoot2]@MatrixVariableUrlPathHelper
- Jquery的load加载本地文件出现跨域错误的解决方案
- EXCEL实战技巧与数据分析(一)基础应用
- [生产力]在线免费的EDA工具,可编辑AD\EAGLE等文件
- mac linux 引导分区,Paragon ExtFS For Mac v10.0.829 | Linux分区数据读写驱动 _ 黑苹果乐园...
- (拓扑排序+并查集)HDU - 1811 Rank of Tetris
- linux or msys2设置网络代理
- 多穿立体库系统四向车PLC流程控制
- 梁国辉获Yes评分表系统3.0计算机软件著作权
- 618 都疯了吗?这些书居然都不到半价!
- 永恒之蓝漏洞复现-CVE-2017-0144
- Uber实时大数据系统架构分析-Kafka-Samza-Siddhi
- C语言 学习笔记 存个档而已
- 你知道吗?副业才是普通人翻身最后的机会!
热门文章
- React实现购物车
- VueCLi的安装步骤(第四课)
- 服务器uefi装系统教程,安装UEFI系统教程(完整版)
- 苹果手机时区改不了怎么办_iPhone无法手动修改时间怎么办?关闭这个功能就能解决问题了!...
- OleDbCommand OleDbDataAdapter比较研究素材
- JSP contentType 属性
- qnap 备份linux文件夹,如何将 Qsync 文件夹中的文件备份至其他的 QNAP NAS?
- 氢os android 7.0,一加氢OS用上Android 7.0后 网友惊呼:又快又省电
- 澳大利亚宣布国家区块链路线图并推动政府资助
- 安卓的商品导购app