webglFramework/Thirdparty/three.js-master/examples/webgl_test_memory2.html

   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
  15                 </style>
  16         </head>
  17
  18         <body>
  19                 <script type="x-shader/x-fragment" id="fragmentShader">
  20
  21                         void main() {
  22
  23                                 if ( mod ( gl_FragCoord.x, 4.0001 ) < 1.0 || mod ( gl_FragCoord.y, 4.0001 ) < 1.0 )
  24
  25                                         gl_FragColor = vec4( XXX, 1.0 );
  26
  27                                 else
  28
  29                                         gl_FragColor = vec4( 1.0 );
  30
  31                         }
  32
  33                 </script>
  34
  35                 <script type="x-shader/x-vertex" id="vertexShader">
  36
  37                         void main() {
  38
  39                                 vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  40                                 gl_Position = projectionMatrix * mvPosition;
  41
  42                         }
  43
  44                 </script>
  45
  46                 <script src="../build/three.js"></script>
  47
  48                 <script>
  49
  50                         var N = 100;
  51
  52                         var container;
  53
  54                         var camera, scene, renderer;
  55
  56                         var geometry, meshes = [];
  57
  58                         var fragmentShader, vertexShader;
  59
  60                         init();
  61                         setInterval( render, 1000 / 60 );
  62
  63                         function init() {
  64
  65                                 container = document.createElement( 'div' );
  66                                 document.body.appendChild( container );
  67
  68                                 vertexShader = document.getElementById( "vertexShader" ).textContent;
  69                                 fragmentShader = document.getElementById( "fragmentShader" ).textContent;
  70
  71                                 camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
  72                                 camera.position.z = 2000;
  73
  74                                 scene = new THREE.Scene();
  75                                 scene.background = new THREE.Color( 0xffffff );
  76
  77                                 geometry = new THREE.SphereBufferGeometry( 15, 64, 32 );
  78
  79                                 for ( var i = 0; i < N; i ++ ) {
  80
  81                                         var material = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
  82
  83                                         var mesh = new THREE.Mesh( geometry, material );
  84
  85                                         mesh.position.x = ( 0.5 - Math.random() ) * 1000;
  86                                         mesh.position.y = ( 0.5 - Math.random() ) * 1000;
  87                                         mesh.position.z = ( 0.5 - Math.random() ) * 1000;
  88
  89                                         scene.add( mesh );
  90
  91                                         meshes.push( mesh );
  92
  93                                 }
  94
  95                                 renderer = new THREE.WebGLRenderer();
  96                                 renderer.setPixelRatio( window.devicePixelRatio );
  97                                 renderer.setSize( window.innerWidth, window.innerHeight );
  98                                 container.appendChild( renderer.domElement );
  99
 100                         }
 101
 102                         //
 103
 104                         function generateFragmentShader() {
 105
 106                                 return fragmentShader.replace( "XXX", Math.random() + "," + Math.random() + "," + Math.random() );
 107
 108                         }
 109
 110                         //
 111
 112                         function animate() {
 113
 114                                 requestAnimationFrame( animate );
 115
 116                                 render();
 117
 118                         }
 119
 120                         function render() {
 121
 122                                 for ( var i = 0; i < N; i ++ ) {
 123
 124                                         var mesh = meshes[ i ];
 125                                         mesh.material = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: generateFragmentShader() } );
 126
 127                                 }
 128
 129                                 renderer.render( scene, camera );
 130
 131                                 console.log( "before", renderer.info.programs.length );
 132
 133                                 for ( var i = 0; i < N; i ++ ) {
 134
 135                                         var mesh = meshes[ i ];
 136                                         mesh.material.dispose();
 137
 138                                 }
 139
 140                                 console.log( "after", renderer.info.programs.length );
 141
 142                         }
 143
 144                 </script>
 145
 146         </body>
 147 </html>