DOCSEARCHbyAlgolia
Submit Docs

mixbox

repository·master·Indexed 26 days ago

https://github.com/scrtwpns/mixbox

A pigment-based color mixing engine using Kubelka & Munk theory to simulate realistic color blending. It produces saturated gradients and natural secondary colors, making it ideal for digital painting. Supports multiple platforms including C/C++, C#, Java, JavaScript, Python, Rust, Godot, and various shader languages (GLSL, HLSL, Metal) via linear interpolation (lerp) and latent space representations for mixing multiple colors.

Tokens
10.3K
Snippets
36
Records
52
Agent score
83%

What's inside mixbox

  3. Use Mixbox in HLSL Shaders

    master

    To use Mixbox in HLSL, include mixbox.hlsl and bind the mixbox_lut.png texture to a Texture2D with a SamplerState (recommended: FILTER_MIN_MAG_LINEAR_MIP_POINT). If working in linear space, uncomment #define MIXBOX_COLORSPACE_LINEAR. Use MixboxLerp(rgb1, rgb2, t) for basic mixing.

    // uncomment the following line if you work in linear space
// #define MIXBOX_COLORSPACE_LINEAR

Texture2D MixboxLUT; // bind the "mixbox_lut.png" texture here
SamplerState MixboxSampler; // FILTER_MIN_MAG_LINEAR_MIP_POINT

#define MIXBOX_LUT(UV) MixboxLUT.SampleLevel(MixboxSampler, UV, 0)

#include "mixbox.hlsl"

float4 PSMain() : SV_Target
{
    float3 rgb1 = float3(0, 0.129, 0.522); // blue
    float3 rgb2 = float3(0.988, 0.827, 0); // yellow
    float t = 0.5;                         // mixing ratio

    float3 rgb_mix = MixboxLerp(rgb1, rgb2, t);

    return float4(rgb_mix, 1.0);
}

  4. Install Mixbox for Unity via UPM

    master

    To install Mixbox in your Unity project, use the Unity Package Manager (UPM):

    1. Open Window > Package Manager.
    2. Click the + icon.
    3. Select Add package from git URL....
    4. Enter the following URL: https://github.com/scrtwpns/mixbox.git#upm
    https://github.com/scrtwpns/mixbox.git#upm

  5. Install Mixbox for JavaScript

    master

    You can use Mixbox in a web browser or a Node.js environment.

    Browser (Script Tag)

    Include the script directly in your HTML:

    <script src="https://scrtwpns.com/mixbox.js"></script>

    Browser (ES6 Modules)

    Import the ESM version directly from the URL:

    import mixbox from 'https://scrtwpns.com/mixbox.esm.js';

    Node.js

    Install via npm:

    npm install mixbox

    Then import it in your code:

    import mixbox from 'mixbox';
    npm install mixbox

  6. Use Mixbox in OSL Shaders

    master

    To use Mixbox in OSL, include mixbox.osl. Use mixbox_lerp(rgb1, rgb2, t) to perform pigment-based color mixing.

    #include "mixbox.osl"

shader mix(
    color rgb1 = color(0.0, 0.015, 0.235), // blue
    color rgb2 = color(0.973, 0.651, 0.0), // yellow
    float t = 0.5,                         // mixing ratio,
    output color rgb_mix = 0
  )
{
    rgb_mix = mixbox_lerp(rgb1, rgb2, t);
}

  7. Use Mixbox in GLSL Shaders

    master

    To use Mixbox in GLSL, include mixbox.glsl and bind the mixbox_lut.png texture to a sampler2D uniform. If your workflow uses linear color space, uncomment #define MIXBOX_COLORSPACE_LINEAR. Use mixbox_lerp(rgb1, rgb2, t) for two-color mixing or convert colors to mixbox_latent to perform weighted mixing of multiple colors.

    #ifdef GL_ES
precision highp float;
#endif

// uncomment the following line if you work in linear space
// #define MIXBOX_COLORSPACE_LINEAR

uniform sampler2D mixbox_lut; // bind the "mixbox_lut.png" texture here

#include "mixbox.glsl" // paste the contents of mixbox.glsl here

void main(void)
{
    vec3 rgb1 = vec3(0, 0.129, 0.522); // blue
    vec3 rgb2 = vec3(0.988, 0.827, 0); // yellow
    float t = 0.5;                     // mixing ratio

    vec3 rgb = mixbox_lerp(rgb1, rgb2, t);

    gl_FragColor = vec4(rgb, 1.0);
}

  8. Use Mixbox in WebGL shaders

    master

    Mixbox can be used in WebGL by injecting the GLSL code and binding a Look-Up Table (LUT) texture.

    1. Shader Setup: Use mixbox.glsl() to get the required GLSL code and include it in your shader string. Use the mixbox_lerp(rgb1, rgb2, t) function inside your main loop.
    2. Texture Binding: Bind the LUT texture using mixbox.lutTexture(gl) to a sampler2D uniform named mixbox_lut.
    3. Colorspace: If working in linear space, uncomment #define MIXBOX_COLORSPACE_LINEAR in the shader.

    Note: The input rgb vectors to mixbox_lerp should be in the format expected by the shader (e.g., float RGB).

    // 1. Prepare shader
var shader = `
  precision highp float;
  // #define MIXBOX_COLORSPACE_LINEAR
  uniform sampler2D mixbox_lut;
  #include "mixbox.glsl"
  void main(void) {
    vec3 rgb1 = vec3(0, 0.129, 0.522);
    vec3 rgb2 = vec3(0.988, 0.827, 0);
    float t = 0.5;
    vec3 rgb = mixbox_lerp(rgb1, rgb2, t);
    gl_FragColor = vec4(rgb, 1.0);
  }
`;
shader = shader.replace('#include "mixbox.glsl"', mixbox.glsl());

// 2. Bind texture in JS
gl.useProgram(shaderProgram);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, mixbox.lutTexture(gl));
gl.uniform1i(gl.getUniformLocation(shaderProgram, "mixbox_lut"), 0);

  9. Use Mixbox in Godot Shaders

    master

    To use Mixbox in a Godot shader, include the mixbox.gdshaderinc file. You must also provide a mixbox_lut sampler (attach addons/mixbox/mixbox_lut.png to this uniform).

    Note for Godot 3.X users: The #include directive only works in Godot 4. For Godot 3.X, you must manually paste the contents of mixbox.gdshaderinc into your shader code.

    Use mixbox_lerp(color1, color2, t) for simple interpolation.

    shader_type canvas_item;

uniform sampler2D mixbox_lut; // attach "addons/mixbox/mixbox_lut.png" here

uniform vec4 color1 : hint_color = vec4(0.0, 0.129, 0.522, 1.0); // blue
uniform vec4 color2 : hint_color = vec4(0.988, 0.827, 0.0, 1.0); // yellow

#include "addons/mixbox/mixbox.gdshaderinc"

void fragment() {
    COLOR = mixbox_lerp(color1, color2, UV.x);
}

  11. Install Mixbox for various platforms

    master

    Mixbox is available for multiple environments. Choose the installation method corresponding to your project type:

    • Node.js: npm install mixbox
    • Python: pip install pymixbox
    • Rust: Add mixbox = "2.0.0" to your Cargo.toml
    • Java: Add implementation 'com.scrtwpns:mixbox:2.0.0' to your Gradle configuration
    • C# / .NET: Use the NuGet package https://www.nuget.org/packages/Mixbox/2.0.0
    • Unity: Add the package via git URL: git://github.com/scrtwpns/mixbox.git#upm
    • Godot: Copy the godot\addons directory to your project root
    • C / C++: Include mixbox.h and build mixbox.cpp with your project
    • JavaScript (Browser): Include <script src="https://scrtwpns.com/mixbox.js"></script>
    • Shaders: Load mixbox_lut.png as a texture and include the relevant shader code (mixbox.glsl, .hlsl, or .metal) in your shader source.

  12. Install Mixbox for Java via Maven or Gradle

    master

    To use Mixbox in your Java project, add the following dependency to your build configuration. Note that version 2.0.0 is used in these examples.

    ### Maven
```xml
<dependency>
  <groupId>com.scrtwpns</groupId>
  <artifactId>mixbox</artifactId>
  <version>2.0.0</version>
  <type>jar</type>
</dependency>

    Gradle

    implementation 'com.scrtwpns:mixbox:2.0.0' // Groovy
    implementation("com.scrtwpns:mixbox:2.0.0") // Kotlin