Keys: improve rendering, add edges to minor keys (#130).

Author: kosua20

.gitignore

@@ -1,4 +1,5 @@
 build/
+build*/
 .DS_Store
 .thumb
 ext/

resources/shaders/keys.frag

@@ -0,0 +1,42 @@
+#version 330
+
+in INTERFACE {
+	vec2 uv;
+} In ;
+
+#define SETS_COUNT 8
+#define MAJOR_COUNT 75
+
+uniform bool highlightKeys;
+uniform bool horizontalMode = false;
+uniform float notesCount; // (maxNoteMajor - minNoteMajor + 1)
+uniform int actives[128];
+uniform int minNoteMajor;
+uniform vec2 inverseScreenSize;
+uniform vec3 edgeColor = vec3(0.0);
+
+uniform vec3 majorColor[SETS_COUNT];
+
+const int majorIds[MAJOR_COUNT] = int[](0, 2, 4, 5, 7, 9, 11, 12, 14, 16, 17, 19, 21, 23, 24, 26, 28, 29, 31, 33, 35, 36, 38, 40, 41, 43, 45, 47, 48, 50, 52, 53, 55, 57, 59, 60, 62, 64, 65, 67, 69, 71, 72, 74, 76, 77, 79, 81, 83, 84, 86, 88, 89, 91, 93, 95, 96, 98, 100, 101, 103, 105, 107, 108, 110, 112, 113, 115, 117, 119, 120, 122, 124, 125, 127);
+
+out vec4 fragColor;
+
+
+void main(){
+
+	// White keys, and separators.
+	float widthScaling = horizontalMode ? inverseScreenSize.y : inverseScreenSize.x;
+	float majorUvX = fract(In.uv.x * notesCount);
+
+	// Edges on the sides
+	float centerIntensity = 1.0 - step( 1.0 - 2.0 * notesCount * widthScaling, abs(majorUvX * 2.0 - 1.0));
+
+	// If the current major key is active, the majorColor is specific.
+	int majorId = majorIds[clamp(int(In.uv.x * notesCount) + minNoteMajor, 0, 74)];
+	int cidMajor = actives[majorId];
+	vec3 frontColor = (highlightKeys && cidMajor >= 0) ? majorColor[cidMajor] : vec3(1.0);
+
+	// Mix.
+	fragColor.rgb = mix(edgeColor, frontColor, centerIntensity);
+	fragColor.a = 1.0;
+}

resources/shaders/majorKeys.frag

@@ -6,8 +6,8 @@ out INTERFACE {
 	vec2 uv;
 } Out ;
 
-uniform float keyboardHeight = 0.25;
 uniform bool horizontalMode = false;
+uniform float keyboardHeight = 0.25;
 
 vec2 flipIfNeeded(vec2 inPos){
 	return horizontalMode ? vec2(inPos.y, -inPos.x) : inPos;
@@ -16,10 +16,10 @@ vec2 flipIfNeeded(vec2 inPos){
 void main(){
 	// Input are in -0.5,0.5
 	// We directly output the position.
-	// [-0.5, 0.5] to [-1, 2.0*keyboardHeight-1.0]
+	// [-0.5, 0.5] to [-1, -1+2.0*keyboardHeight]
 	float yShift = keyboardHeight * (2.0 * v.y + 1.0) - 1.0;
 
-	vec2 pos2D = vec2(v.x*2.0, yShift);
+	vec2 pos2D = vec2(v.x * 2.0, yShift);
 
 	gl_Position.xy = flipIfNeeded(pos2D);
 	gl_Position.zw = vec2(0.0, 1.0);

resources/shaders/keys.vert resources/shaders/majorKeys.vert

@@ -0,0 +1,58 @@
+#version 330
+
+in INTERFACE {
+	vec2 uv;
+	float id;
+} In ;
+
+#define SETS_COUNT 8
+
+uniform bool highlightKeys;
+uniform bool horizontalMode = false;
+uniform float keyboardHeight = 0.25;
+uniform float notesCount; // (maxNoteMajor - minNoteMajor + 1)
+uniform int minNoteMajor;
+uniform vec2 inverseScreenSize;
+uniform vec3 edgeColor = vec3(0.0);
+
+uniform vec3 minorColor[SETS_COUNT];
+uniform bool edgeOnMinors;
+uniform float minorsHeight = 0.6;
+uniform float minorsWidth = 1.0;
+
+vec2 minorShift(int id){
+	if(id == 1 || id == 6){
+		return vec2(0.0, 0.3);
+	}
+	if(id == 3 || id == 10){
+		return vec2(0.3, 0.0);
+	}
+	return vec2(0.1,0.1);
+}
+
+out vec4 fragColor;
+
+
+void main(){
+
+	// Center uvs
+	vec2 ndc = 2.0 * In.uv - 1.0;
+
+	float widthScaling = horizontalMode ? inverseScreenSize.y : inverseScreenSize.x;
+	float heightScaling = horizontalMode ? inverseScreenSize.x : inverseScreenSize.y;
+	float uvWidth = minorsWidth / float(notesCount) * 0.5;
+	float uvHeight = minorsHeight * keyboardHeight * 0.5;
+
+	// Edges on the sides and bottom.
+	float xStep = step(1.0 - 2.0 * widthScaling / uvWidth, abs(ndc.x));
+	float yStep = step(1.0 - 2.0 * heightScaling / uvHeight, -ndc.y);
+	float centerIntensity = edgeOnMinors ? ((1.0 - xStep) * (1.0 - yStep)) : 1.0;
+
+	// Key color changes when active.
+	int cidMinor = int(In.id);
+	vec3 frontColor = (highlightKeys && cidMinor >= 0) ? minorColor[cidMinor] : edgeColor;
+
+	// Mix
+	fragColor.rgb = mix(edgeColor, frontColor, centerIntensity);
+	fragColor.a = 1.0;
+}

resources/shaders/minorKeys.frag

@@ -0,0 +1,78 @@
+#version 330
+
+layout(location = 0) in vec2 v;
+
+out INTERFACE {
+	vec2 uv;
+	float id;
+} Out ;
+
+uniform bool horizontalMode = false;
+uniform float keyboardHeight = 0.25;
+uniform float notesCount; // (maxNoteMajor - minNoteMajor + 1)
+uniform int actives[128];
+uniform int minNoteMajor;
+
+uniform float minorsHeight = 0.6;
+uniform float minorsWidth = 1.0;
+
+vec2 flipIfNeeded(vec2 inPos){
+	return horizontalMode ? vec2(inPos.y, -inPos.x) : inPos;
+}
+
+#define MINOR_COUNT 53
+
+const int minorIds[MINOR_COUNT] = int[](1, 3, 6, 8, 10, 13, 15, 18, 20, 22, 25, 27, 30, 32, 34, 37, 39, 42, 44, 46, 49, 51, 54, 56, 58, 61, 63, 66, 68, 70, 73, 75, 78, 80, 82, 85, 87, 90, 92, 94,  97, 99,  102, 104, 106, 109, 111, 114, 116, 118, 121, 123, 126);
+
+const int noteDelta[12] = int[](0, 0, 1, 1, 2, 3, 3, 4, 4, 5, 5, 6);
+
+
+float minorShift(int id){
+   if(id == 1 || id == 6){
+	   return -0.1;
+   }
+   if(id == 3 || id == 10){
+	   return 0.1;
+   }
+   return 0.0;
+}
+
+void main(){
+
+	float noteWidth = 2.0 / notesCount;
+	// Size of the note : width, height based on duration and current speed.
+	vec2 noteSize = vec2(0.9 * noteWidth * minorsWidth, 2.0 * minorsHeight * keyboardHeight);
+
+	// Compute note shift.
+	// Horizontal shift based on note id, width of keyboard, and if the note is minor or not.
+	//float a = (1.0/(notesCount-1.0)) * (2.0 - 2.0/notesCount);
+	//float b = -1.0 + 1.0/notesCount;
+	// This should be in -1.0, 1.0.
+	// input: noteId is in [0 MAJOR_COUNT]
+	// we want minNote to -1+1/c, maxNote to 1-1/c
+	float a = 2.0;
+	float b = -notesCount + 1.0 - 2.0 * float(minNoteMajor);
+
+	int minorId = minorIds[gl_InstanceID];
+	int noteId = (minorId/12) * 7 + noteDelta[minorId % 12];
+	float horizLoc = (float(noteId) * a + b + 1.0) / notesCount;
+
+	float vertLoc = 2.0 * (1.0 - minorsHeight) * keyboardHeight - 1.0 + noteSize.y * 0.5;
+	vec2 noteShift = vec2(horizLoc, vertLoc);
+
+	noteShift.x += minorShift(minorId % 12) * noteSize.x;
+
+	// Output position.
+	gl_Position = vec4(flipIfNeeded(noteSize * v + noteShift), 0.0 , 1.0) ;
+
+	// Discard keys that are too close to the screen edges.
+	if(abs(noteShift.x) >= 1.0 - 0.5 * noteWidth){
+		gl_Position = vec4(-40000.0);
+	}
+	
+	// Output the UV coordinates computed from the positions.
+	Out.uv = v.xy + 0.5;
+	// And the active channel if present.
+	Out.id = float(actives[minorId]);
+	
+}

resources/shaders/minorKeys.vert

@@ -38,7 +38,7 @@ int main( int argc, char** argv) {
 	const std::string outputDir = baseDir + "/src/resources/";
 
 	std::vector<std::string> imagesToLoad = { "flash", "font", "particles"};
-	std::vector<std::string> shadersToLoad = { "background", "flashes", "notes", "particles", "particlesblur", "screenquad", "keys", "backgroundtexture", "pedal", "wave", "fxaa"};
+	std::vector<std::string> shadersToLoad = { "background", "flashes", "notes", "particles", "particlesblur", "screenquad", "majorKeys", "minorKeys", "backgroundtexture", "pedal", "wave", "fxaa"};
 
 	// Header file.
 	std::ofstream headerFile(outputDir + "data.h");

src/packager.cpp

@@ -812,7 +812,7 @@ void Renderer::showParticleOptions(){
 
 void Renderer::showKeyboardOptions(){
 	ImGuiPushItemWidth(25);
-	if (ImGui::ColorEdit3("Color##Keys", &_state.background.keysColor[0], ImGuiColorEditFlags_NoInputs)) {
+	if (ImGui::ColorEdit3("Fill Color##Keys", &_state.background.keysColor[0], ImGuiColorEditFlags_NoInputs)) {
 		_score->setColors(_state.background.linesColor, _state.background.textColor, _state.background.keysColor);
 	}
 	ImGui::PopItemWidth();
@@ -827,6 +827,20 @@ void Renderer::showKeyboardOptions(){
 	}
 	ImGui::PopItemWidth();
 
+	ImGuiPushItemWidth(25);
+	if (ImGui::Checkbox("Minor edges##Keys", &_state.keyboard.minorEdges)){
+		_scene->setMinorEdgesAndHeight(_state.keyboard.minorEdges, _state.keyboard.minorHeight);
+	}
+	ImGui::PopItemWidth();
+	ImGuiSameLine(COLUMN_SIZE);
+
+	ImGuiPushItemWidth(100);
+	if(ImGuiSliderPercent("Minor height##Keys", &_state.keyboard.minorHeight, 0.0f, 1.0f)){
+		_state.keyboard.minorHeight = glm::clamp(_state.keyboard.minorHeight, 0.0f, 1.0f);
+		_scene->setMinorEdgesAndHeight(_state.keyboard.minorEdges, _state.keyboard.minorHeight);
+	}
+	ImGui::PopItemWidth();
+
 	ImGui::Checkbox("Highlight keys", &_state.keyboard.highlightKeys);
 
 	if (_state.keyboard.highlightKeys) {
@@ -1388,6 +1402,7 @@ void Renderer::applyAllSettings() {
 	_score->setDisplay(_state.background.digits, _state.background.hLines, _state.background.vLines);
 	_score->setColors(_state.background.linesColor, _state.background.textColor, _state.background.keysColor);
 	_scene->setKeyboardSizeAndFadeout(_state.keyboard.size, _state.notesFadeOut);
+	_scene->setMinorEdgesAndHeight(_state.keyboard.minorEdges, _state.keyboard.minorHeight);
 	_score->setKeyboardSize(_state.keyboard.size);
 	_score->setPlayDirection(_state.reverseScroll);
 

src/rendering/Renderer.cpp

@@ -97,6 +97,7 @@ void State::defineOptions(){
 	_sharedInfos["bg-img-behind-keyboard"] = {"Should the background image extend behind the keyboard", OptionInfos::Type::BOOLEAN};
 	_sharedInfos["keyboard-highlight"] = {"Should the pressed keys be highlighted", OptionInfos::Type::BOOLEAN};
 	_sharedInfos["keyboard-custom-colors"] = {"Override notes color for pressed keys", OptionInfos::Type::BOOLEAN};
+	_sharedInfos["keyboard-minor-edges"] = {"Show edges around minor keys", OptionInfos::Type::BOOLEAN};
 	_sharedInfos["show-score"] = {"Should the score (lines, numbers) be shown", OptionInfos::Type::BOOLEAN};
 	_sharedInfos["show-bg-img"] = {"Use a background texture", OptionInfos::Type::BOOLEAN};
 	_sharedInfos["show-notes"] = {"Should the notes be shown", OptionInfos::Type::BOOLEAN};
@@ -159,7 +160,7 @@ void State::defineOptions(){
 	_sharedInfos["sets-separator-key"].category = OptionInfos::Category::SETS;
 
 	_sharedInfos["keyboard-size"] = {"Vertical size of the keyboard", OptionInfos::Type::FLOAT, {0.0f, 1.0f}};
-
+	_sharedInfos["keyboard-minor-height"] = {"Vertical fraction of the keyboard taken by minor keys", OptionInfos::Type::FLOAT, {0.0f, 1.0f}};
 
 	_sharedInfos["min-key"] = {"Lowest key to display", OptionInfos::Type::KEY, {0.0f, 127.0f}};
 	_sharedInfos["max-key"] = {"Highest key to display", OptionInfos::Type::KEY, {0.0f, 127.0f}};
@@ -241,6 +242,7 @@ void State::updateOptions(){
 	_boolInfos["bg-img-behind-keyboard"] = &background.imageBehindKeyboard;
 	_boolInfos["keyboard-highlight"] = &keyboard.highlightKeys;
 	_boolInfos["keyboard-custom-colors"] = &keyboard.customKeyColors;
+	_boolInfos["keyboard-minor-edges"] = &keyboard.minorEdges;
 	_boolInfos["show-score"] = &showScore;
 	_boolInfos["show-bg-img"] = &background.image;
 	_boolInfos["show-notes"] = &showNotes;
@@ -278,6 +280,7 @@ void State::updateOptions(){
 	_intInfos["sets-mode"] = (int*)&setOptions.mode;
 	_intInfos["sets-separator-key"] = &setOptions.key;
 	_floatInfos["keyboard-size"] = &keyboard.size;
+	_floatInfos["keyboard-minor-height"] = &keyboard.minorHeight;
 
 	_intInfos["min-key"] = &minKey;
 	_intInfos["max-key"] = &maxKey;
@@ -592,8 +595,10 @@ void State::reset(){
 	scrollSpeed = 1.0f;
 	notesFadeOut = 0.0f;
 	keyboard.highlightKeys = true;
+	keyboard.minorEdges = true;
 	keyboard.customKeyColors = false;
 	keyboard.size = 0.25f;
+	keyboard.minorHeight = 0.6f;
 
 	for (int i = 0; i < layersMap.size(); ++i) {
 		layersMap[i] = i;