Can I create a 2D scene in ReactVR? I mean displaying elements on a screen like in normal React, for example, classical web menu which will be always displayed in the same place on screen. Or something like HUD in 3D games.
More context on what you are trying to achieve or what platforms you are targeting would help, but here are a few guidelines:
IN VR
You generally don't want to have permanent overlays or components that move along with the user. This tends to break immersion unless very carefully designed and properly implemented. You can still render 2D elements using the built-in Text, Image, and View components, but you have to be smart about interactions. A common alternative to this approach is fading in a menu/HUD whenever the user looks in a particular direction, e.g. when looking at the ground.
Either way, you will want to take a look at VrHeadModel and the APIs it exposes to query user's Yaw/Pitch/Roll or how to listen for head rotation events.
On WEB & Mobile
For these platforms, you can implement menus/HUDs using the DOM Overlay concept, which renders a traditional 2D surface on top of the 360 scene.
The linked sample shows how to implement what you need in 2D, using plain React, html, css, etc. In this case, it renders a simple overlay with text on it, but you can use it to implement persistent overlays, menus or whatever UI you believe is better consumed in 2D instead of within the 360 scene.
Related
I just started getting familiar with the Leaflet library. I need to figure out how to load large amounts of abstract data into a Leaflet. Not a geo-map.
Let it be a "map" that displays a million digits of Pi in color. It is not so important what it displays. It is important that I have a page that loads some array of bytes in chunks and shows it as colored pixels. Ideally, you need 10x10 chunks. The user goes to the page with the map and sees, for example, 100 chunks, i.e. 10x10 chunks of 10x10 pixels, which represent the PI number. Using the mouse, the user moves left-right and the application requests the pixels not yet loaded from the backend.
Can Leaflet's capabilities solve similar problems? Or plugins written
for Leaflet?
In theory, it seems to me that this is possible. But in practice, all guides and documentation are for working with geo-maps or raster large images.
Your question is a little generic, but I think what you're talking about is making your own GridLayer. This is leaflet's underlying class for creating a tiled grid of any HTML element you can think of. Whether its a <div> with text in it, or a <canvas>, or whatever you like. I'm not sure what exactly you mean by "a page that loads some array of bytes in chunks and shows it as colored pixels", but that sounds like something that can be done by writing to a canvas using putImageData, and then applied to a GridLayer.
I recommend reading the tutorial on extending leaflet - extending layers. Once you understand this, you'll see that leaflet is built to render zoomable, pannable grids of whatever you want. The links that Ivan Sanchez left are great examples of the crazy stuff you can do with GridLayers (formly called L.TileLayer.Canvas in older leaflet versions)
I am teaching myself React Native by building a board game app. I have built all of the logic and UI elements in RN already, but need to be able to display the game board and allow it to change with state. My idea was to build a tilemap with several layers to show the board game background, move spaces, game pieces, and an object layer I can interact with through JavaScript. I was also looking at game engines such as Phaser, but it seems overkill for this as the game and UI is built and just need to show gameboard change with game state. I think a Canvas implementation could work and that what I am pursuing now, also hoping doing a pure JavaScript will help me learn more before using game libraries.
The game is intended to be multi-player and am wondering about how to rotate the board to display the same information to other players from their perspective. I have only seen static views and scrolling map controls, not rotating.
Solutions I have come up with are building a separate tile map for each player and somehow linking their object layers; or some manual parsing through the map array to change what is at 0,0. Is there a simpler way to do this? Am I approaching this correctly?
Thanks for your time!
I'm designing a GUI and want to find a library on the JVM or for javascript that I can use with Clojure or Clojurescript.
The problem:
I need to display 'zoomable' directed acyclic graphs (DAGs). A picture is worth 1000 words, so here is what the interface ought to look like, and how the screen changes under 'zooming':
Specifically, every node can have its own internal graph, with the restriction that each inner graph has the same number of inputs and outputs as the node itself.
My experience with graphics is limited in Javascript and nonexistent in Java, but...
My ideas:
Naively draw the whole graph with all 'inner graphs' already inside the nodes, and fade the inner graphs out for text when the zoom level is sufficiently far away. Use click events to change the zoom to and from this level. I don't think this will behave well when there are several nested inner graphs.
Draw the unzoomed graph and zoom into a node when clicked so that its background fills the screen, then overlay the inner graph. For nested inner graphs do the same trick, maintaining a 'background node' and 'inner graph'.
Is option 2 sensible? If so is there a library (ie graphviz) I can modify to achieve this behaviour? If there isn't a library, what framework (ie JavaFX) should I use?
If you don't care about struggling with Java interop syntax, I can highly recommend FXDiagram:
Selected features:
Modern graphics [based on JavaFX]
Suggestive metaphors
Optimized for usability
Multi-touch gestures
Smooth transitions/animations
Animated auto-layout (based on KIELER and Graphviz)
Animated undo/redo
JSON persistence
SVG export
Xtext/Eclipse integration
Graphical context menu
…and much more
It's open source (and active), written in Xtend and easily integrates models expressed in Xtext-based DSLs.
What is the suggested approach for handling user input and camera controls in XML3D?
Basic interactivity can be added using the DOM tree events, but I'm not sure if that would be enough to provide rotation gizmos (for example).
Does library provides some API to handle user input and camera controls?
I've noticed that there is xml3d toolkit that was developed year ago.
It seem however that this is rather a loose collection of demos rather than a library for handling user input, also there is no decent use documentation for it.
I need to provide basics functionalities like rotation/translation/scaling of models and controlling the camera.
xml3d.js doesn't provide any cameras or gizmos by itself. They're usually application-specific (there are dozens of ways to implement a camera for instance) so it doesn't really make sense to include them as part of the core library. A very basic camera is provided alongside xml3d.js but it's quite limited.
The xml3d-toolkit did include transformation gizmos and various camera controllers but it's not in active development anymore since the creator has moved on to other things. Still, it might be a good place to start, or at least to use as a reference in building your own camera or gizmo.
For example, a simple way to allow the user to change the transformation of a model would be to:
Add an onclick listener to each model that toggles the editing mode
Show 3 buttons somewhere in your UI to let the user switch between editing rotation, translation or scale
Add onmouseup and onmousedown listeners to the <xml3d> element to record click+drag movements
As part of those listeners, convert the change in mouse position to a change in transformation depending on what editing mode the user is in
Apply those transformation changes to the model either by changing its CSS transform, or through the relevant attribute on a <transform> element that's referenced by a <group> around your model.
Exit the editing mode if the user clicks the canvas to deselect the object (rather than a click+drag operation)
To keep it from conflicting with camera interaction you could use the right mouse button for editing, or simply disable the camera while the user is editing a transformation.
A 3D gizmo is a bit trickier because it needs to be drawn over top of the model while still being clickable, currently there is no way to do this. You could use the RenderInterface to draw the gizmo in a second pass after clearing the depth buffer, but this would not be done in the internal object picking pass that's required to find out which object a user has clicked on.
As a workaround, the toolkit library used a second XML3D canvas with a transparent background positioned over the first that intercepted and relayed all mouse events. When an object was selected its transformation was mirrored into the second canvas where the gizmo was drawn. Changes in the gizmo's transformation were then mirrored back to the object in the main canvas.
Have a look at the classes in the toolkit's xml3doverlay and widgets folders.
An advice for people implementing draggable objects with XML3D:
Use ray picking method of XML3D element to get both object and the point of intersection of ray & model ( function getElementByRay).
Change the mouse movements from screen coordinates to world coordinates.
You must scale transform by the relative distance of picked point to camera and camera to projection plane, so the moving object can track your cursor.
I'm planning on building some fancy notebook page tear animation effect with HTML5 Canvas. I'm not new to Javascript, though I'm new to HTML5 Canvas. It doesn't seem complicated at all. After browsing a lot of tutorials, I couldn't figure out was how to get similar functionality like Photoshop's Free Transform Warp. My idea was to paint the complete page, and then, for each animation frame, translate this differently using some kind of warp. Is this possible with a transform method or do I have to write my own method for this? See this screenshot of the warp I'm quickly drew:
You are probably wondering why not paint a custom shape using the Quadratic Curves? Well, I want the grad pattern to be wrapped as well. So I had in mind to paint a plain page, and after that transform it using some kind of warping, warping the grid as wel..