BIM模型轻量化-SSAO效果-自然光漫反射阴影

hello，我又来做知识的搬运工了。今天的主题是，如何让模型看起来呈现自然光的漫反射出现的阴影轮廓呢？

首先，推出threejs官方的一个后处理通道效果，先看demo,在轮廓的边缘出现阴影。示例：

three.js examples

源码

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - postprocessing - Screen Space Ambient Occlusion</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"><style>body {background-color: #aaa;}</style></head><body><div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - screen space ambient occlusion<br/></div><script type="module">import * as THREE from '../build/three.module.js';import Stats from './jsm/libs/stats.module.js';import { GUI } from './jsm/libs/dat.gui.module.js';import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';import { SSAOPass } from './jsm/postprocessing/SSAOPass.js';var container, stats;var camera, scene, renderer;var composer;var group;init();animate();function init() {container = document.createElement( 'div' );document.body.appendChild( container );renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 100, 700 );camera.position.z = 500;scene = new THREE.Scene();scene.background = new THREE.Color( 0xaaaaaa );scene.add( new THREE.DirectionalLight() );scene.add( new THREE.HemisphereLight() );group = new THREE.Group();scene.add( group );var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );for ( var i = 0; i < 100; i ++ ) {var material = new THREE.MeshLambertMaterial( {color: Math.random() * 0xffffff} );var mesh = new THREE.Mesh( geometry, material );mesh.position.x = Math.random() * 400 - 200;mesh.position.y = Math.random() * 400 - 200;mesh.position.z = Math.random() * 400 - 200;mesh.rotation.x = Math.random();mesh.rotation.y = Math.random();mesh.rotation.z = Math.random();mesh.scale.setScalar( Math.random() * 10 + 2 );group.add( mesh );}stats = new Stats();container.appendChild( stats.dom );var width = window.innerWidth;var height = window.innerHeight;composer = new EffectComposer( renderer );var ssaoPass = new SSAOPass( scene, camera, width, height );ssaoPass.kernelRadius = 16;composer.addPass( ssaoPass );// Init guivar gui = new GUI();gui.add( ssaoPass, 'output', {'Default': SSAOPass.OUTPUT.Default,'SSAO Only': SSAOPass.OUTPUT.SSAO,'SSAO Only + Blur': SSAOPass.OUTPUT.Blur,'Beauty': SSAOPass.OUTPUT.Beauty,'Depth': SSAOPass.OUTPUT.Depth,'Normal': SSAOPass.OUTPUT.Normal} ).onChange( function ( value ) {ssaoPass.output = parseInt( value );} );gui.add( ssaoPass, 'kernelRadius' ).min( 0 ).max( 32 );gui.add( ssaoPass, 'minDistance' ).min( 0.001 ).max( 0.02 );gui.add( ssaoPass, 'maxDistance' ).min( 0.01 ).max( 0.3 );window.addEventListener( 'resize', onWindowResize, false );}function onWindowResize() {var width = window.innerWidth;var height = window.innerHeight;camera.aspect = width / height;camera.updateProjectionMatrix();renderer.setSize( width, height );composer.setSize( width, height );}function animate() {requestAnimationFrame( animate );stats.begin();render();stats.end();}function render() {var timer = performance.now();group.rotation.x = timer * 0.0002;group.rotation.y = timer * 0.0001;composer.render();}</script></body>
</html>

qmodel在三维模型中打开ssao的效果

不过这特效，应该说得上性价比很低，想把性能做好非常的难，而且很容易重现过多的阴影错乱的情况。慎用。

自研引擎产品试用：

QModel-BIM模型浏览器

BIM模型轻量化-SSAO效果-自然光漫反射阴影相关推荐

bim 模型web页面展示_HTML5/WebGL技术BIM模型轻量化Web浏览解决方案
原标题:HTML5/WebGL技术BIM模型轻量化Web浏览解决方案互联网技术的兴起极大地改变了我们的娱乐.生活和生产方式.尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化,大 ...
BIM研究-基于HTML5/WebGL技术的BIM模型轻量化Web浏览解决方案
内容来源:http://developer.51cto.com/art/201601/504553.htm 根据运维系统的特点,运维人员可能并不熟悉建筑建模软件的使用,同时让运维人员使用建模软件来做运 ...
bim 模型web页面展示_基于HTML5/WebGL技术的BIM模型轻量化Web浏览解决方案
互联网技术的兴起极大得改变了我们的娱乐.生活和生产方式.尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化,大家感受最深刻的可能是游戏.电商.O2O等和我们生活息息相关的行业,但这 ...
Three.js BIM模型轻量化 FPS渲染速率优化多实例渲染[Instance]+顶点合并[Merge]
BIM模型不经过处理,直接加载到Three.js 创建的场景中,很大可能会很使fps帧率下降,原因在于模型的个数太多,有的模型是多材质的话还需要在Three.js中绘制两次,这样会导致drawcall ...
BIMFACE工程师现身说法，带你了解BIM模型轻量化技术细节
伴随着互联网的发展,越来越多的BIM用户希望在Web端直接浏览三维模型.传统的BIM应用程序都基于桌面客户端,且需要较高的计算机配置:高频CPU.大内存.独立显卡.在从桌面端走向Web端.移动端的过程 ...
BIM模型轻量化的方法总结
目录 1 .BIM轻量化方法概述 2.BIM轻量化内容 2.1 构件信息提取 2.2 BIM模型合并 2.3 BIM模型分级
bim webgl 模型轻量化_数字化交付模型轻量化技术研究
研究背景随着BIM应用的越来越深入,无论是在民建领域还是在基建领域,BIM模型越来越精细.越来越大已经成为一种现实与趋势,而建筑业全面推行数字化交付,模型轻量化技术与数据存储技术必将成为其中的关键. ...
cad模型轻量化_BIM模型轻量化到底有啥用？三种解决方案按需挑选！
假如你是一个建筑设计师,你将会接触Archicad,Bentley,Revit,su等: 假如你是一个结构设计师,你将会接触PKPM,Tekla,YJK,Revit等: 假如你是一个机电设计师,你将会 ...
深度学习模型轻量化（下）
深度学习模型轻量化(下) 2.4 蒸馏 2.4.1 蒸馏流程蒸馏本质是student对teacher的拟合,从teacher中汲取养分,学到知识,不仅仅可以用到模型压缩和加速中.蒸馏常见流程如下图所 ...

BIM模型轻量化-SSAO效果-自然光漫反射阴影

BIM模型轻量化-SSAO效果-自然光漫反射阴影相关推荐

最新文章

热门文章