https://github.com/flo-bit/autostereogram-renderer

real time rendering of an autostereogram using the depth texture of a three.js scene
https://github.com/flo-bit/autostereogram-renderer

3d-rendering autostereogram javascript threejs

Last synced: about 1 month ago
JSON representation

real time rendering of an autostereogram using the depth texture of a three.js scene

• Host: GitHub
• URL: https://github.com/flo-bit/autostereogram-renderer
• Owner: flo-bit
• License: mit
• Created: 2023-01-10T22:52:44.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-12T00:04:07.000Z (over 3 years ago)
• Last Synced: 2026-04-29T21:42:42.067Z (about 2 months ago)
• Topics: 3d-rendering, autostereogram, javascript, threejs
• Language: JavaScript
• Homepage: https://flo-bit.github.io/autostereogram-renderer/
• Size: 123 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# real time autostereogram renderer

This is a simple real time autostereogram renderer written in javascript using three.js

## Demo

[see a demo here](https://flo-bit.github.io/autostereogram-renderer/) (warning: fast moving images)

## Usage

See [minimal-demo.html](https://flo-bit.github.io/autostereogram-renderer/minimal-demo.html) for a working example.

```javascript

// import three.js and autostereogram renderer

import * as THREE from "https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js";

import * as STEREO from "https://flo-bit.github.io/autostereogram-renderer/autostereogram.js";

// create your own three.js renderer, scene and camera and add some objects

var renderer = new THREE.WebGLRenderer();

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

renderer.setPixelRatio(window.devicePixelRatio);

document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(

  75,

  window.innerWidth / window.innerHeight,

  0.1,

  4

);

// create example mesh

let mesh = new THREE.Mesh(

  new THREE.IcosahedronGeometry(2.5, 0),

  new THREE.MeshStandardMaterial()

);

mesh.position.z = -4;

scene.add(mesh);

// create a new autostereogram renderer, pass the three.js renderer, scene and camera

var stereo = new STEREO.AutostereogramRenderer(renderer, camera, scene);

// render the autostereogram

stereo.render();

```

## License

MIT License. See LICENSE file for details.