MapEditorJS/vramview.html at master · ArthCarvalho/MapEditorJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>VRAM Viewer</title>
    <!--<link rel="stylesheet" type="text/css" href="node_modules/bulma/css/bulma.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />-->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <!-- Viewport -->
    <div class="vram-container">
      <div class="vram-viewport" id="webgl"></div>
      <div class="vram-toolbar">BOTTOM BAR</div>
    </div>
    <script src="node_modules/three/examples/js/libs/inflate.min.js"></script>
    <script>
      const { ipcRenderer } = require('electron');
      const THREE = require('three');
      require('./loader/PSXJSONLoader');
      var viewport_element = document.getElementById("webgl");
      var positionInfo = viewport_element.getBoundingClientRect();
      var height = positionInfo.height;
      var width = positionInfo.width;

      var scene = new THREE.Scene();
      scene.background = new THREE.Color( 0x808080 ); // UPDATED
      //var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
      var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( width, height );
      document.getElementById("webgl").appendChild( renderer.domElement );
      renderer.outputEncoding = THREE.LinearEncoding;
      renderer.toneMapping = THREE.LinearToneMapping;

      var geometry = new THREE.PlaneGeometry( 1024, 512, 16, 2);
      var material = new THREE.MeshBasicMaterial( {color: 0xFFFFFF, side: THREE.DoubleSide} );


      var vbuffer_canvas = document.createElement('canvas');
      var vbuffer_ctx = vbuffer_canvas.getContext('2d');
      vbuffer_canvas.width = 4096;
      vbuffer_canvas.height = 512;
      vbuffer_ctx.imageSmoothingEnabled = false;
      vbuffer_ctx.fillStyle = '#808080';
      vbuffer_ctx.fillRect(0, 0, vbuffer_canvas.width, vbuffer_canvas.height);
      var vbuffer_texture = new THREE.CanvasTexture(vbuffer_canvas);

      material.map = vbuffer_texture;
      material.flatShading = true;
      var plane = new THREE.Mesh( geometry, material );
      scene.add( plane );

      camera.position.z = 50;

      function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );

      }
      animate();

      window.addEventListener( 'resize', onWindowResize, false );

      function onWindowResize(){
        let positionInfo = viewport_element.getBoundingClientRect();
          //camera.aspect = window.innerWidth / window.innerHeight;
          //camera.updateProjectionMatrix();

          renderer.setSize( positionInfo.width, positionInfo.height );

      }

      ipcRenderer.on('vram-update', (event, data) => {
        console.log(data);
        var clamped = new Uint8ClampedArray( data.data.buffer );
        let vramcontents = new ImageData(clamped, data.width, data.height);
        vbuffer_ctx.putImageData(vramcontents, 0,0);
        vbuffer_texture.needsUpdate = true;
      })


      ipcRenderer.send('request-vram-contents');

    </script>
  </body>
</html>