GithubHelp home page GithubHelp logo

x3dom / x3dom Goto Github PK

View Code? Open in Web Editor NEW
812.0 812.0 271.0 1.1 GB

X3DOM. A framework for integrating and manipulating X3D scenes as HTML5/DOM elements.

Home Page: http://x3dom.org

License: Other

JavaScript 13.30% HTML 86.24% CSS 0.43% GLSL 0.02% Batchfile 0.01%

x3dom's Introduction

Welcome to X3DOM

X3DOM is a framework for integrating and manipulating (X)3D scenes as HTML5 DOM elements, which are rendered via WebGL without additional plugins. The open-source system allows defining 3D scene description and runtime behavior declaratively, without any low-level JavaScript or GLSL coding.

Getting Started

Please have a look at the official documentation in order to get started:

https://doc.x3dom.org (or https://x3dom.netlify.com/doc/index.html for doc. development)

https://doc.x3dom.org/tutorials/basics/hello/index.html describes a minimal starter scene.

https://www.x3dom.org/download (or https://x3dom.netlify.com/ for latest development) serves various versions of the x3dom framework.

Need Help?

If you want to use X3DOM and seek help or sharing of knowledge, please use the x3dom-users mailing list or the forums. Beginner questions usually have been asked already and in many cases the mailinglist or forum archives provide quick answers to many questions.

If you decide to post to the mailing list or forum, please include as much info as possible and describe your problem and what you tried already succinctly.

Mailing List

Please use the mailing lists as much as you can. The x3dom-users list is the one you are most likely interested in and the first address for help or questions.

Chat

There is a gitter chat room for realtime, ephemeral interaction if preferred.

Issue Tracker

Please report issues and attach patches here. For general help and questions direct your inquiry to the x3dom-users mailing list or one of the forums.

https://github.com/x3dom/x3dom/issues

Uploading Files to the Issue Tracker The GitHub issue tracker does not allow to upload files. However, there is a service that helps you with sharing files: https://gist.github.com. Just copy and paste your file contents there and then copy the Gist URL into the issues form.

It immensely helps us if you can provide a live web page illustrating your problem. So if you have webspace and can upload and post the URL with your issue, the chances we will have a look at it increase.

Contributing

We encourage you to contribute to X3DOM! If you would like to contribute to X3DOM, you should subscribe to the developers mailing list (x3dom-dev), where the developers of X3DOM discuss the development of the library itself.

You can send pull requests via GitHub. Patches should:

  1. Follow the style of the existing code.
  2. One commit should do exactly one thing.
  3. Commit messages should start with a summary line below 80 characters followed by a blank line, and then the reasoning/analysis for why the change was made (if appropriate).
  4. Commits that fix a bug in a previous commit (which has already been merged) should start with fixup! and then the summary line of the commit it fixes.
  5. Rebase your branch against the upstream’s master. We don’t want to pull redundant merge commits.
  6. Be clear about what license applies to your patch: The files within this repository are under the GPL3 (or later) but, as the original creators, we are still allowed to create non-free derivatives. However, if patches are given to us under GPL then those cannot make it into any non-free derivatives we may later wish to create. So to make it easier for us (and avoid any legal issues) we prefer if patches are released as public domain.

GitHub Workflow

Developing patches should follow this workflow:

  1. Fork on GitHub (click Fork button)
  2. Clone to computer: git clone [email protected]:«github account»/x3dom.git
  3. cd into your repo: cd x3dom
  4. Set up remote upstream: git remote add -f upstream git://github.com/x3dom/x3dom.git
  5. Create a branch for the new feature: git checkout -b my_new_feature
  6. Work on your feature, add and commit as usual

Creating a branch is not strictly necessary, but it makes it easy to delete your branch when the feature has been merged into upstream, diff your branch with the version that actually ended in upstream, and to submit pull requests for multiple features (branches).

  1. Push branch to GitHub: git push origin my_new_feature
  2. Issue pull request: Click Pull Request button on GitHub

Useful Commands

If a lot of changes have happened upstream you can replay your local changes on top of these, this is done with rebase, e.g.:

git fetch upstream
git rebase upstream/master

This will fetch changes and re-apply your commits on top of these.

This is generally better than merge, as it will give a clear picture of which commits are local to your branch. It will also “prune” any of your local commits if the same changes have been applied upstream.

You can use -i with rebase for an “interactive” rebase. This allows you to drop, re-arrange, merge, and reword commits, e.g.:

git rebase -i upstream/master

There's always the x3dom-dev mailinglist.

Build Instructions

  1. Install Node.js
  2. Navigate to your cloned x3dom repository cd ./YOUR_PATH/x3dom
  3. Run npm install
  4. Run npm run build

x3dom's People

Contributors

aarbelaiz avatar andreasplesch avatar astamoulias avatar bhaettasch avatar chrstein avatar coderextreme avatar dasmalle avatar david-zacharias avatar dschie avatar fbrandherm avatar frankbuchholz avatar girier-tsha avatar jamesleesaunders avatar jbehr avatar jcongote avatar kapekost avatar microaaron avatar mlimper avatar mthoener avatar neicke avatar paulmasson avatar rbakker avatar sharian avatar skluge avatar stepasite avatar swapsen avatar tsturm avatar vincentmarchetti avatar xperien avatar yjung avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

x3dom's Issues

Update build system to generate x3dom-core.js

This is a follow up to:

#28

In order to provide a stripped down core version of X3DOM so components can be loaded on the fly, a minimal version needs to be generated. Proposal is to introduce a x3dom-core.js build that then can load component nodes which are distributed as download. We will need to provide a tarball/zip distribution containing all necessary files and a documentation build.

Adding color node to IndexedFaceSet does not work

I want to add a color node dynamically to e.g. to see the distribution of a property. But when I try to add a color node to my IndexedFaceSet nothing seems to happen although Firebug tells me that a new node has been inserted.

You can find a small example here:
dynamic addition of color:
http://gst.balla-club-leipzig.de/web/ex.html
static:
http://gst.balla-club-leipzig.de/web/ex2.html

I also tried to add everything via innerHTML and to create the color node with createElementNS("http://www.x3dom.org/x3dom", "color"), createElementNS("http://www.x3dom.org/x3dom", "x3d:color"), createElementNS("http://www.x3dom.org/x3dom", "x3dom:color") but neither of them worked.

By the way: If I add the whole shape dynamically with the color it works properly (see: http://gst.balla-club-leipzig.de/web/ex3.html ).

Mailing List Thread:
http://sourceforge.net/mailarchive/forum.php?thread_name=8B966F54-8016-4664-96AF-76B4899FF9D9%40web.de&forum_name=x3dom-users

Mobile Rendering

HTC Desire HD doest not render any scenes: The shader does have to much instructions

Todo: Reduce shading from phong to gouraud shading on mobile platforms

Support for jQuery click handler

I would like to catch click events 3D elements with jQuery in this way (AFAIK this is just possible when writing onclick="alert('hello')" directly inside the x3d code...):

x3d

...

indexedTriangleSet id="myShape"

/indexedTriangleSet

...

/x3d

$("#myShape").click(function {
alert("Clicked on IndexTriangleSet");
});

(Sorry: Code fragments are not displayed well here...)

Finger undefined

When using X3DOM with Firefox under Android the 3D camera cannot be manipulated. A message appears:
"Finger undefined"

Customize behaviour on double click

(applies to x3dom 1.1, didn't test the newer ones ...)

The default action on a double click is to change the center or rotation. The output of this operation can screw up the navigation, depending on the scene setup.

At the moment I am disabling double clicks by setting

x3dom.Viewarea.prototype.onDoubleClick=function(x,y) {return;}

manually after loading the x3dom js.

Would be nice if there were some flags to customize the behaviour on double clicks.

Documentation incomplete

Documentation is incomplete at least in the following areas:

  • Source code doucmentation (JSDOC comments)
  • Prose documentation

Build system overhaul

The current build-system is a bit scattered. 2 Makefiles, build.bat and build.py files. Use on system to build them all.

Features:

  • We will need to provide a tarball/zip distribution containing all necessary files and a documentation build.
  • Needs to be fast
  • Ability to run dev server, do deployment, etc. (basically what toplevel Makefile does)
  • Put build scripts and related stuff in ./build/ directory.
  • use dist/ to store the builds in (no check-in, clean will remove this)

Some options:

  • Python (barbones, using it anyway)
  • Make (fastest but windows only with Cygwin)
  • Jake (all JS system)
  • Rake (easy to use, but requires Ruby)

Background groundAngle and groundColor not working

Only skyColor works in a Background node. As soon as groundColor is added the background gets black. Adding groundAngle crashes the scene with the following error:

Uncaught TypeError: Cannot call method 'multiply' of undefined

Is there an example of a working color fading?

Click Events not working with Textures

Click events do not work when an Imagetexture is in the scene. After deleting the ImageTexture? both boxes in the example are clicking.

This is a restriction of the readPixels method since according to the spec and due to severe security issues it is not allowed to retrieve image data from other domains than the own one.
As workaround one must use the "box" pickMode field of the Scene. However, during the picking pass the image textures are not used (though still bound to the object due to performance issues).
Hence, is this perhaps a browser bug or is there any best practice around for this case?

Text node: Text can not be changed using JS

With the current implementation of text node dynamic changes to the text string are not working.

Text works the way that a canvas element is created, the text is drawn there and the canvas is then placed in the scene as a 2D texture. Currently this is only supported during initial rendering of the scene. Updates to the initial value are only possible before the scene is rendered on screen.

Internally Rescale Background Textures to same Size

Background Textures in SkyBox mode are rendered via cube map.
Therefore, alle images must be

  • of same size
  • power of two
  • quadratic (e.g. 512x512)
    For better usability, this must be internally assured if user-given images aren't conformant with this.

Event Systems

Implement a stable event system for the html events (picking, onmouseoever, ...)

<x3d src='foo.x3d > support

Johannes,

The link is http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.1. It particular reference is in the 3rd paragraph above 18.2.2.

"If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI."

There is no roll-over capability if the getting the URI fails.

+--------
| Leonard Daly
| Internet Solutions, eBusiness Specialist http://realism.com/
| LA ACM SIGGRAPH, Electronic Services Chair
| X3D Book: http://x3dGraphics.com
+------------------------------

How many polygons are supported?

How many plogyns are supported or do also work high resolution models with many polygons as fast as small models?
Are just polygons supported or also normals and so on?

View aligned billboard

Hi there,

I had a look at the "Billboard" collectDrawableObjects function and I think in the axisOfRotation = (0 0 0) part the objective is to get a billboard that is screen aligned, right? I tried to change it a bit, maybe it is helpful to you as well. Here it is:

line 4446 in x3dom.js:
obj3d._eyeViewUp = new x3dom.fields.SFVec3f( mat_view_model._10, mat_view_model._11, mat_view_model._12);
obj3d._eyeLook = new x3dom.fields.SFVec3f(mat_view_model._20, mat_view_model._21, mat_view_model._22); // new

line 11039:
this._eyeViewUp = new x3dom.fields.SFVec3f(0, 0, 0);
this._eyeLook = new x3dom.fields.SFVec3f(0, 0, 0); // new

line 11061:
var yAxis = rotMat.multMatrixPnt(new x3dom.fields.SFVec3f(0, 1, 0)).normalize();
var zAxis = rotMat.multMatrixPnt( new x3dom.fields.SFVec3f(0, 0, 1)).normalize(); // new
if (!this._eyeViewUp.equals(new x3dom.fields.SFVec3f(0, 0, 0), x3dom.fields.Eps)) {
var rot2 = x3dom.fields.Quaternion.rotateFromTo( this._eyeLook, zAxis); // new: local z-axis aligned with camera z-axis
var rotatedyAxis = rot2.toMatrix().transpose().multMatrixVec(yAxis); // new: local y-axis rotated by rot2
var rot3 = x3dom.fields.Quaternion.rotateFromTo(this._eyeViewUp, rotatedyAxis); // new: rotated local y-axis aligned with
camera y-axis
rotMat = rot2.toMatrix().transpose().mult(rotMat); // new
rotMat = rot3.toMatrix().transpose().mult(rotMat); // new
}

Best regards

Multitouch

Check the code for Multitouch events coming from Mozilla

Width / height set in percent is not working

When i set the width and height of the x3d node to 100% it does not work. In the debugging console i see that 100% was replaced by 100px. This happens when the x3d node parent is the body node and x3dom.css is loaded.

As soon as i uncomment x3dom.css the x3d window is 100% wide and high.

With x3dom.css and the x3d node inside a 100% wide and high div the height of the x3dom window is set to 100% but not the width.

OrthoViewPoint

I notice that this isn't implemented. Am I correct ?

Is there any plans for it in the future ?

Many thanks in advance.
Best regards.

Renderer does collect every frame

Render traverse goes over whole tree every frame.
To increase the performance only updates should lead to a traverse of the changed subtree.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.