Giter Club home page Giter Club logo

3d-core-raub's Introduction

Node3D

NPM ESLint Test

npm i -s 3d-core-raub

Node3D

Desktop 3D applications with Node.js and OpenGL.

  • WebGL-like interface. Real OpenGL though.
  • Three.js compatible environment.
  • Use node modules and compiled addons: CUDA, OpenCL, etc.
  • Window control. Multiwindow applications.
  • Read/write files.
  • Crossplatform: Linux x64, Linux ARM, MacOS x64, Windows x64.

Example

Compatibility with three.js allows porting the existing JS code. The real OpenGL backend is used (not ANGLE). So it is possible to use the GL resource IDs to setup interoperation with CUDA or OpenCL. This is the most important feature of this project and why it was created in the first place.

It is quite possible to create a fully-features apps and games using this framework. For example, see Space Simulation Toolkit.

Quick start

  1. Setup the project directory:

    mkdir my-project
    cd my-project
    npm init -y
    npm i -s 3d-core-raub three
    touch index.js
  2. Paste the code and see if it works:

    const three = require('three');
    const { init, addThreeHelpers } = require('3d-core-raub');
    
    const { doc, gl, requestAnimationFrame } = init({ isGles3: true });
    addThreeHelpers(three, gl);
    
    const renderer = new three.WebGLRenderer();
    renderer.setPixelRatio( doc.devicePixelRatio );
    renderer.setSize( doc.innerWidth, doc.innerHeight );
    
    const camera = new three.PerspectiveCamera(70, doc.innerWidth / doc.innerHeight, 1, 1000);
    camera.position.z = 2;
    const scene = new three.Scene();
    
    const geometry = new three.BoxGeometry();
    const material = new three.MeshBasicMaterial({ color: 0xFACE8D });
    const mesh = new three.Mesh( geometry, material );
    scene.add(mesh);
    
    doc.addEventListener('resize', () => {
    	camera.aspect = doc.innerWidth / doc.innerHeight;
    	camera.updateProjectionMatrix();
    	renderer.setSize(doc.innerWidth, doc.innerHeight);
    });
    
    const animate = () => {
    	requestAnimationFrame(animate);
    	const time = Date.now();
    	mesh.rotation.x = time * 0.0005;
    	mesh.rotation.y = time * 0.001;
    	
    	renderer.render(scene, camera);
    };
    
    animate();
  3. See docs and examples: 3d-core-raub.

  4. Take a look at Three.js examples.

Node3D Modules

  1. Dependency - carries one or more precompiled binary and/or C++ headers.

  2. Addon - provides native bindings.

  3. Plugin - a high-level Node3D module for extending the 3d-core features. For example:

    import { init, addThreeHelpers } from '3d-core-raub';
    import { init as initQml } from '3d-qml-raub';
    const __dirname = dirname(fileURLToPath(import.meta.url));
    const {
    	doc, Image: Img, gl, glfw,
    } = init({
    	isGles3: true, isWebGL2: true, mode: 'borderless',
    });
    addThreeHelpers(three, gl);
    const {
    	QmlOverlay, Property, Method, View, loop, release, textureFromId,
    } = initQml({ doc, gl, cwd: __dirname, three });
  4. Other:

Contributing to Node3D

Bugs and enhancements are tracked as GitHub issues. You can also create an issue on a specific repository of Node3D.

Issues

  • Use a clear and descriptive title.
  • Describe the desired enhancement / problem.
  • Provide examples to demonstrate the issue.
  • If the problem involves a crash, provide its trace log.

Pull Requests

  • Do not include issue numbers in the PR title.
  • Commits use the present tense ("Add feature" not "Added feature").
  • Commits use the imperative mood ("Move cursor to..." not "Moves cursor to...").
  • File System
    • Only lowercase in file/directory names.
    • Words are separated with dashes.
    • If there is an empty directory to be kept, place an empty .keep file inside.
    • Use SemVer versioning pattern.

License

Node3D can be used commercially. You don't have to pay for Node3D or any of its third-party libraries.

Node3D modules have their own code licensed under MIT, meaning "I've just put it here, do what you want, have fun". Some modules have separately licensed third-party software in them. For instance, deps-freeimage-raub carries the FreeImage binaries and headers, and those are the property of their respective owners, and are licensed under FIPL terms (but free to use anyway).

All such cases are explained in README.md per project in question.

3d-core-raub's People

Contributors

code-factor avatar pavel-kudinov avatar raub 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

Watchers

 avatar  avatar  avatar  avatar

3d-core-raub's Issues

Help - Pixi.JS

I'm working on game with pixi, based on webgl 2
I can run my project on this environment?
Now I'm using Electron to do this

Need to fix dynamic switch to fullscreen mode

Need to fix dynamic switch to fullscreen mode:

currently both QML GUI & three.js clouds are disapear when switch to fullscreen ( ctrl+f ) and returns on exit from fullscreen ( ctrl+shift+f ).

Three examples not working

Hello Raub!
First of all, thanks for your work, I've been using your package since v1 and its been very helpful. But now I was testing the recent version in order to upgrade my project, but noticed that there might be an issue with the latest threejs port. Not sure. if its an OS specific issue but all my colleagues using OSX have been experiencing the same issue.
Basically we can't get any threejs example to run, only an empty window and I can see some messages in the console

WARNING: 0:2: extension 'GL_OES_standard_derivatives' is not supported
ERROR: 0:134: 'highp' : Reserved word.1: #version 120
--------------------------------------------------------------------------------------------
THREE.WebGLProgram: shader error:  1282 35715 false gl.getProgramInfoLog ERROR: One or more attached shaders not successfully compiled THREE.WebGLShader: gl.getShaderInfoLog() vertex
ERROR: 0:75: 'highp' : Reserved word.1: #version 120
--------------------------------------------------------------------------------------------
THREE.WebGLProgram: shader error:  1282 35715 false gl.getProgramInfoLog ERROR: One or more attached shaders not successfully compiled  THREE.WebGLShader: gl.getShaderInfoLog() fragment
ERROR: 0:123: 'highp' : Reserved word.1: #version 120

Captura de Pantalla 2020-08-14 a la(s) 11 13 56

Captura de Pantalla 2020-08-14 a la(s) 11 13 29

Not sure if this could be related to the example code or maybe the threejs build might have some issues, which would mean that this issue should be added on that repo instead?

Hope you can take a look into this

Thanks and keep up the good work!

/usr/bin/ld: Release/obj.target/glfw/cpp/glfw.o: in function `_init': glfw.cpp:(.text+0x67c0): multiple definition of `_init'; /usr/lib/gcc/x86_64-pc-linux-gnu/7.3.1/../../../../lib/crti.o:(.init+0x0): first defined here

make: Entering directory '/home/spaceboyross/Droid.JS/node_modules/deps-opengl-raub/build'
  ACTION binding_gyp_remove_extras_target_Unnecessary_binaries_removed_ build
  TOUCH Release/obj.target/remove_extras.stamp
make: Leaving directory '/home/spaceboyross/Droid.JS/node_modules/deps-opengl-raub/build'
make: Entering directory '/home/spaceboyross/Droid.JS/node_modules/deps-freeimage-raub/build'
  ACTION binding_gyp_remove_extras_target_Unnecessary_binaries_removed_ build
  TOUCH Release/obj.target/remove_extras.stamp
make: Leaving directory '/home/spaceboyross/Droid.JS/node_modules/deps-freeimage-raub/build'
make: Entering directory '/home/spaceboyross/Droid.JS/node_modules/glfw-raub/build'
  CXX(target) Release/obj.target/glfw/cpp/glfw.o
  SOLINK_MODULE(target) Release/obj.target/glfw.node
/usr/bin/ld: Release/obj.target/glfw/cpp/glfw.o: in function `_init':
glfw.cpp:(.text+0x67c0): multiple definition of `_init'; /usr/lib/gcc/x86_64-pc-linux-gnu/7.3.1/../../../../lib/crti.o:(.init+0x0): first defined here
collect2: error: ld returned 1 exit status
make: *** [glfw.target.mk:140: Release/obj.target/glfw.node] Error 1
make: Leaving directory '/home/spaceboyross/Droid.JS/node_modules/glfw-raub/build'

Question about GUI

Hi, I am quite new to 3D stuff in nodejs and really interested. So since the document createElement is limited to canvas for webgl, how can I create an gui? I am looking for a way on how to write the frames per second to the display and also how to create an user interface. How could I do that? Are there any addons? Thanks for your time :)

switch to fullscreen/borderless mode on second monitor

  • switch to borderless mode on secondary screen - takes window size from primary screen (for example, when secondary screen has 4k resolution and first screen has 2k resolution - borderless window appear on secondary screen but has 2k resolution)

  • switch to fullscreen mode on secondary screen - make window fullscreen on primary screen and secondary screen starts to flicker

Support for Apple ARM macOS devices (e.g. MacBook Air M1)

Error: dlopen(/Users/x/Dev/3d/node_modules/segfault-raub/bin-osx/segfault.node, 1): no suitable image found. Did find:
/Users/x/Dev/3d/node_modules/segfault-raub/bin-osx/segfault.node: mach-o, but wrong architecture

% uname -a
Darwin X-Air.lan 20.4.0 Darwin Kernel Version 20.4.0: Fri Mar 5 01:14:02 PST 2021; root:xnu-7195.101.1~3/RELEASE_ARM64_T8101 arm64

Port to new OS/build from source

I would like to port this library to android using nodejs-mobile(cordova) . But none of the n-api libraries on which this library is dependent -like https://github.com/node-3d/deps-opengl-raub provide instructions for building from source, all download prebuilt libraries. The best thing would be if you yourself port the library to android. If you are not interested in doing so, please provide the docs for building the necessary native libraries from source.

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.