@@ -18,6 +18,207 @@ describe('rotating-triangle-tiles example', () => {
1818 setupMocks : mockResizeObserver ,
1919 } , device ) ;
2020
21- expect ( shaderCodes ) . toMatchInlineSnapshot ( ) ;
21+ expect ( shaderCodes ) . toMatchInlineSnapshot ( `
22+ "struct backgroundVertex_Output {
23+ @builtin(position) outPos: vec4f,
24+ }
25+
26+ struct backgroundVertex_Input {
27+ @builtin(vertex_index) vertexIndex: u32,
28+ }
29+
30+ @vertex fn backgroundVertex(_arg_0: backgroundVertex_Input) -> backgroundVertex_Output {
31+ var positions = array<vec2f, 6>(vec2f(1, -1), vec2f(-1, 1), vec2f(-1), vec2f(1), vec2f(-1, 1), vec2f(1, -1));
32+ return backgroundVertex_Output(vec4f(positions[_arg_0.vertexIndex], 0f, 1f));
33+ }
34+
35+ @group(0) @binding(0) var<storage, read> shiftedColorsBuffer: array<vec4f, 3>;
36+
37+ @fragment fn backgroundFragment() -> @location(0) vec4f {
38+ var color = shiftedColorsBuffer[0i];
39+ return color;
40+ }
41+
42+ const originalVertices: array<vec2f, 3> = array<vec2f, 3>(vec2f(0.8660253882408142, -0.5), vec2f(0, 1), vec2f(-0.8660253882408142, -0.5));
43+
44+ struct InstanceInfo {
45+ offset: vec2f,
46+ rotationAngle: f32,
47+ }
48+
49+ @group(1) @binding(0) var<storage, read> instanceInfo: array<InstanceInfo>;
50+
51+ @group(0) @binding(0) var<uniform> stepRotationBuffer: f32;
52+
53+ fn interpolate(inputValue: f32, inputLowerEndpoint: f32, inputUpperEndpoint: f32, outputLowerEndpoint: f32, outputUpperEndpoint: f32) -> f32 {
54+ let inputProgress = (inputValue - inputLowerEndpoint);
55+ let inputInterval = (inputUpperEndpoint - inputLowerEndpoint);
56+ let progressPercentage = (inputProgress / inputInterval);
57+ let outputInterval = (outputUpperEndpoint - outputLowerEndpoint);
58+ let outputValue = (outputLowerEndpoint + (outputInterval * progressPercentage));
59+ return outputValue;
60+ }
61+
62+ fn interpolateBezier(inputValue: f32, outputLowerEndpoint: f32, outputUpperEndpoint: f32) -> f32 {
63+ return interpolate(inputValue, 0f, 1f, outputLowerEndpoint, outputUpperEndpoint);
64+ }
65+
66+ @group(0) @binding(1) var<uniform> animationProgressUniform: f32;
67+
68+ @group(0) @binding(2) var<uniform> middleSquareScaleBuffer: f32;
69+
70+ fn rotate(coordinate: vec2f, angleInDegrees: f32) -> vec2f {
71+ let angle = ((angleInDegrees * 3.141592653589793f) / 180f);
72+ let x = coordinate.x;
73+ let y = coordinate.y;
74+ return vec2f(((x * cos(angle)) - (y * sin(angle))), ((x * sin(angle)) + (y * cos(angle))));
75+ }
76+
77+ @group(0) @binding(3) var<uniform> scaleBuffer: f32;
78+
79+ @group(0) @binding(4) var<uniform> aspectRatioBuffer: f32;
80+
81+ fn getZeroOffset() -> vec2f {
82+ let zeroXOffset = ((0.8660254037844386f * scaleBuffer) - (1f * aspectRatioBuffer));
83+ let zeroYOffset = (1f - scaleBuffer);
84+ return vec2f(zeroXOffset, zeroYOffset);
85+ }
86+
87+ fn instanceTransform(position: vec2f, instanceInfo_1: InstanceInfo) -> vec2f {
88+ var transformedPoint = (rotate((position * scaleBuffer), instanceInfo_1.rotationAngle) + (instanceInfo_1.offset + getZeroOffset()));
89+ return (mat2x2f((1f / aspectRatioBuffer), 0f, 0f, 1f) * transformedPoint);
90+ }
91+
92+ struct midgroundVertex_Output {
93+ @builtin(position) outPos: vec4f,
94+ @location(0) @interpolate(flat) maskP0: vec2f,
95+ @location(1) @interpolate(flat) maskP1: vec2f,
96+ @location(2) @interpolate(flat) maskP2: vec2f,
97+ @location(3) vertexClipPos: vec2f,
98+ }
99+
100+ struct midgroundVertex_Input {
101+ @builtin(vertex_index) vertexIndex: u32,
102+ @builtin(instance_index) instanceIndex: u32,
103+ }
104+
105+ @vertex fn midgroundVertex(_arg_0: midgroundVertex_Input) -> midgroundVertex_Output {
106+ const SMALLEST_LOOPING_ROTATION_ANGLE = 120f;
107+ var vertexPosition = originalVertices[_arg_0.vertexIndex];
108+ let instanceInfo_1 = (&instanceInfo[_arg_0.instanceIndex]);
109+ let angle = interpolateBezier(animationProgressUniform, (stepRotationBuffer % SMALLEST_LOOPING_ROTATION_ANGLE), (stepRotationBuffer + (stepRotationBuffer % SMALLEST_LOOPING_ROTATION_ANGLE)));
110+ let scaleFactor = interpolateBezier(animationProgressUniform, 0.5f, middleSquareScaleBuffer);
111+ var calculatedPosition = rotate(vertexPosition, angle);
112+ calculatedPosition = (calculatedPosition * scaleFactor);
113+ var finalPosition = instanceTransform(calculatedPosition, (*instanceInfo_1));
114+ var maskP0 = instanceTransform(originalVertices[0i], (*instanceInfo_1));
115+ var maskP1 = instanceTransform(originalVertices[1i], (*instanceInfo_1));
116+ var maskP2 = instanceTransform(originalVertices[2i], (*instanceInfo_1));
117+ return midgroundVertex_Output(vec4f(finalPosition, 0f, 1f), maskP0, maskP1, maskP2, finalPosition);
118+ }
119+
120+ fn edgeFunction(a: vec2f, b: vec2f, p: vec2f) -> f32 {
121+ return (((p.x - a.x) * (b.y - a.y)) - ((p.y - a.y) * (b.x - a.x)));
122+ }
123+
124+ @group(0) @binding(5) var<uniform> drawOverNeighborsBuffer: u32;
125+
126+ @group(0) @binding(6) var<storage, read> shiftedColorsBuffer: array<vec4f, 3>;
127+
128+ struct midgroundFragment_Input {
129+ @builtin(position) outPos: vec4f,
130+ @location(0) @interpolate(flat) maskP0: vec2f,
131+ @location(1) @interpolate(flat) maskP1: vec2f,
132+ @location(2) @interpolate(flat) maskP2: vec2f,
133+ @location(3) vertexClipPos: vec2f,
134+ }
135+
136+ @fragment fn midgroundFragment(_arg_0: midgroundFragment_Input) -> @location(0) vec4f {
137+ let e0 = edgeFunction(_arg_0.maskP0, _arg_0.maskP1, _arg_0.vertexClipPos);
138+ let e1 = edgeFunction(_arg_0.maskP1, _arg_0.maskP2, _arg_0.vertexClipPos);
139+ let e2 = edgeFunction(_arg_0.maskP2, _arg_0.maskP0, _arg_0.vertexClipPos);
140+ if (((((e0 > 0f) || (e1 > 0f)) || (e2 > 0f)) && (drawOverNeighborsBuffer == 0u))) {
141+ discard;;
142+ }
143+ var color = shiftedColorsBuffer[1i];
144+ return color;
145+ }
146+
147+ const originalVertices: array<vec2f, 3> = array<vec2f, 3>(vec2f(0.8660253882408142, -0.5), vec2f(0, 1), vec2f(-0.8660253882408142, -0.5));
148+
149+ struct InstanceInfo {
150+ offset: vec2f,
151+ rotationAngle: f32,
152+ }
153+
154+ @group(1) @binding(0) var<storage, read> instanceInfo: array<InstanceInfo>;
155+
156+ fn interpolate(inputValue: f32, inputLowerEndpoint: f32, inputUpperEndpoint: f32, outputLowerEndpoint: f32, outputUpperEndpoint: f32) -> f32 {
157+ let inputProgress = (inputValue - inputLowerEndpoint);
158+ let inputInterval = (inputUpperEndpoint - inputLowerEndpoint);
159+ let progressPercentage = (inputProgress / inputInterval);
160+ let outputInterval = (outputUpperEndpoint - outputLowerEndpoint);
161+ let outputValue = (outputLowerEndpoint + (outputInterval * progressPercentage));
162+ return outputValue;
163+ }
164+
165+ fn interpolateBezier(inputValue: f32, outputLowerEndpoint: f32, outputUpperEndpoint: f32) -> f32 {
166+ return interpolate(inputValue, 0f, 1f, outputLowerEndpoint, outputUpperEndpoint);
167+ }
168+
169+ @group(0) @binding(0) var<uniform> animationProgressUniform: f32;
170+
171+ @group(0) @binding(1) var<uniform> stepRotationBuffer: f32;
172+
173+ fn rotate(coordinate: vec2f, angleInDegrees: f32) -> vec2f {
174+ let angle = ((angleInDegrees * 3.141592653589793f) / 180f);
175+ let x = coordinate.x;
176+ let y = coordinate.y;
177+ return vec2f(((x * cos(angle)) - (y * sin(angle))), ((x * sin(angle)) + (y * cos(angle))));
178+ }
179+
180+ @group(0) @binding(2) var<uniform> scaleBuffer: f32;
181+
182+ @group(0) @binding(3) var<uniform> aspectRatioBuffer: f32;
183+
184+ fn getZeroOffset() -> vec2f {
185+ let zeroXOffset = ((0.8660254037844386f * scaleBuffer) - (1f * aspectRatioBuffer));
186+ let zeroYOffset = (1f - scaleBuffer);
187+ return vec2f(zeroXOffset, zeroYOffset);
188+ }
189+
190+ fn instanceTransform(position: vec2f, instanceInfo_1: InstanceInfo) -> vec2f {
191+ var transformedPoint = (rotate((position * scaleBuffer), instanceInfo_1.rotationAngle) + (instanceInfo_1.offset + getZeroOffset()));
192+ return (mat2x2f((1f / aspectRatioBuffer), 0f, 0f, 1f) * transformedPoint);
193+ }
194+
195+ struct foregroundVertex_Output {
196+ @builtin(position) outPos: vec4f,
197+ }
198+
199+ struct foregroundVertex_Input {
200+ @builtin(vertex_index) vertexIndex: u32,
201+ @builtin(instance_index) instanceIndex: u32,
202+ }
203+
204+ @vertex fn foregroundVertex(_arg_0: foregroundVertex_Input) -> foregroundVertex_Output {
205+ var vertexPosition = originalVertices[_arg_0.vertexIndex];
206+ var calculatedPosition = (mat2x2f(0.5, 0, 0, 0.5) * vertexPosition);
207+ let instanceInfo_1 = (&instanceInfo[_arg_0.instanceIndex]);
208+ let angle = interpolateBezier(animationProgressUniform, 0f, stepRotationBuffer);
209+ let scaleFactor = animationProgressUniform;
210+ calculatedPosition = rotate(calculatedPosition, angle);
211+ calculatedPosition = (calculatedPosition * scaleFactor);
212+ var finalPosition = instanceTransform(calculatedPosition, (*instanceInfo_1));
213+ return foregroundVertex_Output(vec4f(finalPosition, 0f, 1f));
214+ }
215+
216+ @group(0) @binding(4) var<storage, read> shiftedColorsBuffer: array<vec4f, 3>;
217+
218+ @fragment fn foregroundFragment() -> @location(0) vec4f {
219+ var color = shiftedColorsBuffer[2i];
220+ return color;
221+ }"
222+ ` ) ;
22223 } ) ;
23224} ) ;
0 commit comments