react-native-shine 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/module/components/Content.js +56 -36
- package/lib/module/components/Content.js.map +1 -1
- package/lib/module/components/ShineGroup.js +16 -8
- package/lib/module/components/ShineGroup.js.map +1 -1
- package/lib/module/config/debugMode.js +1 -0
- package/lib/module/config/debugMode.js.map +1 -1
- package/lib/module/enums/colorHighlightPresets.js +24 -0
- package/lib/module/enums/colorHighlightPresets.js.map +1 -0
- package/lib/module/enums/effectPresets.js +16 -0
- package/lib/module/enums/effectPresets.js.map +1 -0
- package/lib/module/enums/waveCallback.js +2 -1
- package/lib/module/enums/waveCallback.js.map +1 -1
- package/lib/module/index.js +2 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/shaders/bindGroupLayouts.js +21 -16
- package/lib/module/shaders/bindGroupLayouts.js.map +1 -1
- package/lib/module/shaders/bindGroupUtils.js +16 -7
- package/lib/module/shaders/bindGroupUtils.js.map +1 -1
- package/lib/module/shaders/fragmentShaders/baseTextureFragment.js +28 -0
- package/lib/module/shaders/fragmentShaders/baseTextureFragment.js.map +1 -0
- package/lib/module/shaders/fragmentShaders/colorMaskFragment.js +56 -39
- package/lib/module/shaders/fragmentShaders/colorMaskFragment.js.map +1 -1
- package/lib/module/shaders/fragmentShaders/glareFragment.js +13 -11
- package/lib/module/shaders/fragmentShaders/glareFragment.js.map +1 -1
- package/lib/module/shaders/fragmentShaders/holoFragment.js +13 -4
- package/lib/module/shaders/fragmentShaders/holoFragment.js.map +1 -1
- package/lib/module/shaders/fragmentShaders/maskFragment.js +1 -0
- package/lib/module/shaders/fragmentShaders/maskFragment.js.map +1 -1
- package/lib/module/shaders/fragmentShaders/reverseHoloFragment.js +13 -8
- package/lib/module/shaders/fragmentShaders/reverseHoloFragment.js.map +1 -1
- package/lib/module/shaders/resourceManagement/textures.js.map +1 -1
- package/lib/module/shaders/tgpuUtils.js +49 -29
- package/lib/module/shaders/tgpuUtils.js.map +1 -1
- package/lib/module/shaders/vertexShaders/mainRotationEffectVertex.js +1 -0
- package/lib/module/shaders/vertexShaders/mainRotationEffectVertex.js.map +1 -1
- package/lib/module/shaders/vertexShaders/mainVertex.js +1 -0
- package/lib/module/shaders/vertexShaders/mainVertex.js.map +1 -1
- package/lib/module/types/size.js +2 -0
- package/lib/module/types/typeUtils.js +100 -51
- package/lib/module/types/typeUtils.js.map +1 -1
- package/lib/module/types/vector.js +2 -0
- package/lib/module/utils/vector.js +6 -6
- package/lib/typescript/src/components/Content.d.ts +11 -8
- package/lib/typescript/src/components/Content.d.ts.map +1 -1
- package/lib/typescript/src/components/ShineGroup.d.ts +1 -1
- package/lib/typescript/src/components/ShineGroup.d.ts.map +1 -1
- package/lib/typescript/src/config/debugMode.d.ts +1 -0
- package/lib/typescript/src/config/debugMode.d.ts.map +1 -1
- package/lib/typescript/src/enums/colorHighlightPresets.d.ts +12 -0
- package/lib/typescript/src/enums/colorHighlightPresets.d.ts.map +1 -0
- package/lib/typescript/src/enums/effectPresets.d.ts +14 -0
- package/lib/typescript/src/enums/effectPresets.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +2 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/shaders/bindGroupLayouts.d.ts +90 -51
- package/lib/typescript/src/shaders/bindGroupLayouts.d.ts.map +1 -1
- package/lib/typescript/src/shaders/bindGroupUtils.d.ts +41 -46
- package/lib/typescript/src/shaders/bindGroupUtils.d.ts.map +1 -1
- package/lib/typescript/src/shaders/fragmentShaders/baseTextureFragment.d.ts +5 -0
- package/lib/typescript/src/shaders/fragmentShaders/baseTextureFragment.d.ts.map +1 -0
- package/lib/typescript/src/shaders/fragmentShaders/colorMaskFragment.d.ts.map +1 -1
- package/lib/typescript/src/shaders/fragmentShaders/glareFragment.d.ts.map +1 -1
- package/lib/typescript/src/shaders/fragmentShaders/holoFragment.d.ts.map +1 -1
- package/lib/typescript/src/shaders/fragmentShaders/reverseHoloFragment.d.ts.map +1 -1
- package/lib/typescript/src/shaders/resourceManagement/textures.d.ts +3 -3
- package/lib/typescript/src/shaders/resourceManagement/textures.d.ts.map +1 -1
- package/lib/typescript/src/shaders/tgpuUtils.d.ts.map +1 -1
- package/lib/typescript/src/types/typeUtils.d.ts +33 -3
- package/lib/typescript/src/types/typeUtils.d.ts.map +1 -1
- package/lib/typescript/src/types/types.d.ts +32 -4
- package/lib/typescript/src/types/types.d.ts.map +1 -1
- package/package.json +5 -4
- package/src/components/Content.tsx +92 -47
- package/src/components/ShineGroup.tsx +16 -8
- package/src/config/debugMode.ts +1 -0
- package/src/enums/colorHighlightPresets.ts +33 -0
- package/src/enums/effectPresets.ts +11 -0
- package/src/enums/waveCallback.ts +1 -1
- package/src/index.tsx +2 -0
- package/src/shaders/bindGroupLayouts.ts +27 -10
- package/src/shaders/bindGroupUtils.ts +19 -26
- package/src/shaders/fragmentShaders/baseTextureFragment.ts +18 -0
- package/src/shaders/fragmentShaders/colorMaskFragment.ts +70 -42
- package/src/shaders/fragmentShaders/glareFragment.ts +10 -8
- package/src/shaders/fragmentShaders/holoFragment.ts +9 -3
- package/src/shaders/fragmentShaders/reverseHoloFragment.ts +12 -7
- package/src/shaders/resourceManagement/textures.ts +3 -3
- package/src/shaders/tgpuUtils.ts +41 -46
- package/src/types/typeUtils.ts +102 -56
- package/src/types/types.ts +37 -4
package/src/types/typeUtils.ts
CHANGED
|
@@ -10,83 +10,127 @@ import type {
|
|
|
10
10
|
} from './types';
|
|
11
11
|
import { div } from 'typegpu/std';
|
|
12
12
|
import { WAVE_CALLBACKS } from '../enums/waveCallback';
|
|
13
|
+
import { colorMaskDebug } from '../config/debugMode';
|
|
14
|
+
import { COLOR_MASK_MAX_COUNT } from '../shaders/bindGroupLayouts';
|
|
13
15
|
|
|
14
16
|
export const createGlareOptions = (
|
|
15
17
|
options: Partial<GlareOptions>
|
|
16
18
|
): GlareOptions => {
|
|
17
|
-
const {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
hueShiftAngleMin,
|
|
21
|
-
hueBlendPower,
|
|
22
|
-
lightIntensity,
|
|
23
|
-
glareIntensity,
|
|
24
|
-
} = options;
|
|
19
|
+
const { glowPower, glareColor, lightIntensity, glareIntensity } = options;
|
|
20
|
+
const { hueBlendPower, hueShiftAngleMax, hueShiftAngleMin } =
|
|
21
|
+
glareColor || {};
|
|
25
22
|
|
|
26
23
|
const glareOp = {
|
|
27
24
|
glowPower: glowPower ?? 1.0,
|
|
28
|
-
hueShiftAngleMax: hueShiftAngleMax ?? 1.0,
|
|
29
|
-
hueShiftAngleMin: hueShiftAngleMin ?? 0.0,
|
|
30
|
-
hueBlendPower: hueBlendPower ?? 1.0,
|
|
31
25
|
lightIntensity: lightIntensity ?? 1.0,
|
|
32
26
|
glareIntensity: glareIntensity ?? 1.0,
|
|
27
|
+
glareColor: {
|
|
28
|
+
hueShiftAngleMax: hueShiftAngleMax ?? 1.0,
|
|
29
|
+
hueShiftAngleMin: hueShiftAngleMin ?? 0.0,
|
|
30
|
+
hueBlendPower: hueBlendPower ?? 1.0,
|
|
31
|
+
},
|
|
33
32
|
};
|
|
34
33
|
|
|
35
34
|
return glareOp;
|
|
36
35
|
};
|
|
37
36
|
|
|
38
|
-
export const
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
37
|
+
export const glareOptionsToTyped = (glareOptions: GlareOptions) => {
|
|
38
|
+
return {
|
|
39
|
+
glowPower: f32(glareOptions.glowPower),
|
|
40
|
+
lightIntensity: f32(glareOptions.lightIntensity),
|
|
41
|
+
glareIntensity: f32(glareOptions.glareIntensity),
|
|
42
|
+
glareColor: {
|
|
43
|
+
hueShiftAngleMax: f32(glareOptions.glareColor.hueShiftAngleMax),
|
|
44
|
+
hueShiftAngleMin: f32(glareOptions.glareColor.hueShiftAngleMin),
|
|
45
|
+
hueBlendPower: f32(glareOptions.glareColor.hueBlendPower),
|
|
46
|
+
},
|
|
47
|
+
};
|
|
49
48
|
};
|
|
50
49
|
|
|
51
|
-
export const
|
|
52
|
-
|
|
53
|
-
): ColorMask => {
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
50
|
+
export const createColorMasks = (
|
|
51
|
+
colorMasks: DeepPartiallyOptional<ColorMask, 'baseColor'>[]
|
|
52
|
+
): ColorMask[] => {
|
|
53
|
+
const newColorMasks: ColorMask[] = [];
|
|
54
|
+
for (const i in colorMasks) {
|
|
55
|
+
const {
|
|
56
|
+
baseColor,
|
|
57
|
+
rgbToleranceRange,
|
|
58
|
+
useHSV,
|
|
59
|
+
hueToleranceRange,
|
|
60
|
+
brightnessTolerance,
|
|
61
|
+
saturationTolerance,
|
|
62
|
+
lowBrightnessThreshold,
|
|
63
|
+
lowSaturationThreshold,
|
|
64
|
+
} = colorMasks[i]!;
|
|
65
|
+
const baseTolerance = {
|
|
66
|
+
upper: [20, 20, 20] as vec3,
|
|
67
|
+
lower: [20, 20, 20] as vec3,
|
|
68
|
+
};
|
|
69
|
+
const baseHueTolerance = {
|
|
70
|
+
upper: 20,
|
|
71
|
+
lower: 20,
|
|
72
|
+
};
|
|
73
|
+
const tolerance = { ...baseTolerance, ...rgbToleranceRange };
|
|
74
|
+
const hueTolerance = { ...baseHueTolerance, ...hueToleranceRange };
|
|
75
|
+
const newColorMask: ColorMask = {
|
|
76
|
+
baseColor: baseColor,
|
|
77
|
+
rgbToleranceRange: tolerance,
|
|
78
|
+
useHSV: useHSV!!,
|
|
79
|
+
hueToleranceRange: hueTolerance,
|
|
80
|
+
brightnessTolerance: brightnessTolerance ?? 1.0,
|
|
81
|
+
saturationTolerance: saturationTolerance ?? 1.0,
|
|
82
|
+
lowBrightnessThreshold: lowBrightnessThreshold ?? 0.0,
|
|
83
|
+
lowSaturationThreshold: lowSaturationThreshold ?? 0.0,
|
|
84
|
+
debugMode: colorMaskDebug,
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
newColorMasks[i] = newColorMask;
|
|
88
|
+
}
|
|
74
89
|
|
|
75
90
|
// TODO: add radian and degree angle handling
|
|
76
91
|
// '123deg' <- interpret as a numeric angle value
|
|
77
92
|
// 2 <- interpret as a radian value
|
|
78
|
-
const mask: ColorMask = {
|
|
79
|
-
baseColor: baseColor,
|
|
80
|
-
rgbToleranceRange: tolerance,
|
|
81
|
-
useHSV: useHSV!!,
|
|
82
|
-
hueToleranceRange: hueTolerance,
|
|
83
|
-
brightnessTolerance: brightnessTolerance ?? 1.0,
|
|
84
|
-
saturationTolerance: saturationTolerance ?? 1.0,
|
|
85
|
-
lowBrightnessThreshold: lowBrightnessThreshold ?? 0.0,
|
|
86
|
-
lowSaturationThreshold: lowSaturationThreshold ?? 0.0,
|
|
87
|
-
};
|
|
88
93
|
|
|
89
|
-
return
|
|
94
|
+
return newColorMasks;
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
const fillColorMaskBufferWithDummies = (
|
|
98
|
+
colorMasks: ColorMask[]
|
|
99
|
+
): ColorMask[] => {
|
|
100
|
+
const dummyFilledColorMasks = new Array(COLOR_MASK_MAX_COUNT);
|
|
101
|
+
for (let i = 0; i < dummyFilledColorMasks.length; i++) {
|
|
102
|
+
if (i < colorMasks.length) {
|
|
103
|
+
dummyFilledColorMasks[i] = colorMasks[i];
|
|
104
|
+
} else {
|
|
105
|
+
dummyFilledColorMasks[i] = {
|
|
106
|
+
baseColor: [0, 0, 0],
|
|
107
|
+
useHSV: false,
|
|
108
|
+
rgbToleranceRange: {
|
|
109
|
+
upper: [0, 0, 0],
|
|
110
|
+
lower: [0, 0, 0],
|
|
111
|
+
},
|
|
112
|
+
hueToleranceRange: {
|
|
113
|
+
upper: 0,
|
|
114
|
+
lower: 0,
|
|
115
|
+
},
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
return dummyFilledColorMasks;
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
export const colorMasksToTyped = (
|
|
123
|
+
colorMasks: ColorMask[],
|
|
124
|
+
reverseHighlight: boolean
|
|
125
|
+
) => {
|
|
126
|
+
const typedColorMasks = fillColorMaskBufferWithDummies(colorMasks).map(
|
|
127
|
+
(mask) => colorMaskToTyped(mask)
|
|
128
|
+
);
|
|
129
|
+
return {
|
|
130
|
+
masks: typedColorMasks,
|
|
131
|
+
usedMaskCount: colorMasks.length,
|
|
132
|
+
reverseHighlight: reverseHighlight ? 1 : 0,
|
|
133
|
+
};
|
|
90
134
|
};
|
|
91
135
|
|
|
92
136
|
export const colorMaskToTyped = (colorMask: ColorMask) => {
|
|
@@ -105,7 +149,9 @@ export const colorMaskToTyped = (colorMask: ColorMask) => {
|
|
|
105
149
|
saturationTolerance: f32(colorMask.saturationTolerance),
|
|
106
150
|
lowSaturationThreshold: f32(colorMask.lowSaturationThreshold),
|
|
107
151
|
lowBrightnessThreshold: f32(colorMask.lowBrightnessThreshold),
|
|
152
|
+
debugMode: d.u32(colorMask.debugMode ? d.u32(1) : d.u32(0)),
|
|
108
153
|
};
|
|
154
|
+
|
|
109
155
|
return result;
|
|
110
156
|
};
|
|
111
157
|
|
package/src/types/types.ts
CHANGED
|
@@ -12,11 +12,13 @@ export type quaternion = vec4;
|
|
|
12
12
|
|
|
13
13
|
export type GlareOptions = {
|
|
14
14
|
glowPower: number;
|
|
15
|
-
hueShiftAngleMax: number;
|
|
16
|
-
hueShiftAngleMin: number;
|
|
17
|
-
hueBlendPower: number;
|
|
18
15
|
lightIntensity: number;
|
|
19
16
|
glareIntensity: number;
|
|
17
|
+
glareColor: {
|
|
18
|
+
hueBlendPower: number;
|
|
19
|
+
hueShiftAngleMax: number;
|
|
20
|
+
hueShiftAngleMin: number;
|
|
21
|
+
};
|
|
20
22
|
};
|
|
21
23
|
|
|
22
24
|
export type ColorMask = {
|
|
@@ -24,15 +26,46 @@ export type ColorMask = {
|
|
|
24
26
|
useHSV?: boolean;
|
|
25
27
|
hueToleranceRange: { upper: number; lower: number };
|
|
26
28
|
brightnessTolerance?: number;
|
|
27
|
-
lowBrightnessThreshold?: number;
|
|
28
29
|
saturationTolerance?: number;
|
|
30
|
+
lowBrightnessThreshold?: number;
|
|
29
31
|
lowSaturationThreshold?: number;
|
|
30
32
|
rgbToleranceRange: {
|
|
31
33
|
upper: vec3;
|
|
32
34
|
lower: vec3;
|
|
33
35
|
};
|
|
36
|
+
debugMode?: boolean;
|
|
34
37
|
};
|
|
35
38
|
|
|
39
|
+
//TODO: figure out how to tell compiler that im sure that it's long enough ;-;
|
|
40
|
+
export type ColorMaskArrayShaderAssert = [
|
|
41
|
+
any,
|
|
42
|
+
any,
|
|
43
|
+
any,
|
|
44
|
+
any,
|
|
45
|
+
any,
|
|
46
|
+
any,
|
|
47
|
+
any,
|
|
48
|
+
any,
|
|
49
|
+
any,
|
|
50
|
+
any,
|
|
51
|
+
any,
|
|
52
|
+
any,
|
|
53
|
+
any,
|
|
54
|
+
any,
|
|
55
|
+
any,
|
|
56
|
+
any,
|
|
57
|
+
];
|
|
58
|
+
|
|
59
|
+
export type Effect =
|
|
60
|
+
| {
|
|
61
|
+
name: 'reverseHolo';
|
|
62
|
+
options: Partial<ReverseHoloDetectionChannelFlags>;
|
|
63
|
+
}
|
|
64
|
+
| {
|
|
65
|
+
name: 'holo';
|
|
66
|
+
options?: HoloOptions;
|
|
67
|
+
};
|
|
68
|
+
|
|
36
69
|
export type ReverseHoloDetectionChannelFlags = {
|
|
37
70
|
redChannel: number;
|
|
38
71
|
greenChannel: number;
|