CodyJasonBennett/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <style>
      body {
        margin: 0;
      }

      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import * as THREE from 'three'
      import { VRButton } from 'three/examples/jsm/webxr/VRButton.js'
      import { LookingGlassWebXRPolyfill, LookingGlassConfig } from '@lookingglass/webxr'

      const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' })
      renderer.xr.enabled = true
      renderer.setSize(window.innerWidth, window.innerHeight)
      document.body.appendChild(renderer.domElement)

      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight)
      camera.position.set(0, 1.3, 3)

      const config = LookingGlassConfig
      config.tileHeight = 512
      config.numViews = 45
      config.targetY = 0
      config.targetZ = 0
      config.targetDiam = 3
      config.fovy = camera.fov * (Math.PI / 180)
      config.inlineView = 2
      new LookingGlassWebXRPolyfill()

      document.body.appendChild(VRButton.createButton(renderer))

      const scene = new THREE.Scene()

      scene.add(new THREE.GridHelper())
      scene.add(new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshNormalMaterial()))

      renderer.setAnimationLoop(() => {
        // Uncomment this line to reproduce
        renderer.setRenderTarget(null)

        // User-land fix (must be before render)
        const gl = renderer.getContext()
        const session = renderer.xr.getSession()
        gl.bindFramebuffer(gl.FRAMEBUFFER, session?.renderState?.baseLayer?.framebuffer ?? null)

        renderer.render(scene, camera)
      })
    </script>
  </body>
</html>

## package.json
{
  "dependencies": {
    "@lookingglass/webxr": "^0.2.1",
    "three": "^0.145.0",
    "vite": "^3.1.8"
  },
  "scripts": {
    "dev": "vite"
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
	<style>
	body {
	margin: 0;
	}

	canvas {
	display: block;
	}
	</style>
	</head>
	<body>
	<script type="module">
	import * as THREE from 'three'
	import { VRButton } from 'three/examples/jsm/webxr/VRButton.js'
	import { LookingGlassWebXRPolyfill, LookingGlassConfig } from '@lookingglass/webxr'

	const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' })
	renderer.xr.enabled = true
	renderer.setSize(window.innerWidth, window.innerHeight)
	document.body.appendChild(renderer.domElement)

	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight)
	camera.position.set(0, 1.3, 3)

	const config = LookingGlassConfig
	config.tileHeight = 512
	config.numViews = 45
	config.targetY = 0
	config.targetZ = 0
	config.targetDiam = 3
	config.fovy = camera.fov * (Math.PI / 180)
	config.inlineView = 2
	new LookingGlassWebXRPolyfill()

	document.body.appendChild(VRButton.createButton(renderer))

	const scene = new THREE.Scene()

	scene.add(new THREE.GridHelper())
	scene.add(new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshNormalMaterial()))

	renderer.setAnimationLoop(() => {
	// Uncomment this line to reproduce
	renderer.setRenderTarget(null)

	// User-land fix (must be before render)
	const gl = renderer.getContext()
	const session = renderer.xr.getSession()
	gl.bindFramebuffer(gl.FRAMEBUFFER, session?.renderState?.baseLayer?.framebuffer ?? null)

	renderer.render(scene, camera)
	})
	</script>
	</body>
	</html>
	{
	"dependencies": {
	"@lookingglass/webxr": "^0.2.1",
	"three": "^0.145.0",
	"vite": "^3.1.8"
	},
	"scripts": {
	"dev": "vite"
	}
	}