Supporting 0 to 1 range colors

This issue has been tracked since 2022-04-10.

When passing colors to shaders, traditionally color channel values are typically given in the range 0 to 1 rather than 0 to 255

Is it possible to hint to tweakpane we want 0 to 1 color values rather than 0 to 255?

cocopon wrote this answer on 2022-05-19

Can you share an example code about this? The core feature of Tweakpane is binding and I'd like to know what kind of parameters you want to bind.

Like this...:

const shader = {
  color: 'rgba(1, 0, 0, 1)',
	...
};

const pane = new Pane();
pane.addInput(shader, 'color');

haxiomic wrote this answer on 2022-05-20

For example, with three.js you might want to do

// material.color is a THREE.Color object, which is a simple object with 3 properties, r, g, b defined between 0 and 1
pane.addInput(material, 'color');

https://threejs.org/docs/#api/en/math/Color.r

A solution might look like

pane.addInput(material, 'color', { channelType: 'float' });

Where the default 0 to 255 would have colorType byte, which is where the 255 / 0xFF comes from – generally as display technologies improve we're slowly moving beyond 32 bit colors

cocopon wrote this answer on 2022-06-12

Thank you for the details. Added float color support in #411:

const params = {foobar: {r: 0, g: 0, b: 0}};

// [0-255]
pane.addInput(params, 'foobar');

// [0-255]
pane.addInput(params, 'foobar', {
  color: {type: 'int'},
});

// [0-1]
pane.addInput(params, 'foobar', {
  color: {type: 'float'},
});

Please wait for the next release.

cocopon wrote this answer on 2022-06-13

Released the latest version 3.1.0.

Your Name

Your Comment

More Details About Repo

Owner Name	cocopon
Repo Name	tweakpane
Full Name	cocopon/tweakpane
Language	TypeScript
Created Date	2016-05-10
Updated Date	2023-03-17
Star Count	2603
Watcher Count	19
Fork Count	71
Issue Count	11

YOU MAY BE INTERESTED

Issue Title	Created Date	Updated Date