Skip to content

Instantly share code, notes, and snippets.

@AdaRoseCannon
Last active June 1, 2022 19:33
Show Gist options
  • Save AdaRoseCannon/f6b96e4ea44c0201bc72879da62e633a to your computer and use it in GitHub Desktop.
Save AdaRoseCannon/f6b96e4ea44c0201bc72879da62e633a to your computer and use it in GitHub Desktop.
Run this on an AFRAME scene to export it as an equirectangular image.
/* eslint no-var:0 */
/* global AFRAME */
'use strict';
// Now out of date, use:
AFRAME.scenes[0].components.screenshot.capture()
// OLD METHOD BELOW:
(function() {
var vS = 'void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);}';
var fS = '\nuniform samplerCube cubemapTexture;\nuniform vec2 resolution;\n\nvoid main( void )\n{\n vec2 texCoord = gl_FragCoord.xy / resolution;\n vec2 thetaphi = ((texCoord * 2.0) - vec2(1.0)) * vec2(3.1415926535897932384626433832795, 1.5707963267948966192313216916398);\n vec3 rayDirection = vec3(cos(thetaphi.y) * cos(thetaphi.x), sin(thetaphi.y), cos(thetaphi.y) * sin(thetaphi.x));\n gl_FragColor = textureCube(cubemapTexture, rayDirection);\n}\n ';
var width = 4096;
var height = 2048;
var sceneEl = document.querySelector('a-scene');
var scene = sceneEl.object3D;
var camScale = 0.15;
var cubeCamera = new AFRAME.THREE.CubeCamera(0.01, 100000, height);
if (window.renderOrigin) {
cubeCamera.position.copy(window.renderOrigin);
} else {
cubeCamera.position.copy(sceneEl.camera.getWorldPosition());
}
scene.add(cubeCamera);
var renderer = sceneEl.renderer;
cubeCamera.updateCubeMap(renderer, scene);
var material = new AFRAME.THREE.ShaderMaterial({
uniforms: {
cubemapTexture: cubeCamera.renderTarget.texture ,
resolution: { value: new AFRAME.THREE.Vector2(width, -height) },
},
vertexShader: vS,
fragmentShader: fS
});
window.material = material;
window.cubeCamera = cubeCamera;
var orthoCamera = new AFRAME.THREE.OrthographicCamera(0.5 * camScale * width / -height, 0.5 * camScale * width / height, camScale * 0.5, camScale * -0.5, 0.1, 100);
sceneEl.camera.add(orthoCamera);
renderer.render(scene, orthoCamera);
var plane = new AFRAME.THREE.Mesh(new AFRAME.THREE.PlaneGeometry(camScale * width / height, camScale * 1), material);
orthoCamera.add(plane);
plane.position.set(0, 0, -1);
var chromeMaterial = new AFRAME.THREE.MeshLambertMaterial({ color: 0xffffff, envMap: cubeCamera.renderTarget });
plane.material = chromeMaterial;
setTimeout(function () {
plane.material = material;
var old = renderer.getSize();
renderer.setSize(width, height);
renderer.render(scene, orthoCamera);
window.open(renderer.domElement.toDataURL());
renderer.setSize(old.width, old.height);
sceneEl.camera.remove(orthoCamera);
}, 100);
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment