react-native-shine 0.2.2 → 0.3.1

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.
Files changed (141) hide show
  1. package/README.md +22 -7
  2. package/lib/module/components/Content.js +232 -0
  3. package/lib/module/components/Content.js.map +1 -0
  4. package/lib/module/components/Shine.js +33 -0
  5. package/lib/module/components/Shine.js.map +1 -0
  6. package/lib/module/components/ShineGroup.js +92 -0
  7. package/lib/module/components/ShineGroup.js.map +1 -0
  8. package/lib/module/enums/waveCallback.js +19 -0
  9. package/lib/module/enums/waveCallback.js.map +1 -0
  10. package/lib/module/hooks/useAnimationFrame.js +17 -0
  11. package/lib/module/hooks/useAnimationFrame.js.map +1 -0
  12. package/lib/module/hooks/useOrientation.js +10 -0
  13. package/lib/module/hooks/useOrientation.js.map +1 -0
  14. package/lib/module/index.js +6 -219
  15. package/lib/module/index.js.map +1 -1
  16. package/lib/module/shaders/bindGroupLayouts.js +41 -6
  17. package/lib/module/shaders/bindGroupLayouts.js.map +1 -1
  18. package/lib/module/shaders/bindGroupUtils.js +34 -41
  19. package/lib/module/shaders/bindGroupUtils.js.map +1 -1
  20. package/lib/module/shaders/fragmentShaders/colorMaskFragment.js +2 -2
  21. package/lib/module/shaders/fragmentShaders/colorMaskFragment.js.map +1 -1
  22. package/lib/module/shaders/fragmentShaders/glareFragment.js +115 -0
  23. package/lib/module/shaders/fragmentShaders/glareFragment.js.map +1 -0
  24. package/lib/module/shaders/fragmentShaders/holoFragment.js +28 -0
  25. package/lib/module/shaders/fragmentShaders/holoFragment.js.map +1 -0
  26. package/lib/module/shaders/fragmentShaders/maskFragment.js +20 -0
  27. package/lib/module/shaders/fragmentShaders/maskFragment.js.map +1 -0
  28. package/lib/module/shaders/fragmentShaders/reverseHoloFragment.js +46 -0
  29. package/lib/module/shaders/fragmentShaders/reverseHoloFragment.js.map +1 -0
  30. package/lib/module/shaders/pipelineSetups.js +72 -17
  31. package/lib/module/shaders/pipelineSetups.js.map +1 -1
  32. package/lib/module/shaders/{resourceManagement.js → resourceManagement/bitmaps.js} +2 -1
  33. package/lib/module/shaders/resourceManagement/bitmaps.js.map +1 -0
  34. package/lib/module/shaders/resourceManagement/bufferManager.js +46 -0
  35. package/lib/module/shaders/resourceManagement/bufferManager.js.map +1 -0
  36. package/lib/module/shaders/resourceManagement/textures.js +24 -0
  37. package/lib/module/shaders/resourceManagement/textures.js.map +1 -0
  38. package/lib/module/shaders/tgpuUtils.js +19 -1
  39. package/lib/module/shaders/tgpuUtils.js.map +1 -1
  40. package/lib/module/shaders/utils.js +8 -36
  41. package/lib/module/shaders/utils.js.map +1 -1
  42. package/lib/module/shaders/vertexShaders/mainRotationEffectVertex.js +47 -0
  43. package/lib/module/shaders/vertexShaders/mainRotationEffectVertex.js.map +1 -0
  44. package/lib/module/types/size.js +2 -0
  45. package/lib/module/types/size.js.map +1 -0
  46. package/lib/module/types/typeUtils.js +17 -19
  47. package/lib/module/types/typeUtils.js.map +1 -1
  48. package/lib/module/types/vector.js +2 -0
  49. package/lib/module/types/vector.js.map +1 -0
  50. package/lib/module/utils/size.js +25 -0
  51. package/lib/module/utils/size.js.map +1 -0
  52. package/lib/module/utils/vector.js +168 -0
  53. package/lib/module/utils/vector.js.map +1 -0
  54. package/lib/typescript/src/components/Content.d.ts +23 -0
  55. package/lib/typescript/src/components/Content.d.ts.map +1 -0
  56. package/lib/typescript/src/components/Shine.d.ts +7 -0
  57. package/lib/typescript/src/components/Shine.d.ts.map +1 -0
  58. package/lib/typescript/src/components/ShineGroup.d.ts +6 -0
  59. package/lib/typescript/src/components/ShineGroup.d.ts.map +1 -0
  60. package/lib/typescript/src/enums/waveCallback.d.ts +9 -0
  61. package/lib/typescript/src/enums/waveCallback.d.ts.map +1 -0
  62. package/lib/typescript/src/hooks/useAnimationFrame.d.ts +2 -0
  63. package/lib/typescript/src/hooks/useAnimationFrame.d.ts.map +1 -0
  64. package/lib/typescript/src/hooks/useOrientation.d.ts +4 -0
  65. package/lib/typescript/src/hooks/useOrientation.d.ts.map +1 -0
  66. package/lib/typescript/src/index.d.ts +8 -11
  67. package/lib/typescript/src/index.d.ts.map +1 -1
  68. package/lib/typescript/src/shaders/bindGroupLayouts.d.ts +46 -8
  69. package/lib/typescript/src/shaders/bindGroupLayouts.d.ts.map +1 -1
  70. package/lib/typescript/src/shaders/bindGroupUtils.d.ts +9 -9
  71. package/lib/typescript/src/shaders/bindGroupUtils.d.ts.map +1 -1
  72. package/lib/typescript/src/shaders/fragmentShaders/glareFragment.d.ts +8 -0
  73. package/lib/typescript/src/shaders/fragmentShaders/glareFragment.d.ts.map +1 -0
  74. package/lib/typescript/src/shaders/fragmentShaders/holoFragment.d.ts +5 -0
  75. package/lib/typescript/src/shaders/fragmentShaders/holoFragment.d.ts.map +1 -0
  76. package/lib/typescript/src/shaders/fragmentShaders/maskFragment.d.ts +6 -0
  77. package/lib/typescript/src/shaders/fragmentShaders/maskFragment.d.ts.map +1 -0
  78. package/lib/typescript/src/shaders/fragmentShaders/reverseHoloFragment.d.ts +5 -0
  79. package/lib/typescript/src/shaders/fragmentShaders/reverseHoloFragment.d.ts.map +1 -0
  80. package/lib/typescript/src/shaders/pipelineSetups.d.ts +9 -4
  81. package/lib/typescript/src/shaders/pipelineSetups.d.ts.map +1 -1
  82. package/lib/typescript/src/shaders/{resourceManagement.d.ts → resourceManagement/bitmaps.d.ts} +1 -1
  83. package/lib/typescript/src/shaders/resourceManagement/bitmaps.d.ts.map +1 -0
  84. package/lib/typescript/src/shaders/resourceManagement/bufferManager.d.ts +28 -0
  85. package/lib/typescript/src/shaders/resourceManagement/bufferManager.d.ts.map +1 -0
  86. package/lib/typescript/src/shaders/resourceManagement/textures.d.ts +8 -0
  87. package/lib/typescript/src/shaders/resourceManagement/textures.d.ts.map +1 -0
  88. package/lib/typescript/src/shaders/tgpuUtils.d.ts +5 -1
  89. package/lib/typescript/src/shaders/tgpuUtils.d.ts.map +1 -1
  90. package/lib/typescript/src/shaders/utils.d.ts +3 -10
  91. package/lib/typescript/src/shaders/utils.d.ts.map +1 -1
  92. package/lib/typescript/src/shaders/vertexShaders/mainRotationEffectVertex.d.ts +6 -0
  93. package/lib/typescript/src/shaders/vertexShaders/mainRotationEffectVertex.d.ts.map +1 -0
  94. package/lib/typescript/src/types/size.d.ts +5 -0
  95. package/lib/typescript/src/types/size.d.ts.map +1 -0
  96. package/lib/typescript/src/types/typeUtils.d.ts +3 -5
  97. package/lib/typescript/src/types/typeUtils.d.ts.map +1 -1
  98. package/lib/typescript/src/types/types.d.ts +10 -3
  99. package/lib/typescript/src/types/types.d.ts.map +1 -1
  100. package/lib/typescript/src/types/vector.d.ts +11 -0
  101. package/lib/typescript/src/types/vector.d.ts.map +1 -0
  102. package/lib/typescript/src/utils/size.d.ts +5 -0
  103. package/lib/typescript/src/utils/size.d.ts.map +1 -0
  104. package/lib/typescript/src/utils/vector.d.ts +33 -0
  105. package/lib/typescript/src/utils/vector.d.ts.map +1 -0
  106. package/package.json +7 -5
  107. package/scripts/postinstall.js +16 -17
  108. package/src/components/Content.tsx +403 -0
  109. package/src/components/Shine.tsx +38 -0
  110. package/src/components/ShineGroup.tsx +100 -0
  111. package/src/enums/waveCallback.ts +22 -0
  112. package/src/hooks/useAnimationFrame.ts +21 -0
  113. package/src/hooks/useOrientation.ts +18 -0
  114. package/src/index.tsx +14 -322
  115. package/src/shaders/bindGroupLayouts.ts +45 -8
  116. package/src/shaders/bindGroupUtils.ts +50 -65
  117. package/src/shaders/fragmentShaders/colorMaskFragment.ts +2 -2
  118. package/src/shaders/fragmentShaders/glareFragment.ts +143 -0
  119. package/src/shaders/fragmentShaders/holoFragment.ts +35 -0
  120. package/src/shaders/fragmentShaders/maskFragment.ts +31 -0
  121. package/src/shaders/fragmentShaders/reverseHoloFragment.ts +71 -0
  122. package/src/shaders/pipelineSetups.ts +152 -20
  123. package/src/shaders/{resourceManagement.ts → resourceManagement/bitmaps.ts} +1 -0
  124. package/src/shaders/resourceManagement/bufferManager.ts +82 -0
  125. package/src/shaders/resourceManagement/textures.ts +42 -0
  126. package/src/shaders/tgpuUtils.ts +36 -1
  127. package/src/shaders/utils.ts +13 -57
  128. package/src/shaders/vertexShaders/mainRotationEffectVertex.ts +76 -0
  129. package/src/types/size.ts +4 -0
  130. package/src/types/typeUtils.ts +22 -36
  131. package/src/types/types.ts +19 -3
  132. package/src/types/vector.ts +13 -0
  133. package/src/utils/size.ts +12 -0
  134. package/src/utils/vector.ts +132 -0
  135. package/lib/module/shaders/fragmentShaders/bloomFragment.js +0 -66
  136. package/lib/module/shaders/fragmentShaders/bloomFragment.js.map +0 -1
  137. package/lib/module/shaders/resourceManagement.js.map +0 -1
  138. package/lib/typescript/src/shaders/fragmentShaders/bloomFragment.d.ts +0 -6
  139. package/lib/typescript/src/shaders/fragmentShaders/bloomFragment.d.ts.map +0 -1
  140. package/lib/typescript/src/shaders/resourceManagement.d.ts.map +0 -1
  141. package/src/shaders/fragmentShaders/bloomFragment.ts +0 -83
@@ -1,35 +1,5 @@
1
- import { type TgpuRoot, type TgpuTexture } from 'typegpu';
2
- import type { quaternion, vec3 } from '../types/types';
3
1
  import { Dimensions } from 'react-native';
4
-
5
- export const createTexture = async (
6
- root: TgpuRoot,
7
- size: {
8
- width: number;
9
- height: number;
10
- }
11
- ): Promise<TgpuTexture> => {
12
- const texture = root['~unstable']
13
- .createTexture({
14
- size: [size.width, size.height],
15
- format: 'rgba8unorm',
16
- })
17
- .$usage('sampled', 'render');
18
-
19
- return texture;
20
- };
21
-
22
- export const loadTexture = async (
23
- root: TgpuRoot,
24
- imageBitmap: ImageBitmap,
25
- texture: TgpuTexture
26
- ) => {
27
- root.device.queue.copyExternalImageToTexture(
28
- { source: imageBitmap },
29
- { texture: root.unwrap(texture) },
30
- [imageBitmap.width, imageBitmap.height]
31
- );
32
- };
2
+ import type { quaternion, vec3 } from '../types/types';
33
3
 
34
4
  export const rotateVectorByQuaternion = (
35
5
  vec: vec3,
@@ -65,39 +35,25 @@ export const rotateVectorByQuaternion = (
65
35
  return [rotated[0], rotated[1], rotated[2]];
66
36
  };
67
37
 
68
- export const clamp = (v: number, min = -1, max = 1) => {
69
- 'worklet';
70
- return Math.max(min, Math.min(max, v));
71
- };
72
-
73
- export const rotate2D = (
74
- [x, y]: [number, number],
75
- angleDeg: number
76
- ): [number, number] => {
77
- 'worklet';
78
- const rad = (angleDeg * Math.PI) / 180;
79
- const c = Math.cos(rad);
80
- const s = Math.sin(rad);
81
- return [x * c - y * s, x * s + y * c];
82
- };
83
-
84
38
  // Simple helper to get angle from dimensions (0 or 90)
85
39
  export function getAngleFromDimensions() {
40
+ return 90 * Number(isLandscapeMode());
41
+ }
42
+
43
+ export function isLandscapeMode() {
86
44
  const { width, height } = Dimensions.get('window');
87
- return width >= height ? 90 : 0;
45
+
46
+ return width >= height;
88
47
  }
89
48
 
90
49
  // Subscribe to orientation change via Dimensions API only
91
50
  export function subscribeToOrientationChange(
92
- callback: (angleDeg: number) => void
51
+ callback: (isLandscape: boolean) => void
93
52
  ) {
94
- callback(getAngleFromDimensions());
95
- const handler = () => {
96
- callback(getAngleFromDimensions());
97
- };
53
+ const handler = () => callback(isLandscapeMode());
54
+ const subscription = Dimensions.addEventListener('change', handler);
55
+
56
+ handler();
98
57
 
99
- const dimSub = Dimensions.addEventListener('change', handler);
100
- return () => {
101
- dimSub.remove();
102
- };
58
+ return () => subscription.remove();
103
59
  }
@@ -0,0 +1,76 @@
1
+ import tgpu from 'typegpu';
2
+ import * as std from 'typegpu/std';
3
+ import * as d from 'typegpu/data';
4
+ import { rotationBindGroupLayout } from '../bindGroupLayouts';
5
+
6
+ const mainRotationEffectVertex = tgpu['~unstable'].vertexFn({
7
+ in: { vertexIndex: d.builtin.vertexIndex },
8
+ out: { position: d.builtin.position, uv: d.vec2f },
9
+ })((input) => {
10
+ const rot = rotationBindGroupLayout.$.vec;
11
+
12
+ // Maximum rotation angles in radians
13
+ const maxAngle = d.f32((25.0 * Math.PI) / 180.0);
14
+ const ax = d.f32(-rot.y * maxAngle); // rotateX depends on vertical touch
15
+ const ay = d.f32(-rot.x * 1.0); // rotateY depends on horizontal touch
16
+
17
+ const positions: d.v2f[] = [
18
+ d.vec2f(-1.0, -1.0),
19
+ d.vec2f(1.0, 1.0),
20
+ d.vec2f(1.0, -1.0),
21
+ d.vec2f(-1.0, -1.0),
22
+ d.vec2f(-1.0, 1.0),
23
+ d.vec2f(1.0, 1.0),
24
+ ];
25
+
26
+ const uvs: d.v2f[] = [
27
+ d.vec2f(0.0, 0.0),
28
+ d.vec2f(1.0, 1.0),
29
+ d.vec2f(1.0, 0.0),
30
+ d.vec2f(0.0, 0.0),
31
+ d.vec2f(0.0, 1.0),
32
+ d.vec2f(1.0, 1.0),
33
+ ];
34
+
35
+ const index = input.vertexIndex;
36
+ const pos = d.vec3f(positions[index] as d.v2f, 0.0);
37
+
38
+ const pivot = d.vec3f(rot.x, rot.y, 0.0);
39
+
40
+ const relative = std.sub(pos, pivot);
41
+ const cosX = std.cos(ax);
42
+ const sinX = std.sin(ax);
43
+ const rotatedX = d.vec3f(
44
+ relative.x,
45
+ cosX * relative.y - sinX * relative.z,
46
+ sinX * relative.y + cosX * relative.z
47
+ );
48
+
49
+ const cosY = std.cos(ay);
50
+ const sinY = std.sin(ay);
51
+ const rotatedXY = d.vec3f(
52
+ cosY * rotatedX.x + sinY * rotatedX.z,
53
+ rotatedX.y,
54
+ -sinY * rotatedX.x + cosY * rotatedX.z
55
+ );
56
+
57
+ const finalPos3D = std.add(rotatedXY, pivot);
58
+ const perspective = 100.0;
59
+ const zOffset = 2.5;
60
+ const z = finalPos3D.z + zOffset;
61
+ const persp = perspective / (perspective + z);
62
+
63
+ const finalPos = d.vec4f(
64
+ finalPos3D.x * persp,
65
+ finalPos3D.y * persp,
66
+ 0.0,
67
+ 1.0
68
+ );
69
+
70
+ return {
71
+ position: finalPos,
72
+ uv: uvs[index] as d.v2f,
73
+ };
74
+ });
75
+
76
+ export default mainRotationEffectVertex;
@@ -0,0 +1,4 @@
1
+ export interface Size {
2
+ width: number;
3
+ height: number;
4
+ }
@@ -1,36 +1,36 @@
1
1
  import { f32, vec2f, vec3f, vec4f } from 'typegpu/data';
2
2
  import type {
3
- BindGroupPair,
4
- BloomOptions,
3
+ GlareOptions,
5
4
  ColorMask,
6
5
  DeepPartiallyOptional,
7
6
  vec3,
7
+ HoloOptions,
8
8
  } from './types';
9
9
  import { div } from 'typegpu/std';
10
- import type { TgpuBindGroup, TgpuBindGroupLayout } from 'typegpu';
10
+ import { WAVE_CALLBACKS } from '../enums/waveCallback';
11
11
 
12
- export const createBloomOptions = (
13
- options: Partial<BloomOptions>
14
- ): BloomOptions => {
12
+ export const createGlareOptions = (
13
+ options: Partial<GlareOptions>
14
+ ): GlareOptions => {
15
15
  const {
16
16
  glowPower,
17
17
  hueShiftAngleMax,
18
18
  hueShiftAngleMin,
19
19
  hueBlendPower,
20
20
  lightIntensity,
21
- bloomIntensity,
21
+ glareIntensity,
22
22
  } = options;
23
23
 
24
- const bloomOp = {
24
+ const glareOp = {
25
25
  glowPower: glowPower ?? 1.0,
26
26
  hueShiftAngleMax: hueShiftAngleMax ?? 1.0,
27
27
  hueShiftAngleMin: hueShiftAngleMin ?? 0.0,
28
28
  hueBlendPower: hueBlendPower ?? 1.0,
29
29
  lightIntensity: lightIntensity ?? 1.0,
30
- bloomIntensity: bloomIntensity ?? 1.0,
30
+ glareIntensity: glareIntensity ?? 1.0,
31
31
  };
32
32
 
33
- return bloomOp;
33
+ return glareOp;
34
34
  };
35
35
 
36
36
  export const mapToF32 = <T extends Record<string, number>>(
@@ -75,6 +75,18 @@ export const colorMaskToTyped = (colorMask: ColorMask) => {
75
75
  return result;
76
76
  };
77
77
 
78
+ export const createHoloOptions = (
79
+ options: Partial<HoloOptions>
80
+ ): HoloOptions => {
81
+ const { intensity, waveCallback } = options;
82
+ const holoOpt = {
83
+ intensity: intensity ?? 0.7,
84
+ waveCallback: waveCallback ?? WAVE_CALLBACKS.default,
85
+ };
86
+
87
+ return holoOpt;
88
+ };
89
+
78
90
  export const numberArrToTyped = (vec: number[]) => {
79
91
  let convFn: ((...args: number[]) => any) | null = null;
80
92
  switch (vec.length) {
@@ -94,29 +106,3 @@ export const numberArrToTyped = (vec: number[]) => {
94
106
  const typed = convFn(...vec);
95
107
  return typed;
96
108
  };
97
-
98
- export const createBindGroupPair = (
99
- bindGroupLayout: TgpuBindGroupLayout,
100
- bindGroup: TgpuBindGroup
101
- ): BindGroupPair => {
102
- return { layout: bindGroupLayout, group: bindGroup };
103
- };
104
-
105
- export const createBindGroupPairs = (
106
- bindGroupLayouts: TgpuBindGroupLayout[],
107
- bindGroups: TgpuBindGroup[]
108
- ): BindGroupPair[] => {
109
- if (
110
- bindGroupLayouts.length > 0 &&
111
- bindGroupLayouts.length !== bindGroups.length
112
- )
113
- throw new Error(
114
- 'createBindGroups: bindGroupLayout and bindGroup arrrays must be of the same length'
115
- );
116
- const pairs: BindGroupPair[] = [];
117
- for (let i = 0; i < bindGroupLayouts.length; i++) {
118
- pairs.push(createBindGroupPair(bindGroupLayouts[i]!, bindGroups[i]!));
119
- }
120
-
121
- return pairs;
122
- };
@@ -1,17 +1,22 @@
1
- import type { TgpuBindGroup, TgpuBindGroupLayout } from 'typegpu';
1
+ import type {
2
+ TgpuBindGroup,
3
+ TgpuBindGroupLayout,
4
+ TgpuRenderPipeline,
5
+ } from 'typegpu';
6
+ import type { WaveCallbackFn } from '../enums/waveCallback';
2
7
 
3
8
  export type vec2 = [number, number];
4
9
  export type vec3 = [number, number, number];
5
10
  export type vec4 = [number, number, number, number];
6
11
  export type quaternion = vec4;
7
12
 
8
- export type BloomOptions = {
13
+ export type GlareOptions = {
9
14
  glowPower: number;
10
15
  hueShiftAngleMax: number;
11
16
  hueShiftAngleMin: number;
12
17
  hueBlendPower: number;
13
18
  lightIntensity: number;
14
- bloomIntensity: number;
19
+ glareIntensity: number;
15
20
  };
16
21
 
17
22
  export type ColorMask = {
@@ -22,6 +27,11 @@ export type ColorMask = {
22
27
  };
23
28
  };
24
29
 
30
+ export type HoloOptions = {
31
+ intensity: number;
32
+ waveCallback: WaveCallbackFn;
33
+ };
34
+
25
35
  //makes all keys besides specified optional
26
36
  export type PartiallyOptional<T, K extends keyof T> = {
27
37
  [P in K]: T[P];
@@ -49,3 +59,9 @@ export type BindGroupPair = {
49
59
  layout: TgpuBindGroupLayout;
50
60
  group: TgpuBindGroup;
51
61
  };
62
+
63
+ export type ColorAttachment = Parameters<
64
+ TgpuRenderPipeline['withColorAttachment']
65
+ >[0];
66
+
67
+ export type PipelineAttachmentPair = [TgpuRenderPipeline, ColorAttachment];
@@ -0,0 +1,13 @@
1
+ export interface V1d {
2
+ x: number;
3
+ }
4
+
5
+ export interface V2d extends V1d {
6
+ y: number;
7
+ }
8
+
9
+ export interface V3d extends V2d {
10
+ z: number;
11
+ }
12
+
13
+ export type Transformer = (value: number) => number;
@@ -0,0 +1,12 @@
1
+ import type { Size } from '../types/size';
2
+ import type { V2d } from '../types/vector';
3
+
4
+ export function sizeToV2d({ width: x, height: y }: Size): V2d {
5
+ 'worklet';
6
+ return { x, y };
7
+ }
8
+
9
+ export function sizeFromV2d({ x: width, y: height }: V2d): Size {
10
+ 'worklet';
11
+ return { width, height };
12
+ }
@@ -0,0 +1,132 @@
1
+ import type { Transformer, V2d, V3d } from '../types/vector';
2
+
3
+ // 2d
4
+ export function scaleV2d(a: V2d, value: number): V2d {
5
+ 'worklet';
6
+ return {
7
+ x: value * a.x,
8
+ y: value * a.y,
9
+ };
10
+ }
11
+
12
+ export const multiplyV2d = scaleV2d;
13
+
14
+ export function addV2d(a: V2d, b: V2d): V2d {
15
+ 'worklet';
16
+ return {
17
+ x: a.x + b.x,
18
+ y: a.y + b.y,
19
+ };
20
+ }
21
+
22
+ export function angleToV2d(angle: number): V2d {
23
+ 'worklet';
24
+ return { x: Math.cos(angle), y: Math.sin(angle) };
25
+ }
26
+
27
+ export function rotateV2d({ x, y }: V2d, rad: number): V2d {
28
+ 'worklet';
29
+ const { x: c, y: s } = angleToV2d(rad);
30
+
31
+ return { x: x * c - y * s, y: x * s + y * c };
32
+ }
33
+
34
+ export function negateV2dX({ x, y }: V2d): V2d {
35
+ 'worklet';
36
+ return { x: -x, y };
37
+ }
38
+
39
+ export function negateV2dY({ x, y }: V2d): V2d {
40
+ 'worklet';
41
+ return { x, y: -y };
42
+ }
43
+
44
+ export function transformV2d({ x, y }: V2d, transformer: Transformer): V2d {
45
+ 'worklet';
46
+ return {
47
+ x: transformer(x),
48
+ y: transformer(y),
49
+ };
50
+ }
51
+
52
+ export function clampV2d(v2d: V2d, min: number, max: number): V2d {
53
+ 'worklet';
54
+ return transformV2d(v2d, (value) => clamp(value, min, max));
55
+ }
56
+
57
+ export function round2D(v2d: V2d): V2d {
58
+ 'worklet';
59
+ return transformV2d(v2d, (value) => Math.round(value));
60
+ }
61
+
62
+ export function areV2dEqual(a: V2d, b: V2d): boolean {
63
+ return a.x === b.x && a.y === b.y;
64
+ }
65
+
66
+ export const zeroV2d = { x: 0, y: 0 };
67
+
68
+ // 3d
69
+ export function scaleV3d(a: V3d, value: number): V3d {
70
+ 'worklet';
71
+ return {
72
+ ...scaleV2d(a, value),
73
+ z: value * a.z,
74
+ };
75
+ }
76
+
77
+ export const multiplyV3d = scaleV3d;
78
+
79
+ export function divV3d(a: V3d, value: number): V3d {
80
+ 'worklet';
81
+ return multiplyV3d(a, 1 / value);
82
+ }
83
+
84
+ export function negateV3d(a: V3d): V3d {
85
+ 'worklet';
86
+ return scaleV3d(a, -1);
87
+ }
88
+
89
+ export function addV3d(a: V3d, b: V3d): V3d {
90
+ 'worklet';
91
+ return {
92
+ ...addV2d(a, b),
93
+ z: a.z + b.z,
94
+ };
95
+ }
96
+
97
+ export function subtractV3d(a: V3d, b: V3d): V3d {
98
+ 'worklet';
99
+ return addV3d(a, negateV3d(b));
100
+ }
101
+
102
+ export function componentsFromV3d({ x, y, z }: V3d): [number, number, number] {
103
+ 'worklet';
104
+ return [x, y, z];
105
+ }
106
+
107
+ export function transformV3d(v3d: V3d, transformer: Transformer): V3d {
108
+ 'worklet';
109
+ return {
110
+ ...transformV2d(v3d, transformer),
111
+ z: transformer(v3d.z),
112
+ };
113
+ }
114
+
115
+ export function clamp(v: number, min = -1, max = 1): number {
116
+ 'worklet';
117
+ return Math.max(min, Math.min(max, v));
118
+ }
119
+
120
+ export function clampV3d(v3d: V3d, min: number, max: number): V3d {
121
+ 'worklet';
122
+ return transformV3d(v3d, (value) => clamp(value, min, max));
123
+ }
124
+
125
+ // helpers
126
+
127
+ export function degToRad(deg: number): number {
128
+ 'worklet';
129
+ return (deg * Math.PI) / 180;
130
+ }
131
+
132
+ export const zeroV3d = { x: 0, y: 0, z: 0 };
@@ -1,66 +0,0 @@
1
- "use strict";
2
-
3
- import tgpu from 'typegpu';
4
- import * as d from 'typegpu/data';
5
- import * as std from 'typegpu/std';
6
- import { rotationValuesBindGroupLayout, textureBindGroupLayout, bloomOptionsBindGroupLayout, colorMaskBindGroupLayout } from "../bindGroupLayouts.js";
7
- import { bloomColorShift, hueShift, overlayChannels } from "../tgpuUtils.js";
8
- const bloomFragment = tgpu['~unstable'].fragmentFn({
9
- in: {
10
- uv: d.vec2f
11
- },
12
- out: d.vec4f
13
- })(input => {
14
- const texcoord = d.vec2f(input.uv.x, 1.0 - input.uv.y);
15
- const uv = d.vec2f(input.uv.x, 1.0 - input.uv.y);
16
- const centeredCoords = std.sub(std.mul(uv, 2.0), 1); //-1 to 1
17
-
18
- const rot = rotationValuesBindGroupLayout.$.vec;
19
- const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y));
20
- const bloomOptions = bloomOptionsBindGroupLayout.$.bloomOptions;
21
- const bloomIntensity = bloomOptions.bloomIntensity;
22
- const glowPower = bloomOptions.glowPower;
23
- const hueBlendPower = bloomOptions.hueBlendPower;
24
- const hueShiftAngleMax = bloomOptions.hueShiftAngleMax;
25
- const hueShiftAngleMin = bloomOptions.hueShiftAngleMin;
26
- const lightIntensity = bloomOptions.lightIntensity;
27
- const mask = colorMaskBindGroupLayout.$.mask;
28
- const maskedColor = mask.baseColor;
29
- const rgbToleranceRange = mask.rgbToleranceRange;
30
- let color = std.textureSample(textureBindGroupLayout.$.texture, textureBindGroupLayout.$.sampler, texcoord);
31
- const maskedColorLower = std.sub(maskedColor, rgbToleranceRange.lower);
32
- const maskedColorUpper = std.add(maskedColor, rgbToleranceRange.upper);
33
- const upperCheck = std.all(std.le(color.xyz, maskedColorUpper));
34
- const lowerCheck = std.all(std.ge(color.xyz, maskedColorLower));
35
- if (upperCheck && lowerCheck) {
36
- return color;
37
- }
38
-
39
- //bloomIntensity
40
- const dst = std.exp(-std.distance(center, centeredCoords));
41
- const distToCenter = std.smoothstep(0.0, 1 / bloomIntensity, dst);
42
-
43
- //glowPower
44
- let glow = d.vec3f(distToCenter);
45
- glow = std.mul(glow, glowPower * color.w);
46
-
47
- //hueBlend
48
- const hueBlend = d.f32(hueBlendPower) * dst / 10.0;
49
-
50
- //lightIntensity
51
- glow = std.add(glow, lightIntensity / 10.0);
52
- let shiftedRGB = bloomColorShift(color.xyz, dst / (lightIntensity * 2));
53
-
54
- //hueShiftAngleMin/Max
55
- const hueShiftAngle = std.smoothstep(hueShiftAngleMin, hueShiftAngleMax, distToCenter);
56
- const shiftedHue = hueShift(shiftedRGB, hueShiftAngle);
57
- shiftedRGB = overlayChannels(shiftedRGB, shiftedHue);
58
- color = d.vec4f(std.mix(color.xyz, shiftedRGB, hueBlend), color.w);
59
- const baseColor = color;
60
- const blendColor = glow;
61
- const combined = overlayChannels(baseColor.xyz, blendColor);
62
- color = d.vec4f(std.mix(color.xyz, combined, glow), color.w);
63
- return color;
64
- });
65
- export default bloomFragment;
66
- //# sourceMappingURL=bloomFragment.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["tgpu","d","std","rotationValuesBindGroupLayout","textureBindGroupLayout","bloomOptionsBindGroupLayout","colorMaskBindGroupLayout","bloomColorShift","hueShift","overlayChannels","bloomFragment","fragmentFn","in","uv","vec2f","out","vec4f","input","texcoord","x","y","centeredCoords","sub","mul","rot","$","vec","center","add","bloomOptions","bloomIntensity","glowPower","hueBlendPower","hueShiftAngleMax","hueShiftAngleMin","lightIntensity","mask","maskedColor","baseColor","rgbToleranceRange","color","textureSample","texture","sampler","maskedColorLower","lower","maskedColorUpper","upper","upperCheck","all","le","xyz","lowerCheck","ge","dst","exp","distance","distToCenter","smoothstep","glow","vec3f","w","hueBlend","f32","shiftedRGB","hueShiftAngle","shiftedHue","mix","blendColor","combined"],"sourceRoot":"../../../../src","sources":["shaders/fragmentShaders/bloomFragment.ts"],"mappings":"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","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["Asset","getBitmapFromURI","uri","uriToBitmapMap","has","get","console","log","ast","fromURI","downloadAsync","fileURI","localUri","response","fetch","blob","imageBitmap","createImageBitmap","set","Map"],"sourceRoot":"../../../src","sources":["shaders/resourceManagement.ts"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,YAAY;AAElC,MAAMC,gBAAgB,GAAG,MAAOC,GAAW,IAA2B;EACpE,IAAIC,cAAc,CAACC,GAAG,CAACF,GAAG,CAAC,EAAE,OAAOC,cAAc,CAACE,GAAG,CAACH,GAAG,CAAC;EAC3DI,OAAO,CAACC,GAAG,CAAC,8CAA8C,CAAC;EAE3D,MAAMC,GAAG,GAAGR,KAAK,CAACS,OAAO,CAACP,GAAG,CAAC;EAC9B,MAAMM,GAAG,CAACE,aAAa,CAAC,CAAC;EACzB,MAAMC,OAAO,GAAGH,GAAG,CAACI,QAAQ,IAAIJ,GAAG,CAACN,GAAG;EAEvCI,OAAO,CAACC,GAAG,CAAC,uCAAuC,CAAC;EACpD,MAAMM,QAAQ,GAAG,MAAMC,KAAK,CAACH,OAAO,CAAC;EACrC,MAAMI,IAAI,GAAG,MAAMF,QAAQ,CAACE,IAAI,CAAC,CAAC;EAClC,MAAMC,WAAW,GAAG,MAAMC,iBAAiB,CAACF,IAAI,CAAC;EAEjDZ,cAAc,CAACe,GAAG,CAAChB,GAAG,EAAEc,WAAW,CAAC;EACpC,OAAOA,WAAW;AACpB,CAAC;AAED,MAAMb,cAAc,GAAG,IAAIgB,GAAG,CAAsB,CAAC;AAErD,eAAelB,gBAAgB","ignoreList":[]}
@@ -1,6 +0,0 @@
1
- import * as d from 'typegpu/data';
2
- declare const bloomFragment: import("typegpu").TgpuFragmentFn<{
3
- uv: d.Vec2f;
4
- }, d.Vec4f>;
5
- export default bloomFragment;
6
- //# sourceMappingURL=bloomFragment.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"bloomFragment.d.ts","sourceRoot":"","sources":["../../../../../src/shaders/fragmentShaders/bloomFragment.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAUlC,QAAA,MAAM,aAAa;;WAqEjB,CAAC;AAEH,eAAe,aAAa,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"resourceManagement.d.ts","sourceRoot":"","sources":["../../../../src/shaders/resourceManagement.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,gBAAgB,GAAU,KAAK,MAAM,KAAG,OAAO,CAAC,WAAW,CAehE,CAAC;AAIF,eAAe,gBAAgB,CAAC"}
@@ -1,83 +0,0 @@
1
- import tgpu from 'typegpu';
2
- import * as d from 'typegpu/data';
3
- import * as std from 'typegpu/std';
4
- import {
5
- rotationValuesBindGroupLayout,
6
- textureBindGroupLayout,
7
- bloomOptionsBindGroupLayout,
8
- colorMaskBindGroupLayout,
9
- } from '../bindGroupLayouts';
10
- import { bloomColorShift, hueShift, overlayChannels } from '../tgpuUtils';
11
-
12
- const bloomFragment = tgpu['~unstable'].fragmentFn({
13
- in: { uv: d.vec2f },
14
- out: d.vec4f,
15
- })((input) => {
16
- const texcoord = d.vec2f(input.uv.x, 1.0 - input.uv.y);
17
- const uv = d.vec2f(input.uv.x, 1.0 - input.uv.y);
18
- const centeredCoords = std.sub(std.mul(uv, 2.0), 1); //-1 to 1
19
-
20
- const rot = rotationValuesBindGroupLayout.$.vec;
21
- const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y));
22
-
23
- const bloomOptions = bloomOptionsBindGroupLayout.$.bloomOptions;
24
- const bloomIntensity = bloomOptions.bloomIntensity;
25
- const glowPower = bloomOptions.glowPower;
26
- const hueBlendPower = bloomOptions.hueBlendPower;
27
- const hueShiftAngleMax = bloomOptions.hueShiftAngleMax;
28
- const hueShiftAngleMin = bloomOptions.hueShiftAngleMin;
29
- const lightIntensity = bloomOptions.lightIntensity;
30
-
31
- const mask = colorMaskBindGroupLayout.$.mask;
32
- const maskedColor = mask.baseColor;
33
- const rgbToleranceRange = mask.rgbToleranceRange;
34
-
35
- let color = std.textureSample(
36
- textureBindGroupLayout.$.texture,
37
- textureBindGroupLayout.$.sampler,
38
- texcoord
39
- );
40
-
41
- const maskedColorLower = std.sub(maskedColor, rgbToleranceRange.lower);
42
- const maskedColorUpper = std.add(maskedColor, rgbToleranceRange.upper);
43
- const upperCheck = std.all(std.le(color.xyz, maskedColorUpper));
44
- const lowerCheck = std.all(std.ge(color.xyz, maskedColorLower));
45
- if (upperCheck && lowerCheck) {
46
- return color;
47
- }
48
-
49
- //bloomIntensity
50
- const dst = std.exp(-std.distance(center, centeredCoords));
51
- const distToCenter = std.smoothstep(0.0, 1 / bloomIntensity, dst);
52
-
53
- //glowPower
54
- let glow = d.vec3f(distToCenter);
55
- glow = std.mul(glow, glowPower * color.w);
56
-
57
- //hueBlend
58
- const hueBlend = (d.f32(hueBlendPower) * dst) / 10.0;
59
-
60
- //lightIntensity
61
- glow = std.add(glow, lightIntensity / 10.0);
62
- let shiftedRGB = bloomColorShift(color.xyz, dst / (lightIntensity * 2));
63
-
64
- //hueShiftAngleMin/Max
65
- const hueShiftAngle = std.smoothstep(
66
- hueShiftAngleMin,
67
- hueShiftAngleMax,
68
- distToCenter
69
- );
70
- const shiftedHue = hueShift(shiftedRGB, hueShiftAngle);
71
- shiftedRGB = overlayChannels(shiftedRGB, shiftedHue);
72
-
73
- color = d.vec4f(std.mix(color.xyz, shiftedRGB, hueBlend), color.w);
74
- const baseColor = color;
75
- const blendColor = glow;
76
-
77
- const combined = overlayChannels(baseColor.xyz, blendColor);
78
- color = d.vec4f(std.mix(color.xyz, combined, glow), color.w);
79
-
80
- return color;
81
- });
82
-
83
- export default bloomFragment;