Git Product home page Git Product logo

shellfu / shadered Goto Github PK

View Code? Open in Web Editor NEW
0.0 3.0 0.0 311 KB

Shader Editor is a web-based application designed for crafting, editing, and visualizing GLSL shaders in real time. This tool facilitates an intuitive development process for graphics programming, offering instant feedback on shader code changes.

License: MIT License

CSS 14.81% HTML 14.68% Go 2.05% JavaScript 59.37% GLSL 9.10%

shadered's Introduction

ShaderEd - WebGL Shader Editor

Welcome to the ShaderEd repository! ShaderEd is an interactive WebGL Shader Editor designed to facilitate the development and testing of shaders in real-time. Emphasizing ease of use and accessibility, ShaderEd supports the advanced GLSL3 shading language, allowing both beginners and seasoned graphics programmers to experiment with shader programming on the web.

ShaderEd

Features

  • GLSL3 Support: ShaderEd fully embraces GLSL3, providing a rich feature set for creating sophisticated shaders.
  • Live Shader Preview: See the results of your shader code changes immediately with a dynamic 3D preview.
  • Advanced Error Handling: Catch and correct shader compilation errors quickly with an integrated error display system.
  • Custom Uniforms: Add, modify, and experiment with custom uniforms easily through a user-friendly UI.
  • Responsive Design: Enjoy a seamless coding experience across different devices thanks to a responsive and intuitive interface.
  • Code Snippets: Jumpstart your shader creation with handy snippets and templates.
  • Theme Customization: Choose between light and dark themes to create your perfect coding environment.
  • Vim Mode Support: For Vim enthusiasts, Vim mode is available to speed up your coding workflow.

Getting Started

Prerequisites

  • Ensure you have a modern web browser that supports WebGL (Chrome, Firefox, Safari, etc.).
  • Familiarity with HTML, CSS, and JavaScript is recommended.

Installation

  1. Clone the ShaderEd repository:
git clone https://github.com/shellfu/shadered.git
  1. Open the project directory:
cd shadered

How to Use

  • Shader Editing: Choose between vertex and fragment shaders in the editor and begin crafting your shader code.
  • Uniform Management: Utilize the Uniforms Panel for adding or updating uniforms in your shader code.
  • 3D Preview Interaction: Manipulate the preview with orbit controls to examine your shader from different angles.
  • Download Your Shader: Use the "save shader" button to download and save your work locally.

Contributing

Your contributions are welcome! If you're looking to add new features, improve existing ones, or fix bugs, please follow these steps:

  1. Fork the repository.
  2. Create a feature branch (git checkout -b feature/YourFeature).
  3. Commit your changes (git commit -am 'Add some YourFeature').
  4. Push to the branch (git push origin feature/YourFeature).
  5. Submit a pull request.

License

ShaderEd is made available under the MIT License. For more information, see the LICENSE file in the repository.

shadered's People

Contributors

shellfu avatar

Watchers

Andrew Hathaway avatar  avatar Dennis Kendrick avatar

shadered's Issues

Implement Persistent Editor State to Prevent Data Loss on Refresh

Problem:

In our current implementation of the AceJS editor within our web application, users are experiencing data loss when they accidentally refresh the page or navigate away. This issue has led to frustration and decreased productivity, as significant amounts of work can be lost in an instant.

Proposed Solution:

I propose implementing a feature to save the editor's state (text content) in the browser's localStorage (or sessionStorage, depending on the desired persistence length). This way, if a user accidentally refreshes their browser or navigates away, we can restore their work when they return to the editor.

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.