Cube Beat War allows players to cast the magical Kame Hame Ha with their hands. To do this, players must perform specific hand gestures, such as bringing their palms together and then opening them to generate magic, and pushing forward to cast it. The game includes a menu and a scoring system, and consists of eliminating colored cubes that appear randomly. The game uses a gesture detection library that allows players to interact with the menu using the finger pointing gesture, as if it were a laser pointer. The game ends when all the cubes are eliminated. The application uses the Oculus XR plugin and requires Unity 2021.2.5f1 and an Oculus Quest 2 to work.
React Depth 3d Viewer
Pseudo 3D photo viewer from a depth layer for React using pixi.js.
In 3D computer graphics and computer vision, a depth map is an image or image channel that contains information relating to the distance of the surfaces of scene objects from a viewpoint. The depth map applied to a texture as a displacement filter can achieve a 3D effect, other implementations such as Facebook also allow interpolation of the non-visible areas of the texture when moving in 3D.
The pseudo 3D photo viewer for React uses the pixi.js library and the bit displacement technique from a depth layer to create a 3D effect on photos.
Pixi.js is a widely used JavaScript library in the development of 3D games and applications due to its ease of use and optimized performance. The bit displacement technique is used to apply a displacement filter to the photo’s texture, achieving a 3D effect from the information contained in the depth layer.
To apply the displacement filter to the texture, the pixi.js function filters.DisplacementFilter(depthMap, 0) is used. This function takes as parameters the depth map and a displacement on the Z axis, and applies the displacement effect to the texture. In addition, some implementations such as Facebook’s also allow interpolation of the non-visible areas of the texture when moving in 3D, increasing the realism of the pseudo 3D photo viewer.
In summary, the pseudo 3D photo viewer for React is a tool that uses the pixi.js library and the bit displacement technique to create a 3D effect on photos using a depth layer. Thanks to its ease of use and optimized performance, this tool is an excellent option for those who want to add a touch of realism to their photos.
Download on Github.