I created a mesh decorator! 
You can toggle between mesh with added decoration (and changed layout) and back to origin by removing the decoration.
1 Like
Thanks to modern AI tools, programs can now be created using natural language - faster and easier than ever before. Nevertheless, clear instructions, a certain amount of control and sometimes manual intervention are still required. Programming today is like driving a car with power steering: easier, but not completely automatic.
In this shop, we can provide the first milestones of our developments - working foundations on which others can build directly. Many things are still incomplete and buggy at the beginning of an app, which is why the prices are currently low. But the specified features should work. With each further update, more power will flow into it - better logic, cleaner code, more sophisticated layout - and the price of the subsequent plugins will rise with it.
What do you think? Is such a treasure trove desirable, where people can still help each other?
START
This is the starting signal for the development of such a store by developers for developers “dev-to-dev” or “D2D” for short
I programmed the D2D Store with the help of VSCode and the Augment extension within a few hours! Here is the description and some snapshots. I’m still looking for a free server and we can get started!
OPEN CODE STORE
OPEN CODE STORE is a vibrant, neon-lit marketplace where developers can buy and sell premium plugins. Our platform connects talented developers with users looking for high-quality coding solutions.
What We Offer
- For Sellers: Upload your plugins, set your own prices, and reach a global audience of developers. Track your sales with detailed statistics and receive payments directly through PayPal.
- For Buyers: Discover a wide range of professionally crafted plugins to enhance your projects. Browse, search, and filter to find exactly what you need. After purchase, instantly download your plugins.
Why Choose Us
- Secure Transactions: Integrated PayPal checkout ensures safe payments for both buyers and sellers.
- Quality Assurance: Our rating system helps buyers make informed decisions based on real user experiences.
- Developer-Focused: Built by developers, for developers, with features that matter to the coding community.
Technical Overview of OPEN CODE STORE
Technology Stack
OPEN CODE STORE is built using modern web development technologies and frameworks to ensure performance, scalability, and maintainability.
Frontend
- Framework: Next.js 14 (React framework) with App Router for server-side rendering and optimized client-side navigation
- Styling: Tailwind CSS for utility-first styling, with custom CSS for neon effects
- State Management: React Context API for global state management (auth, cart)
- TypeScript: For type safety and improved developer experience
Backend
- Database: PostgreSQL hosted on Supabase for relational data storage
- Authentication: Supabase Auth with email/password and social login options
- Storage: Supabase Storage for plugin files and images
- API: Supabase REST API and RPC functions for database operations
- Serverless Functions: Next.js API routes for custom backend logic
Payment Processing
- Payment Gateway: PayPal integration for secure checkout
- Transaction Management: Custom implementation for order tracking and fulfillment
DevOps
- Hosting: Vercel for frontend and serverless functions
- Database Hosting: Supabase for PostgreSQL database
- CI/CD: GitHub Actions for continuous integration and deployment
- Monitoring: Vercel Analytics for performance monitoring
Key Libraries
- UI Components: Custom components built with Tailwind CSS
- Form Handling: React Hook Form for form validation and submission
- Data Fetching: SWR for data fetching, caching, and revalidation
- Date Handling: date-fns for date formatting and manipulation
- Charts: Chart.js with React wrapper for sales statistics visualization
Security Features
- Authentication: JWT-based authentication with Supabase
- Authorization: Row-level security in PostgreSQL for data protection
- Input Validation: Server-side and client-side validation for all user inputs
- CSRF Protection: Built-in protection with Next.js API routes
- Secure Headers: Implemented with Helmet middleware
Performance Optimizations
- Image Optimization: Next.js Image component for automatic image optimization
- Code Splitting: Automatic code splitting with Next.js
- Static Generation: Static generation for marketing pages
- Incremental Static Regeneration: For dynamic content with optimal performance
- Edge Caching: Vercel Edge Network for global content delivery
This technology stack allows OPEN CODE STORE to provide a fast, secure, and scalable platform for developers to buy and sell plugins with minimal operational overhead.
Source code will be published on github after completion. You can write me here which features you would like to have in the store.
1 Like
Will be there light (not so dark) user interface?
And what is “Plugin” in the context?
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.
e.g.
The layout would look something like this:
Source Code comming soon…
Looks promising but UI could be seriously improved
It is not so easy to develop a good realistic Babylon flashlight, especially in multiplayer setups with shadows.
Flashlight Controller.
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.
babylon.volumetric.light.zip (7.7 KB)
1 Like
Fake volumetric light Opus No. 2.1 
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.
1 Like
@a.dzhakhangirov the volumetric light should look more foggy like here
A little closer)
volumetric light | Babylon.js Playground
2 Likes
@a.dzhakhangirov yes, we get closer. A box which is used as a volumetric light! Great job!
2 Likes
Pacman unleashed
Press Space to become the first pacman
Strear with a and d, fire with f.
Avoid collision, you will lost points.
The game is won if you kill’em all. as usual…
babylon.pacman_unleashed.zip (17.4 KB)
a little trick
2 Likes
2 Likes
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… 
babylon.box.deformer2.zip (4.2 KB)
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.
Babylon.js Timeline Editor
Overview
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.
babylon.timeline.zip (5.9 KB)
Update with texture transition
babylon.timeline.zip (1.5 MB)
3 Likes