webgl_test_memory.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js - webgl</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <style>
  8. body {
  9. background:#fff;
  10. padding:0;
  11. margin:0;
  12. overflow:hidden;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <script src="../build/three.min.js"></script>
  18. <script>
  19. var container;
  20. var camera, scene, renderer;
  21. init();
  22. setInterval( render, 1000 / 60 );
  23. function init() {
  24. container = document.createElement( 'div' );
  25. document.body.appendChild( container );
  26. camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
  27. camera.position.z = 200;
  28. scene = new THREE.Scene();
  29. renderer = new THREE.WebGLRenderer();
  30. renderer.setSize( window.innerWidth, window.innerHeight );
  31. container.appendChild( renderer.domElement );
  32. }
  33. function createImage() {
  34. var canvas = document.createElement( 'canvas' );
  35. canvas.width = 256;
  36. canvas.height = 256;
  37. var context = canvas.getContext( '2d' );
  38. context.fillStyle = 'rgb(' + Math.floor( Math.random() * 256 ) + ',' + Math.floor( Math.random() * 256 ) + ',' + Math.floor( Math.random() * 256 ) + ')';
  39. context.fillRect( 0, 0, 256, 256 );
  40. return canvas;
  41. }
  42. //
  43. function animate() {
  44. requestAnimationFrame( animate );
  45. render();
  46. }
  47. function render() {
  48. var geometry = new THREE.SphereGeometry( 50, Math.random() * 64, Math.random() * 32 );
  49. var texture = new THREE.Texture( createImage() );
  50. texture.needsUpdate = true;
  51. var material = new THREE.MeshBasicMaterial( { map: texture, wireframe: true } )
  52. var mesh = new THREE.Mesh( geometry, material );
  53. scene.add( mesh );
  54. renderer.render( scene, camera );
  55. scene.remove( mesh );
  56. //
  57. texture.deallocate();
  58. mesh.deallocate();
  59. mesh.geometry.deallocate();
  60. mesh.material.deallocate();
  61. renderer.deallocateObject( mesh );
  62. renderer.deallocateTexture( texture );
  63. }
  64. </script>
  65. </body>
  66. </html>