import * as THREE from 'three';
const {
performance,
  document,
	window,
	HTMLCanvasElement,
	requestAnimationFrame,
	cancelAnimationFrame,
core,
	Event,
  Event0
} = THREE .DHTML
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { OrbitControls0 } from 'three/examples/jsm/controls/OrbitControls0.js';
import { ImprovedNoise } from 'three/examples/jsm/math/ImprovedNoise.js';

import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
import WebGL from 'three/examples/jsm/capabilities/WebGL.js';
var requestId
Page({
	onUnload() {
		cancelAnimationFrame(requestId, this.canvas)
		this.worker && this.worker.terminate()
if(this.canvas) this.canvas = null
		setTimeout(() => {
			if (this.renderer instanceof THREE.WebGLRenderer) {
				this.renderer.dispose()
				this.renderer.forceContextLoss()
				this.renderer.context = null
				this.renderer.domElement = null
				this.renderer = null
			}
		}, 10)
	},
  webgl_touch(e){
		const web_e = (window.platform=="devtools"?Event:Event0).fix(e)
		this.canvas.dispatchEvent(web_e)
  },
  onLoad() {
		document.createElementAsync("canvas", "webgl2",this).then(canvas => {
      this.canvas = canvas
      this.body_load(canvas).then()
    })
  },
  async body_load(canvas3d) {


    if ( WebGL.isWebGL2Available() === false ) {

      document.body.appendChild( WebGL.getWebGL2ErrorMessage() );

    }

    let renderer, scene, camera;
    let mesh;

    init();
    animate();

    function init() {

      renderer = new THREE.WebGLRenderer();
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      scene = new THREE.Scene();

      camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
      camera.position.set( 0, 0, 2 );

      new (window.platform=="devtools"?OrbitControls:OrbitControls0)( camera, renderer.domElement );

      // Texture

      const size = 128;
      const data = new Uint8Array( size * size * size );

      let i = 0;
      const perlin = new ImprovedNoise();
      const vector = new THREE.Vector3();

      for ( let z = 0; z < size; z ++ ) {

        for ( let y = 0; y < size; y ++ ) {

          for ( let x = 0; x < size; x ++ ) {

            vector.set( x, y, z ).divideScalar( size );

            const d = perlin.noise( vector.x * 6.5, vector.y * 6.5, vector.z * 6.5 );

            data[ i ++ ] = d * 128 + 128;

          }

        }

      }

      const texture = new THREE.Data3DTexture( data, size, size, size );
      texture.format = THREE.RedFormat;
      texture.minFilter = THREE.LinearFilter;
      texture.magFilter = THREE.LinearFilter;
      texture.unpackAlignment = 1;
      texture.needsUpdate = true;

      // Material

      const vertexShader = /* glsl */`
        in vec3 position;

        uniform mat4 modelMatrix;
        uniform mat4 modelViewMatrix;
        uniform mat4 projectionMatrix;
        uniform vec3 cameraPos;

        out vec3 vOrigin;
        out vec3 vDirection;

        void main() {
          vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

          vOrigin = vec3( inverse( modelMatrix ) * vec4( cameraPos, 1.0 ) ).xyz;
          vDirection = position - vOrigin;

          gl_Position = projectionMatrix * mvPosition;
        }
      `;

      const fragmentShader = /* glsl */`
        precision highp float;
        precision highp sampler3D;

        uniform mat4 modelViewMatrix;
        uniform mat4 projectionMatrix;

        in vec3 vOrigin;
        in vec3 vDirection;

        out vec4 color;

        uniform sampler3D map;

        uniform float threshold;
        uniform float steps;

        vec2 hitBox( vec3 orig, vec3 dir ) {
          const vec3 box_min = vec3( - 0.5 );
          const vec3 box_max = vec3( 0.5 );
          vec3 inv_dir = 1.0 / dir;
          vec3 tmin_tmp = ( box_min - orig ) * inv_dir;
          vec3 tmax_tmp = ( box_max - orig ) * inv_dir;
          vec3 tmin = min( tmin_tmp, tmax_tmp );
          vec3 tmax = max( tmin_tmp, tmax_tmp );
          float t0 = max( tmin.x, max( tmin.y, tmin.z ) );
          float t1 = min( tmax.x, min( tmax.y, tmax.z ) );
          return vec2( t0, t1 );
        }

        float sample1( vec3 p ) {
          return texture( map, p ).r;
        }

        #define epsilon .0001

        vec3 normal( vec3 coord ) {
          if ( coord.x < epsilon ) return vec3( 1.0, 0.0, 0.0 );
          if ( coord.y < epsilon ) return vec3( 0.0, 1.0, 0.0 );
          if ( coord.z < epsilon ) return vec3( 0.0, 0.0, 1.0 );
          if ( coord.x > 1.0 - epsilon ) return vec3( - 1.0, 0.0, 0.0 );
          if ( coord.y > 1.0 - epsilon ) return vec3( 0.0, - 1.0, 0.0 );
          if ( coord.z > 1.0 - epsilon ) return vec3( 0.0, 0.0, - 1.0 );

          float step = 0.01;
          float x = sample1( coord + vec3( - step, 0.0, 0.0 ) ) - sample1( coord + vec3( step, 0.0, 0.0 ) );
          float y = sample1( coord + vec3( 0.0, - step, 0.0 ) ) - sample1( coord + vec3( 0.0, step, 0.0 ) );
          float z = sample1( coord + vec3( 0.0, 0.0, - step ) ) - sample1( coord + vec3( 0.0, 0.0, step ) );

          return normalize( vec3( x, y, z ) );
        }

        void main(){

          vec3 rayDir = normalize( vDirection );
          vec2 bounds = hitBox( vOrigin, rayDir );

          if ( bounds.x > bounds.y ) discard;

          bounds.x = max( bounds.x, 0.0 );

          vec3 p = vOrigin + bounds.x * rayDir;
          vec3 inc = 1.0 / abs( rayDir );
          float delta = min( inc.x, min( inc.y, inc.z ) );
          delta /= steps;

          for ( float t = bounds.x; t < bounds.y; t += delta ) {

            float d = sample1( p + 0.5 );

            if ( d > threshold ) {

              color.rgb = normal( p + 0.5 ) * 0.5 + ( p * 1.5 + 0.25 );
              color.a = 1.;
              break;

            }

            p += rayDir * delta;

          }

          if ( color.a == 0.0 ) discard;

        }
      `;

      const geometry = new THREE.BoxGeometry( 1, 1, 1 );
      const material = new THREE.RawShaderMaterial( {
        glslVersion: THREE.GLSL3,
        uniforms: {
          map: { value: texture },
          cameraPos: { value: new THREE.Vector3() },
          threshold: { value: 0.6 },
          steps: { value: 200 }
        },
        vertexShader,
        fragmentShader,
        side: THREE.BackSide,
      } );

      mesh = new THREE.Mesh( geometry, material );
      scene.add( mesh );

      //

      const parameters = { threshold: 0.6, steps: 200 };

      function update() {

        material.uniforms.threshold.value = parameters.threshold;
        material.uniforms.steps.value = parameters.steps;

      }

      const gui = new GUI();
      gui.add( parameters, 'threshold', 0, 1, 0.01 ).onChange( update );
      gui.add( parameters, 'steps', 0, 300, 1 ).onChange( update );

      window.addEventListener( 'resize', onWindowResize );

    }

    function onWindowResize() {

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function animate() {

      requestId = requestAnimationFrame( animate );

      mesh.material.uniforms.cameraPos.value.copy( camera.position );

      renderer.render( scene, camera );

    }
  },
})