通过使用数组实现连续内存,从而提高程序加载速度,
在绘制几十万个三角形的时候让它的帧数也保持在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
相关推荐
它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。 yarn eject 注意:这是单向操作。 eject ...
这是非常强大的和高度优化的性能。 文件 Android演示应用程序 演示: - 聊天消息列表演示 - 水平画廊演示 - 垂直画廊演示 - GridView演示 - PageVew演示 - TreeVew演示 - 与稠粘头演示的TreeView - ...
16.4.2 基本程序流程 279 16.4.3 类型转换 280 16.5 运算符 281 16.6 用户自定义函数 282 16.7 内置函数 284 16.8 小结 286 第17章 顶点着色器入门 287 17.1 顶点声明 288 17.1.1 顶点声明的描述 288 ...
更新:简化微信上墙的程序流程,提高程序运行效率 2016.1.5 更新:修复一些自动更新微信墙的bug 2015.12.30 更新:数据库连接相关内容 2015.12.23 更新:过滤一些字符串的空格,减少误操作的可能性 2015.12.20 更新:...
第9章介绍能够提高ios设备上opengl es 2.0渲染性能的优化策略;第10章讲解了地形和拾取;第11章回顾了3d渲染所需的常见数学运算;第12章涵盖了一个结合地形渲染、天空盒、粒子系统、动画、变化视点、灯光、模型和...
它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。 yarn eject 注意:这是单向操作。 eject ...
• Surface Surface Surface Surface Manager Manager Manager Manager - 对显示子系统的管理,并且为多个应用程序提 供了2D 和3D 图层的无缝融合。 • LibWebCore LibWebCore LibWebCore LibWebCore - 一个最新的 ...
它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。 yarn eject 注意:这是单向操作。 eject ...
它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。 npm run eject 注意:这是单向操作。 ...
7.12 性能优化 7.12.1 测量帧率 7.12.2 android 1.5平台下hero的奇特案例 7.12.3 使opengl es渲染如此慢的原因 7.12.4 移除不必要的状态改变 7.12.5 减小纹理大小意味着需要获取更少的像素 7.12.6 ...
我们的自述文件:pip install -r requirements.txt... 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的
3D模型的加载和渲染(需要改进) 天盒 碰撞 文字渲染 盛开 高动态范围 Undertow PBR / IBL SSAO 普通/视差映射 延迟阴影 2D渲染 着色器带来更多效果 方差阴影贴图 深度缓冲优化 预先计算的大气散射...
它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。 npm run eject 注意:这是单向操作。 ...
它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。yarn eject 注意:这是单向操作。 eject ,您...
10.2.3 跟踪代码运行的流程 302 10.2.4 为内存分配加上一个壳 302 10.3 RELEASE版本的调试 310 10.4 小结 311 第11章 脚本 313 11.1 为什么需要脚本 314 11.2 应该用脚本做些什么 316 11.3 脚本不应该做什么 318 ...
10.2.3 跟踪代码运行的流程 302 10.2.4 为内存分配加上一个壳 302 10.3 RELEASE版本的调试 310 10.4 小结 311 第11章 脚本 313 11.1 为什么需要脚本 314 11.2 应该用脚本做些什么 316 11.3 脚本不应该做什么 318 ...
它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。 yarn eject 注意:这是单向操作。 eject ...
它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。 npm run eject 注意:这是单向操作。 ...
它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。yarn eject 注意:这是单向操作。 eject ,您...
7.12 性能优化 273 7.12.1 测量帧率 273 7.12.2 Android 1.5平台下Hero的 奇特案例 275 7.12.3 使OpenGL ES渲染如此 慢的原因 275 7.12.4 移除不必要的状态 改变 276 7.12.5 减小纹理大小意味着...