├── LICENSE
├── README.md
├── dist
├── aframe-raytrace-component.js
└── aframe-raytrace-component.min.js
├── examples
└── basic
│ └── index.html
├── index.html
├── index.js
└── package.json
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2017 Andrew Fraticelli <andrew.fraticelli@gmail.com>
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## aframe-raytrace-component
2 |
3 | [](https://npmjs.org/package/aframe-raytrace-component)
4 | [](https://npmjs.org/package/aframe-raytrace-component)
5 |
6 | An [A-Frame](https://aframe.io) component for placing raytraced surfaces in a scene.
7 |
8 | Click here to view demo
9 |
10 | 
11 |
12 | ### API
13 |
14 | | Property | Description | Default Value |
15 | | -------- | ----------- | ------------- |
16 | | shader | ID of a shader in a script tag. | (none) |
17 | | transparent | Whether the result of the shader is alpha blended with what's behind it. | false |
18 | | backside | Whether the shader is drawn on the frontfaces or the backfaces of the mesh. | false |
19 |
20 | ### Installation
21 |
22 | #### Browser
23 |
24 | Install and use by directly including the [browser files](dist):
25 |
26 | ```html
27 |
28 | My A-Frame Scene
29 |
30 |
31 |
32 |
33 |
34 |
35 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | ```
52 |
53 |
54 | Or with [angle](https://npmjs.com/package/angle/), you can install the proper
55 | version of the component straight into your HTML file, respective to your
56 | version of A-Frame:
57 |
58 | ```sh
59 | angle install aframe-raytrace-component
60 | ```
61 |
62 | #### npm
63 |
64 | Install via npm:
65 |
66 | ```bash
67 | npm install aframe-raytrace-component
68 | ```
69 |
70 | Then require and use.
71 |
72 | ```js
73 | require('aframe');
74 | require('aframe-raytrace-component');
75 | ```
76 |
--------------------------------------------------------------------------------
/dist/aframe-raytrace-component.js:
--------------------------------------------------------------------------------
1 | /******/ (function(modules) { // webpackBootstrap
2 | /******/ // The module cache
3 | /******/ var installedModules = {};
4 |
5 | /******/ // The require function
6 | /******/ function __webpack_require__(moduleId) {
7 |
8 | /******/ // Check if module is in cache
9 | /******/ if(installedModules[moduleId])
10 | /******/ return installedModules[moduleId].exports;
11 |
12 | /******/ // Create a new module (and put it into the cache)
13 | /******/ var module = installedModules[moduleId] = {
14 | /******/ exports: {},
15 | /******/ id: moduleId,
16 | /******/ loaded: false
17 | /******/ };
18 |
19 | /******/ // Execute the module function
20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 |
22 | /******/ // Flag the module as loaded
23 | /******/ module.loaded = true;
24 |
25 | /******/ // Return the exports of the module
26 | /******/ return module.exports;
27 | /******/ }
28 |
29 |
30 | /******/ // expose the modules object (__webpack_modules__)
31 | /******/ __webpack_require__.m = modules;
32 |
33 | /******/ // expose the module cache
34 | /******/ __webpack_require__.c = installedModules;
35 |
36 | /******/ // __webpack_public_path__
37 | /******/ __webpack_require__.p = "";
38 |
39 | /******/ // Load entry module and return exports
40 | /******/ return __webpack_require__(0);
41 | /******/ })
42 | /************************************************************************/
43 | /******/ ([
44 | /* 0 */
45 | /***/ (function(module, exports) {
46 |
47 | if (typeof AFRAME === 'undefined') {
48 | throw new Error('Component attempted to register before AFRAME was available.');
49 | }
50 |
51 | AFRAME.registerComponent('raytrace', {
52 |
53 | schema: {
54 | shader:{type:'selector'},
55 | transparent:{type:'boolean',default:false},
56 | backside:{type:'boolean',default:false}
57 | },
58 |
59 | init: function () {
60 |
61 | this.myMesh = this.el.getObject3D('mesh');
62 | this.myShaderMaterial = new THREE.ShaderMaterial({
63 |
64 | vertexShader:
65 | "precision mediump float;\n"+
66 | "varying vec3 localSurfacePos;\n"+
67 | "void main() {\n"+
68 | "gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);\n"+
69 | "localSurfacePos = position;\n"+
70 | "}",
71 |
72 | uniforms:{
73 | time:{value:0},
74 | localCameraPos:{value:new THREE.Vector3(0,0,0)}
75 | },
76 |
77 | });
78 | this.myMesh.material = this.myShaderMaterial;
79 |
80 | var self = this;
81 | this.myMesh.onBeforeRender = function(renderer,scene,camera,geometry,material,group){
82 |
83 | self.myShaderMaterial.uniforms.localCameraPos.value.setFromMatrixPosition(camera.matrixWorld);
84 | self.myMesh.worldToLocal(self.myShaderMaterial.uniforms.localCameraPos.value);
85 |
86 | };
87 |
88 | },
89 | remove:function(){
90 | this.myMesh.onBeforeRender = null;
91 | },
92 | update: function (oldData) {
93 | this.myShaderMaterial.fragmentShader = this.data.shader.textContent;
94 | this.myShaderMaterial.side = this.data.backside?THREE.BackSide:THREE.FrontSide;
95 | this.myShaderMaterial.transparent = this.data.transparent;
96 | },
97 | tick: function(time,timeDelta){
98 | this.myShaderMaterial.uniforms.time.value = time;
99 | }
100 | });
101 |
102 |
103 | /***/ })
104 | /******/ ]);
--------------------------------------------------------------------------------
/dist/aframe-raytrace-component.min.js:
--------------------------------------------------------------------------------
1 | !function(e){function a(r){if(t[r])return t[r].exports;var i=t[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,a),i.loaded=!0,i.exports}var t={};return a.m=e,a.c=t,a.p="",a(0)}([function(e,a){if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");AFRAME.registerComponent("raytrace",{schema:{shader:{type:"selector"},transparent:{type:"boolean",default:!1},backside:{type:"boolean",default:!1}},init:function(){this.myMesh=this.el.getObject3D("mesh"),this.myShaderMaterial=new THREE.ShaderMaterial({vertexShader:"precision mediump float;\nvarying vec3 localSurfacePos;\nvoid main() {\ngl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);\nlocalSurfacePos = position;\n}",uniforms:{time:{value:0},localCameraPos:{value:new THREE.Vector3(0,0,0)}}}),this.myMesh.material=this.myShaderMaterial;var e=this;this.myMesh.onBeforeRender=function(a,t,r,i,o,n){e.myShaderMaterial.uniforms.localCameraPos.value.setFromMatrixPosition(r.matrixWorld),e.myMesh.worldToLocal(e.myShaderMaterial.uniforms.localCameraPos.value)}},remove:function(){this.myMesh.onBeforeRender=null},update:function(e){this.myShaderMaterial.fragmentShader=this.data.shader.textContent,this.myShaderMaterial.side=this.data.backside?THREE.BackSide:THREE.FrontSide,this.myShaderMaterial.transparent=this.data.transparent},tick:function(e,a){this.myShaderMaterial.uniforms.time.value=e}})}]);
--------------------------------------------------------------------------------
/examples/basic/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | A-Frame Raytrace Component - Basic
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
119 |
120 |
121 |
122 |
475 |
476 |
547 |
548 |
549 |
550 |
551 |
552 |
553 |
554 | 
555 | 
556 |
557 |
558 |
559 |
560 |
561 |
562 |
563 |
564 |
565 |
566 |
567 |
568 |
569 |
570 |
571 |
572 |
573 |
574 |
575 |
576 |
577 |
578 |
579 |
580 |
581 |
582 |
583 |
584 |
585 |
586 |
589 |
590 |
48 |
49 |
50 | A-Frame Raytrace Component
51 |
52 |
53 | -
54 |
55 |
Basic
56 | This is a basic example.
57 |
58 |
59 |
60 |
61 |
62 |
65 |
66 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | if (typeof AFRAME === 'undefined') {
2 | throw new Error('Component attempted to register before AFRAME was available.');
3 | }
4 |
5 | AFRAME.registerComponent('raytrace', {
6 |
7 | schema: {
8 | shader:{type:'selector'},
9 | transparent:{type:'boolean',default:false},
10 | backside:{type:'boolean',default:false}
11 | },
12 |
13 | init: function () {
14 |
15 | this.myMesh = this.el.getObject3D('mesh');
16 | this.myShaderMaterial = new THREE.ShaderMaterial({
17 |
18 | vertexShader:
19 | "precision mediump float;\n"+
20 | "varying vec3 localSurfacePos;\n"+
21 | "void main() {\n"+
22 | "gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);\n"+
23 | "localSurfacePos = position;\n"+
24 | "}",
25 |
26 | uniforms:{
27 | time:{value:0},
28 | localCameraPos:{value:new THREE.Vector3(0,0,0)}
29 | },
30 |
31 | });
32 | this.myMesh.material = this.myShaderMaterial;
33 |
34 | var self = this;
35 | this.myMesh.onBeforeRender = function(renderer,scene,camera,geometry,material,group){
36 |
37 | self.myShaderMaterial.uniforms.localCameraPos.value.setFromMatrixPosition(camera.matrixWorld);
38 | self.myMesh.worldToLocal(self.myShaderMaterial.uniforms.localCameraPos.value);
39 |
40 | };
41 |
42 | },
43 | remove:function(){
44 | this.myMesh.onBeforeRender = null;
45 | },
46 | update: function (oldData) {
47 | this.myShaderMaterial.fragmentShader = this.data.shader.textContent;
48 | this.myShaderMaterial.side = this.data.backside?THREE.BackSide:THREE.FrontSide;
49 | this.myShaderMaterial.transparent = this.data.transparent;
50 | },
51 | tick: function(time,timeDelta){
52 | this.myShaderMaterial.uniforms.time.value = time;
53 | }
54 | });
55 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "aframe-raytrace-component",
3 | "version": "1.1.2",
4 | "description": "An A-Frame component for placing raytraced surfaces in a scene.",
5 | "main": "index.js",
6 | "cdn": "dist/aframe-raytrace-component.min.js",
7 | "scripts": {
8 | "dev": "budo index.js:dist/aframe-raytrace-component.min.js --port 7000 --live --open",
9 | "dist": "webpack index.js dist/aframe-raytrace-component.js && webpack -p index.js dist/aframe-raytrace-component.min.js",
10 | "lint": "semistandard -v | snazzy",
11 | "prepublish": "npm run dist",
12 | "ghpages": "ghpages",
13 | "start": "npm run dev",
14 | "test": "karma start ./tests/karma.conf.js",
15 | "test:firefox": "karma start ./tests/karma.conf.js --browsers Firefox",
16 | "test:chrome": "karma start ./tests/karma.conf.js --browsers Chrome"
17 | },
18 | "repository": {
19 | "type": "git",
20 | "url": "git+https://github.com/omgitsraven/aframe-raytrace-component.git"
21 | },
22 | "keywords": [
23 | "aframe",
24 | "aframe-component",
25 | "aframe-vr",
26 | "vr",
27 | "mozvr",
28 | "webvr",
29 | "raytrace"
30 | ],
31 | "author": "Hazel Fraticelli ",
32 | "license": "MIT",
33 | "bugs": {
34 | "url": "https://github.com/omgitsraven/aframe-raytrace-component/issues"
35 | },
36 | "homepage": "https://github.com/omgitsraven/aframe-raytrace-component#readme",
37 | "devDependencies": {
38 | "aframe": "*",
39 | "browserify": "^13.0.0",
40 | "budo": "^8.2.2",
41 | "chai": "^3.4.1",
42 | "chai-shallow-deep-equal": "^1.3.0",
43 | "ghpages": "^0.0.8",
44 | "karma": "^0.13.15",
45 | "karma-browserify": "^4.4.2",
46 | "karma-chai-shallow-deep-equal": "0.0.4",
47 | "karma-chrome-launcher": "2.0.0",
48 | "karma-env-preprocessor": "^0.1.1",
49 | "karma-firefox-launcher": "^0.1.7",
50 | "karma-mocha": "^0.2.1",
51 | "karma-mocha-reporter": "^1.1.3",
52 | "karma-sinon-chai": "^1.1.0",
53 | "mocha": "^2.3.4",
54 | "randomcolor": "^0.4.4",
55 | "semistandard": "^8.0.0",
56 | "shelljs": "^0.7.0",
57 | "sinon": "^1.17.5",
58 | "sinon-chai": "^2.8.0",
59 | "shx": "^0.1.1",
60 | "snazzy": "^4.0.0",
61 | "webpack": "^1.13.0"
62 | },
63 | "semistandard": {
64 | "globals": [
65 | "AFRAME",
66 | "THREE"
67 | ],
68 | "ignore": [
69 | "examples/build.js",
70 | "dist/**"
71 | ]
72 | }
73 | }
74 |
--------------------------------------------------------------------------------