aframevr / aframe Goto Github PK
View Code? Open in Web Editor NEW:a: Web framework for building virtual reality experiences.
Home Page: https://aframe.io/
License: MIT License
:a: Web framework for building virtual reality experiences.
Home Page: https://aframe.io/
License: MIT License
We should generate signed distance fields for crisp font rendering at all magnifications and orientations.
โ vr-components git:(master) npm run build
> @mozvr/[email protected] build /Users/Nicholas/mozilla/vr-components
> mkdir -p build && browserify ./index.js -o build/vr-components.js --debug -s 'vr-components' -t browserify-css
Error: Cannot find module '@mozvr/vr-markup' from '/Users/Nicholas/mozilla/vr-components'
at /Users/Nicholas/mozilla/vr-components/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
at process (/Users/Nicholas/mozilla/vr-components/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
at ondir (/Users/Nicholas/mozilla/vr-components/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
at load (/Users/Nicholas/mozilla/vr-components/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
at onex (/Users/Nicholas/mozilla/vr-components/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
at /Users/Nicholas/mozilla/vr-components/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:95:15)
npm ERR! Darwin 14.5.0
npm ERR! argv "/Users/Nicholas/.nvm/versions/node/v0.12.7/bin/node" "/Users/Nicholas/.nvm/versions/node/v0.12.7/bin/npm" "run" "build"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3
npm ERR! code ELIFECYCLE
npm ERR! @mozvr/[email protected] build: `mkdir -p build && browserify ./index.js -o build/vr-components.js --debug -s 'vr-components' -t browserify-css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @mozvr/[email protected] build script 'mkdir -p build && browserify ./index.js -o build/vr-components.js --debug -s 'vr-components' -t browserify-css'.
npm ERR! This is most likely a problem with the @mozvr/vr-components package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! mkdir -p build && browserify ./index.js -o build/vr-components.js --debug -s 'vr-components' -t browserify-css
npm ERR! You can get their info via:
npm ERR! npm owner ls @mozvr/vr-components
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/Nicholas/mozilla/vr-components/npm-debug.log
Need to figure out a way to do this:
<template>
<p>Hi, my name is ${name}.</p>
</template>
```js
var t = document.querySelector('template');
var newHTML = t.innerHTML.replace('${name}', 'seavan'); // This is equivalent to where we do string replacements for variables.
var d = document.createElement('div');
d.innerHTML = newHTML;
document.body.appendChild(d);
Code in <template>
elements is not supposed to get executed (i.e., is not live). But because the <template>
code has to be parsed to do string replacement.
Enables devs to add images to their scenes.
Feature set is analogous to pre-refactor component. Dev can specify:
By default the color is transparent, so that a PNG with transparency will appear comped against the background. When then user specifies a color value, the image instead appears comped against this color.
While the image is loading, nothing is visible (can look at adding preloaders and/or placeholders in the future).
Enables the dev to add a grid to their scenes.
Dev can specify:
And reuse the same <video>
element. Don't keep injecting new ones into the page. ๐
Enables devs to add models to their scenes.
Can specify:
Most model scales are too large for VR. In the original vr-model
component, the solution was to multiply the user-specified scale with an internal value. This was set to 0.01
. This approach may not be correct, however. We may instead want to evangelize that devs model their scenes in units that work directly with VR's meter scale, without modification (1 to 1).
Can use pre-refactor vr-model
component as one reference: https://github.com/MozVR/vr-components/blob/d455bfbfb60bb048906853f615f5af3431aa5bfb/core/vr-model.js
Enables devs to add cylinders to their scenes.
Dev can specify:
My CC on file with npm changed. I updated with a new card, and npm shows me a success page and says everything's working. But when I go to npm publish
after doing npm login
with the mozvr account, no ๐ฒ.
npm ERR! You need a paid account to perform this action. For more info, visit: https://www.npmjs.com/private-modules (2KB)
Here's a workaround until I hear back from npm support folks:
Simply git pull
both projects and run these two npm link
commands.
Enables devs to create 360ยฐ video players.
Features should be in line with what we had in pre-refactor <vr-video>
and <vr-video360>
components, and with the HTML5 <video>
spec.
Dev can specify:
Please add anything missing from the above. Looking at the <video>
element spec, I'm not sure how important autobuffer
, crossorigin
, and poster
are, for example.
While the image is loading, nothing is visible. Should look at adding preloaders and/or placeholders in the future.
Compenentise VRLoader โ and possibly make it a third-party dependency.
Originally MozVR/vr-markup#138
[email protected] gets compiled 3 seperate times.
[email protected] twice
[email protected] twice
I think there's a way to share/squash deps on semver matches.
Enables devs to add planes to their scenes.
Dev can specify:
Planes render "standing up", that is along the X any Y axes. To lie the plane down, the user must rotate it 90ยฐ.
May want to enable users to add segments also. eg:
Enables devs to add audio to their scenes.
User can specify:
@nickdesaulniers created a component for this under the original architecture. We may be able to re-use some of that logic?
Is dependent on (or related to?) https://github.com/MozVR/vr-markup/issues/255
In the vr-hemispherelight
component, there's only a createdCallback
, not a attributeChangedCallback
.
Enables devs to add cubes to their scenes.
Dev can specify:
Maybe vr-carpet
?
We have core components as well in vr-markup
. What about 'standard' components instead of core?
Same as #40, but for flat videos, so developer should also be able to specify width and height of the video.
MozVR/vr-markup#151 needs to get fixed for this to work correctly (without hacks).
It would be nice to allow the color to be specified via attribute on the vr-text tag.
To aframe
? Probably need to rename vr-markup
to like aframe-core
or something.
Also see MozVR/vr-markup#238.
/cc @jcarpenter
It's almost ready:
https://github.com/mattdesl/budo/tree/next
https://www.npmjs.com/package/budo
I have a very primitive example, but we should take a look at reusing others' previous solutions.
Tried troubleshooting for quite some time but keep experiencing some race condition or something.
<vr-scene>
<vr-box color="green" position="0 2 0" rotation="-45 45 0"></vr-box>
</vr-scene>
<vr-element name="vr-box">
<template>
<vr-object mixin="cube" position="${position}" rotation="${rotation}" material="color: ${color}"></vr-object>
</template>
</vr-element>
results in this composed (rendered) DOM:
<vr-scene>
<vr-box color="green">
<vr-object mixin="cube" position="0 2 0" rotation="-45 45 0" color="green"></vr-object>
</vr-box>
</vr-scene>
<vr-element name="vr-box">
<template>
<vr-object mixin="cube" position="${position}" rotation="${rotation}" material="color: ${color}"></vr-object>
</template>
</vr-element>
with shadow DOM, it could be:
<vr-scene>
<vr-box color="green">
</vr-box>
</vr-scene>
<vr-element name="vr-box">
<template>
<vr-object mixin="cube" position="${position}" rotation="${rotation}" material="color: ${color}"></vr-object>
</template>
</vr-element>
this bug is to toggle the subtree not to use shadow DOM (which requires quite a hefty polyfill for non-Chrome browsers):
<vr-scene>
<vr-box color="green" subtree="false"></vr-box>
</vr-scene>
<vr-element name="vr-box">
<template>
<vr-object mixin="cube" position="${position}" rotation="${rotation}" material="color: ${color}"></vr-object>
</template>
</vr-element>
compared with the following:
<vr-scene>
<vr-box color="green" subtree="true">
<vr-object mixin="cube" position="0 2 0" rotation="-45 45 0" color="green"></vr-object>
</vr-box>
</vr-scene>
<vr-element name="vr-box">
<template>
<vr-object mixin="cube" position="${position}" rotation="${rotation}" material="color: ${color}"></vr-object>
</template>
</vr-element>
ngokevin/aframe-core#237 introduced a new browserify transform for .glsl
files.
Because our browserify build isn't using that transform, stuff breaks:
% npm start /opt/vr-components (master)
> @mozvr/[email protected] start /opt/vr-components
> npm run dev
> @mozvr/[email protected] dev /opt/vr-components
> npm run build && budo index.js:build/vr-components.js --debug -v --port 9000 --onupdate 'semistandard -v $(git ls-files '*.js') | snazzy' -- -s 'vr-components' -t browserify-css | garnish -v
> @mozvr/[email protected] build /opt/vr-components
> mkdir -p build/ && npm run browserify -- --debug -o build/vr-components.js
> @mozvr/[email protected] browserify /opt/vr-components
> browserify ./index.js -s 'vr-components' -t browserify-css "--debug" "-o" "build/vr-components.js"
/opt/vr-markup/src/shaders/pbrFragment.glsl:4
#define PI 3.14159265359
^
ParseError: Unexpected character '#'
Enables devs to simply define an image with src and get a nice result. They can then either use scale or size attributes to adjust as desired.
Currently the defaults are:
var width = this.getAttribute('width', 10);
var height = this.getAttribute('height', 10);
We should wait until the image is loaded, derive the dimensions, create the geometry, then add to the scene.
https://github.com/MozVR/vr-components/blob/d455bf/core/vr-skybox.js#L41-L48
Should somehow pass in the patterns via some attributes on <vr-skybox>
.
So I don't have to manually add some HTML import. I just drop in the vr-components.js
script, and they're magically there.
https://github.com/polymer/vulcanize is probably the best bet (fastest without HTTP/2) for now.
How it works today:
vr-components/examples/_templates/skysphere/vr-skysphere.html
<template is="vr-template" name="vr-skysphere" radius="5000" url="default.jpg">
<vr-object geometry="primitive: sphere; segments: 54; radius: ${radius}" material="url: ${url}"></vr-object>
</template>
vr-components/examples/skysphere/index.html
<vr-skysphere position="0 0 0" url="../_images/panos/city.jpg"></vr-skysphere>
How it should work:
vr-components/examples/_templates/skysphere/vr-skysphere.html
<template is="vr-template" name="vr-skysphere" radius="5000" url="../../skysphere/default.jpg">
<vr-object geometry="primitive: sphere; segments: 54; radius: ${radius}" material="url: ${url}"></vr-object>
</template>
If a url
is passed from <vr-skysphere>
instance, we use that URL relative to the location of the HTML document. That's what we're today, and that's fine.
But if a url
is not passed and we use the default url
defined in the import source, we should resolve those URLs from the location of the HTML import document.
I'm on the fence about making this change because it's kind of weird and inconsistent from a default vs override passed POV, but it is probably a more sane expected default. Perhaps we could accept some type of basepath
attribute that would change the base root path of any URLs used inside the template definition. Thoughts?
false by default. When set to true it inserts the hidden vr-objects
into the DOM. Simulates collapsing / expanding the shadow DOM.
Support this use case:
<vr-bigcubes>
<vr-saturn></vr-saturn>
</vr-bigcubes>
Enables devs to add skies to their scenes.
Dev can specify:
By default the color is transparent, so that a PNG with transparency will appear comped against the background. When then user specifies a color value, the image instead appears comped against this color. The color is also visible while the image is being loaded, or if an image is not specified.
just need to do this:
THREE.ImageUtils.crossOrigin = '';
Moved from https://github.com/MozVR/vr-markup/issues/18 in vr-markup repo.
Enables devs to add skies to their scenes.
Dev can specify:
URL of textures works as follows:
<a-skybox url="images/city/city">
The template then looks inside the directory specified for six images with the city
filename and ending with top
, bottom
, left
, right
, front
, back
, respectively. Am not married to this implementation, but it worked well in the original pre-refactor skybox component.
By default the color is transparent, so that a PNG with transparency will appear comped against the background. When then user specifies a color value, the image instead appears comped against this color. The color is also visible while the image is being loaded, or if an image is not specified.
When I did that getAttribute
patch, I made autoplay
default to false
for <vr-video>
+ <vr-video360>
. The examples should at least be autoplay="true"
instead of just autoplay
. Should fix that.
Enables devs to add cylinders to their scenes.
Dev can specify:
Enables a template dev to not have to define position, rotation and scale manually on their template definitions, reducing code bloat and eliminating a big foot gun for developer error.
Enables users of templates to rely on position, rotation and scale always being available, as fundamentals of our system.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.