https://github.com/gftruj/aframe-refraction-system

A system providing a refraction mapped envMap for all registered components. Uses THREE.CubeRefractionMapping.
https://github.com/gftruj/aframe-refraction-system

a-frame component refraction system

Last synced: about 1 month ago
JSON representation

A system providing a refraction mapped envMap for all registered components. Uses THREE.CubeRefractionMapping.

• Host: GitHub
• URL: https://github.com/gftruj/aframe-refraction-system
• Owner: gftruj
• License: mit
• Created: 2017-08-10T14:21:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-05T11:06:58.000Z (over 6 years ago)
• Last Synced: 2024-11-08T05:26:01.324Z (about 2 months ago)
• Topics: a-frame, component, refraction, system
• Language: HTML
• Homepage:
• Size: 6.38 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# aframe-refraction-system

[![Version](https://img.shields.io/npm/v/aframe-refraction-system.svg?style=flat-square)](https://www.npmjs.com/package/aframe-refraction-system)

![low far distance](pics/screan.png)


## Description

The system creates a THREE.cubeCamera, which provides an envMap texture to each registered entity. Uses the THREE.CubeRefractionMapping. The cubeCamera is not attached to the original camera, it just changes position ( explanation in the notes ).

Needs to work almost realtime to look good, still, I didn't experience fps-drops.

Check it out [here](https://cdn.rawgit.com/gftruj/aframe-refraction-system/eef3e0ee/example/index.html) 


### Usage

#### script

attach the script 


``

``


``

#### npm:

`npm install aframe-refraction-system`

set the camera attributes in the system: 


``, 

and the texture tickrate in the component:


 ``

### Attributes

| Property             | Default      | Description                                         |

|----------------------|--------------|-----------------------------------------------------|

| near         		   |      1       | the near clipping distance                          |

| far                  |      200     | The far clipping distance                           |

| resolution           |      256     | Sets the length of the cubeCamera cube's edges      |

| tickrate  		   |      10      | How often should the texture be updated             |

### Some visual examples

If You don't want to check out my fiddle:


If the 'far' attribute is low enough, the camera will only catch close objects:


![low far distance](https://github.com/gftruj/aframe-refraction-system/blob/master/pics/Screenshot%20(282).png)


It does not seem to affect my FPS rate :


![59 FPS](https://github.com/gftruj/aframe-refraction-system/blob/master/pics/Screenshot%20(283).png)


Looks amazing with normal maps:


![basic](https://github.com/gftruj/aframe-refraction-system/blob/master/pics/Screenshot%20(286).png)


### Notes:

 - I do realize that "realtime" is the opposite of "good performance". At least this simple project may be of use to someone willing to expand it

 - I do not attach the cubeCamera to the ``. The cubeCamera scale ( I think its scale, it may be some other issue, making the envMap smaller) gets messed up, so instead of adjusting it I change its position, so the envMap won't look ridiculous. This is a bad idea since its more wasteful then adding one camera to the other, but I'll need to work out the scaling issue.

 I could use the scaling thing to my advantage if I expose it as a variable for people to mess with it.