I can program a flashlight for you! I think that since we live in the age of personalization through AI, it is certainly appropriate that the user should decide in the backend how the frontend should look. That is certainly possible if you have an idea here…
Oh, did I write something about a “plugin”? … on the other hand, why not. We can set up the store so that programs have to meet certain criteria before they are included.
I’m also working on a plugin system for babylon.js, where you can switch functionalities of the application on or off or add new ones on the fly.
So the plugins for the store must have the following format: TypeScript and derived from the “PluginSystem” interface.
I tried to make a fake volumetric light like in this tutorial. Unfortunately, it didn’t quite work out. I still have to tweak it. Fog FallOff Parameter is directing always upwards. It should fade out in the rotated direction.
The idea is to first create a rough light gradient like in Opus No. 2 and then add a blur effect right on top of it. At the moment the region is a rectangle and would have to be adapted to the orientation of the light gradient.
The work (lat. opus) is not quite finished yet. A shadow should still be cast behind the box.
I’m currently working on a box deformer that will allow me to adjust the angle of the volumentric pseudo light rectangle as if it were coming through a vertical window and hitting a floor. of course, you can have something like that calculated. hey, I’m a lazy programmer and I’ve only had my first coffee…
You can either click on the points, lines or areas and get a gizzmo to move them. the save button creates a custommesh and saves it as an object file to be able to use it.
The Babylon.js Timeline Editor is an interactive web application for creating and editing 3D animations. It provides a user-friendly interface to animate 3D objects by defining keyframes and properties over time, similar to professional animation software but accessible through a web browser.
Features
3D Viewport
Real-time 3D rendering using Babylon.js
Interactive camera controls for viewing the animation from any angle
Grid reference for better spatial awareness
High-quality lighting and materials
Timeline Interface
Visual timeline with draggable keyframes
Playhead for precise time navigation
Time display showing current position in seconds
Ability to click anywhere on the timeline to jump to that time
Animation Controls
Play/Stop/Reset buttons for animation playback
Add Keyframe button to capture the current state of the 3D object
Export button to save animations as JSON files
Import button to load previously saved animations
Property Editor
Precise control over object properties at each keyframe
Position (X, Y, Z) controls
Rotation (X, Y, Z) controls
Scaling (X, Y, Z) controls
Real-time updates as properties are changed
Animation System
Automatic interpolation between keyframes
Smooth transitions for position, rotation, and scaling
Loop functionality for continuous playback
Keyframe selection for editing specific points in the animation
Technical Details
Built with modern web technologies (HTML5, CSS3, JavaScript)
Powered by Babylon.js for 3D rendering
Responsive design that works across different screen sizes
JSON-based file format for easy sharing and storage of animations
No server-side dependencies - runs entirely in the browser
Use Cases
Creating animations for games and interactive applications
Prototyping 3D motion for films or presentations
Educational tool for teaching animation principles
Quick visualization of object transformations over time
The Babylon.js Timeline Editor combines the power of a professional animation tool with the accessibility of a web application, making it easy for both beginners and experienced animators to create compelling 3D animations.
In my projects there is a basic tenor: back to the origin or the search for the answer to the question “how did they do that?”
By the way, I had my little timeline project updated. Now it can also do texture transitions! I didn’t see that in the video and maybe you could leave the calculation of the jumps to a AI these days. Ihis would be much more user-friendly, but at the time of video recording, these beasts were not as intelligent as they are today…
There’s a trick: you can create the WebGL context yourself and pass it to both Babylon.js and Three.js, but only one engine is allowed to draw at a time.
Here’s a simple demo of how you can use Babylon.js and Three.js alternately in the same canvas and WebGL context:
Three creates the geometry and exports the scene as a glTF model. Babylon loads the model and renders the scene.
I think that since we live in the age of personalization through AI, it is certainly appropriate that the user should decide in the backend how the frontend should look. That is certainly possible if you have an idea here…
