`
18211103738
  • 浏览: 82691 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

3D加载程序的性能优化

阅读更多

通过使用数组实现连续内存,从而提高程序加载速度,

在绘制几十万个三角形的时候让它的帧数也保持在60帧

 

效果:


 

代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Cube</title>
		<style>body{background:#CCCCCC;margin:0;padding:0;}</style>
		<script src="js/three.js"></script>
		<!--<script src="js/three.min.js"></script>-->
	</head>
	<body>
		<script>
			var width = window.innerWidth*98/100;
			var height = window.innerHeight*98/100;
			
			var scene = new THREE.Scene();
			scene.fog = new THREE.Fog(0xcccccc, 2000, 3500);	//雾效(0xcccccc:颜色;2000:近平面;3500:远平面)近平面要大于camera的近平面,远平面要小于camera的远平面
			
			var camera = new THREE.PerspectiveCamera(27, width/height, 1,3500);
			camera.position.z = 2750;	//
			
			scene.add(new THREE.AmbientLight(0x444444));	//添加环境光
			
			var light1 = new THREE.DirectionalLight(0xffffff, 0.5);
			light1.position.set(1, 1, 1);
			scene.add(light1);
			
			var light2 = new THREE.DirectionalLight(0xffffff, 1.5);
			light2.position.set(0, -1, 0);
			scene.add(light2);
			
			var triangles = 160000;
			
			var geometry = new THREE.BufferGeometry();
			geometry.attributes = {
				index:{
					itemSize:1,
					array:new Uint16Array(triangles * 3),		//根据指定长度创建一个无符号的16位整形数组
					numItems:triangles * 3
				},
				position:{
					itemSize:3,
					array:new Float32Array(triangles * 3 * 3),	//一个三角形有三个顶点,一个顶点有x,y,z三个值
					numItems:triangles * 3 * 3
				},
				normal:{
					itemSize:3,
					array:new Float32Array(triangles * 3 * 3),
					numItems:triangles * 3 * 3
				},
				color:{
					itemSize:3,
					array:new Float32Array(triangles * 3 * 3),
					numItems:triangles * 3 * 3
				}
			}
			
			var flag = 65535/3;		//16位的整形最大能表示65535
			
			var indexes = geometry.attributes.index.array;
			for(var i=0; i<indexes.length; i++){
				indexes[i] = i % (flag*3);
			}
			
			geometry.offsets = [];
			var offsets = triangles/flag;
			for(var i=0; i<offsets; i++){
				//console.log(i);
				var offset = {
					start: i*flag*3,
					index: i*flag*3,
					count: Math.min(triangles-(i*flag),flag)*3
				};
				geometry.offsets.push(offset);
			}
			
			var positions = geometry.attributes.position.array;
			var normals = geometry.attributes.normal.array;
			var colors = geometry.attributes.color.array;
			
			var A = new THREE.Vector3();
			var B = new THREE.Vector3();
			var C = new THREE.Vector3();
			
			var CB = new THREE.Vector3();
			var AB = new THREE.Vector3();
			
			var color = new THREE.Color();
			
			var l = 600;	//立方体的边长
			var o = 12;		//三角形大小
			console.log(positions.length);
			for(var i=0; i<positions.length; i+=9){
				var x = Math.random()*l - l/2;
				var y = Math.random()*l - l/2;
				var z = Math.random()*l - l/2;
				
				var Ax = x + (Math.random()*o - o/2);
				var Ay = y + (Math.random()*o - o/2);
				var Az = z + (Math.random()*o - o/2);
				
				var Bx = x + (Math.random()*o - o/2);
				var By = y + (Math.random()*o - o/2);
				var Bz = z + (Math.random()*o - o/2);
				
				var Cx = x + (Math.random()*o - o/2);
				var Cy = y + (Math.random()*o - o/2);
				var Cz = z + (Math.random()*o - o/2);
				
				positions[i] = Ax;
				positions[i+1] = Ay;
				positions[i+2] = Az;
				
				positions[i+3] = Bx;
				positions[i+4] = By;
				positions[i+5] = Bz;
				
				positions[i+6] = Cx;
				positions[i+7] = Cy;
				positions[i+8] = Cz;
				
				A.set(Ax, Ay, Az);
				B.set(Bx, By, Bz);
				C.set(Cx, Cy, Cz);
				
				CB.subVectors(C, B);
				AB.subVectors(A, B);
				CB.cross(AB);
				
				CB.normalize();		//规范化(将法向量的长度规范为1)
				
				var Nx = CB*x;
				var Ny = CB*y;
				var Nz = CB*z;
				
				normals[i] = Nx;
				normals[i + 1] = Ny;
				normals[i + 2] = Nz;
				
				normals[i + 3] = Nx;
				normals[i + 4] = Ny;
				normals[i + 5] = Nz;
				
				normals[i + 6] = Nx;
				normals[i + 7] = Ny;
				normals[i + 8] = Nz;
				
				//颜色用R,G,B来表示,R/G/B每个分量的取值范围是0~1
				var r = x/l + 0.5;
				var g = y/l + 0.5;
				var b = z/l + 0.5;
				//console.log("r: " + r + "\tg: " + g + "\tb: " + b);
				color.setRGB(r, g, b);
				
				color[i] = color.r;
				color[i + 1] = color.g;
				color[i + 2] = color.b
				
				color[i + 3] = color.r;
				color[i + 4] = color.g;
				color[i + 5] = color.b;
				
				color[i + 6] = color.r;
				color[i + 7] = color.g;
				color[i + 8] = color.b;
			}
			
			//geometry.computeBoundingSphere();	//计算边界椭圆
			
			//var material = new THREE.MeshPhongMaterial({color:0xffffff,side:THREE.DoubleSide,vertexColors:THREE.VertexColors});
			var material = new THREE.MeshPhongMaterial( {
				color: 0xaaaaaa, ambient: 0xaaaaaa, specular: 0xffffff, shininess: 250,
				side: THREE.DoubleSide, vertexColors: THREE.VertexColors
			} );
			var mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);
			
			var renderer = new THREE.WebGLRenderer();
			//renderer = new THREE.WebGLRenderer( { antialias: false, clearColor: 0x333333, clearAlpha: 1, alpha: false } );
			renderer.setSize(width, height);
			renderer.setClearColor(scene.fog.color, 1);
			//renderer.gammaInput = true;
			//renderer.gammaOutput = true;
			//renderer.physicallyBasedShading = true;
			document.body.appendChild(renderer.domElement);
			
			function render(){
				mesh.rotation.x += 0.005;
				mesh.rotation.y += 0.005;
				renderer.render(scene, camera);
				requestAnimationFrame(render);
			}
			render();
		</script>
	</body>
</html>

 附注:

笔者当前使用的three.js版本是r56

  • 大小: 47.6 KB
分享到:
评论

相关推荐

    cocos3d加载3Dmax模型Demo

    Cocos3D是Cocos2D-x扩展的一个3D模块,它为游戏开发和交互式应用程序提供了强大的3D图形功能。 首先,了解3DMax是一款广泛使用的3D建模、动画和渲染软件,由Autodesk公司开发。它被用于创建高质量的3D模型,这些...

    WPF动态加载3D模型

    在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现动态加载3D模型。WPF 是Microsoft提供的一种强大的框架,用于...在实际开发中,还要关注性能优化和用户体验,确保模型加载快速、流畅。

    unity性能优化(pdf).rar

    Unity性能优化是游戏开发中的重要环节,特别是在使用Unity3D引擎进行C#编程时,确保游戏运行流畅、资源高效利用是提升用户体验的关键。本PDF文档很可能是针对Unity引擎的性能优化策略进行深入探讨的资料,涵盖了多...

    Direct3D网格模型加载与优化

    本文将深入探讨如何使用Direct3D加载和优化网格模型。 首先,我们要理解网格模型在3D场景中的角色。网格模型是由顶点、边和多边形组成的几何对象,通常以三角形为主,因为它们是最基本的渲染单元,易于处理且计算...

    Java3d MS3D加载器(含源码,模型,加载器)

    7. **性能优化**:为了提高效率,加载器可能还包含一些优化策略,如预计算顶点变形、减少不必要的计算,或者利用Java3D的缓存机制。 8. **用户交互**:最后,开发者可能希望与加载的3D模型进行交互,比如点击检测、...

    3D模型加载(漂亮妹纸)

    总之,3D模型加载是一个涉及文件解析、数据转换、渲染和性能优化等多个环节的复杂过程。实现一个可移植的3D模型加载软件需要对计算机图形学有深入理解,并能灵活运用各种技术解决平台差异和性能问题。

    Direct3D加载外部网格模型

    总之,Direct3D加载外部网格模型是3D编程中的核心任务之一。它涉及文件解析、数据存储、渲染技术等多个方面,需要对Direct3D API有深入的理解。通过学习和实践这个知识点,开发者能够创建更加丰富和动态的3D场景。

    Wpf动态加载Xaml的3D模型文件

    6. **性能优化**:当处理大型3D模型时,可能需要考虑性能问题。可以通过减少顶点数、使用LOD(Level of Detail)技术或预计算光照来优化模型。 总结起来,WPF结合XAML和3D库提供了一种灵活的方式来动态加载和展示3D...

    uniapp微信开发+three.js加载3d模型

    1. **性能优化**:减少不必要的渲染,优化模型的多边形数量,使用LOD(Level of Detail)技术,根据距离动态调整模型细节。 2. **内存管理**:在不再需要模型时,记得卸载和清除资源,防止内存泄漏。 3. **兼容性**...

    3dmax曲线优化点插件

    优化后的曲线不仅可以加快3D场景的加载速度,还可以减轻计算负担,提高工作效率。 在3DMax中,曲线是由多个控制点构成的,每个控制点都决定了曲线的一部分形状。当曲线过于复杂时,过多的控制点可能导致计算效率...

    【uni-app】只支持在微信小程序运行的 导入外部3d模型

    5. **优化性能**:考虑到移动设备的性能限制,可能需要对模型进行优化,如降低多边形数量、压缩纹理等,以确保流畅的运行。 6. **调试与测试**:在微信开发者工具中进行调试和预览,确保模型在不同设备上的表现一致...

    Android系统下的3D模型应用优化.pdf

    Android系统下的3D模型应用优化是指在Android平台上运行的三维模型应用程序如何优化其性能和效率,以提供更好的用户体验。以下是相关的知识点: 一、3D模型优化技术 在Android系统下,3D模型优化技术是指通过各种...

    pv3d加载,DAE文件,贴图

    6. **pv3D加载流程**: - 解析DAE文件:使用XML解析器读取文件,提取模型数据。 - 构建3D对象:根据解析结果创建pv3D的几何对象、材质和纹理。 - 添加到场景:将3D对象添加到场景中,设置合适的相机位置和光照...

    android使用jpct加载三维模型

    8. **性能优化**: 移动设备的硬件资源有限,因此需要考虑优化,如使用LOD(细节级别)降低复杂度,预加载模型以减少加载时间,或者使用纹理 atlasing 减少纹理切换。 9. **错误处理和兼容性测试**: 考虑到Android...

    化工园区三维模型gltf、obj、3dmax格式资源,threejs对gltf加载只需要2秒

    在本资源包中,gltf模型能在two.js上快速加载,这表明该库优化了gltf的解析和渲染流程,提升了用户体验。 总结来说,这个资源包为化工园区的3D建模和展示提供了多样的选择,无论是gltf的高效加载,还是obj和3dmax的...

    WPF利用HelixToolkit后台导入3D模型

    在实际项目中,可能还需要处理错误、优化性能,或者支持其他3D文件格式。Helix Toolkit库提供了对其他格式(如`.stl`、`.3ds`)的支持,只需相应地替换加载器即可。此外,还可以利用`MaterialGroup`和`MeshGeometry...

    WPF 3d模型优化

    本篇文章将深入探讨如何对WPF 3D模型进行优化,以确保在显示大量模型时,应用程序仍然保持流畅且不卡顿。 **1. 模型合并** 模型合并是优化大量3D模型的关键策略之一。通过将多个模型组合成一个单一的3D对象,可以...

    UniFBX 2.3.1 动态加载FBX的Unity3d插件

    总之,UniFBX 2.3.1插件为Unity3D开发者提供了一种高效、灵活的动态加载FBX模型的解决方案,帮助我们更好地管理和优化3D资源,提升游戏的性能和玩家体验。在开发过程中,熟练掌握AssetBundle和UniFBX的使用,无疑会...

    一个java 3d 小程序

    9. **优化技巧**:学习如何优化3D性能,例如使用`Leaf`优化、减少渲染细节等。 这个Java 3D小程序是学习3D图形编程的好起点,特别是对于Java开发者而言。通过实践,你可以逐步掌握3D图形学的基本原理和Java 3D库的...

    导入3dmax模型的VC++程序

    在这个过程中,你可能会遇到一些挑战,如文件格式的不一致性、内存管理、性能优化等。因此,理解3ds格式的细节和熟悉图形编程是非常重要的。此外,你还可以考虑使用现有的3D库,如Assimp或Open Asset Import Library...

Global site tag (gtag.js) - Google Analytics