ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

made edges uniform

Browse Source
This commit is contained in:
ByteDice
2025-01-05 21:57:42 +01:00
parent 8341f176b2
commit b208a90fa0
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
synthwaveEffect.js
+22 -16
View File
@@ -41,12 +41,13 @@ const mesh = new THREE.Mesh(geometry, material)
//scene.add(mesh) //scene.add(mesh)
// "toward sun"
camera.position.z = 5
camera.position.y = 2
/* camera.position.z = 5 // top down
camera.position.y = 2 */ /* camera.position.y = 5
camera.lookAt(0, 0, 0) */
camera.position.y = 5
camera.lookAt(0, 0, 0)
function hillCurve(x, width) { function hillCurve(x, width) {
return (Math.sin(Math.PI * (x + 1)) + 1) ** width return (Math.sin(Math.PI * (x + 1)) + 1) ** width
@@ -145,29 +146,32 @@ function generateHillMat(segments, width, length) {
uniform vec3 edgeColor; uniform vec3 edgeColor;
uniform vec3 centerColor; uniform vec3 centerColor;
uniform int segmentCount; uniform int segmentCount;
uniform float aspectRatio; uniform vec2 resolution;
void main() { void main() {
vec2 uv = vUv; vec2 uv = vUv;
uv.x = fract(uv.x * float(segmentCount)); uv.x = fract(uv.x * float(segmentCount));
// Define the edge threshold float edgeThresholdX = 0.1;
float edgeThreshold = 0.1; float edgeThresholdY = 0.1;
if (resolution.x > resolution.y) {
edgeThresholdX *= resolution.y / resolution.x;
}
else {
edgeThresholdY *= resolution.x / resolution.y;
}
// Check for the top, bottom, and sides (not including corners as edges)
float isEdge = 0.0; float isEdge = 0.0;
// Check top and bottom edges if (uv.y < edgeThresholdY || uv.y > (1.0 - edgeThresholdY)) {
if (uv.y < edgeThreshold || uv.y > (1.0 - edgeThreshold)) {
isEdge = 1.0; isEdge = 1.0;
} }
// Check side edges, but exclude corners if (uv.x < edgeThresholdX || uv.x > (1.0 - edgeThresholdX)) {
if (uv.x < edgeThreshold || uv.x > (1.0 - edgeThreshold)) {
isEdge = 1.0; isEdge = 1.0;
} }
// Mix the colors based on whether it's an edge
vec3 color = mix(centerColor, edgeColor, isEdge); vec3 color = mix(centerColor, edgeColor, isEdge);
gl_FragColor = vec4(color, 1.0); gl_FragColor = vec4(color, 1.0);
@@ -181,10 +185,12 @@ function generateHillMat(segments, width, length) {
edgeColor: { value: new THREE.Color(0x00b4f0) }, edgeColor: { value: new THREE.Color(0x00b4f0) },
centerColor: { value: new THREE.Color(0x323232) }, centerColor: { value: new THREE.Color(0x323232) },
segmentCount: { value: segments }, segmentCount: { value: segments },
aspectRatio: { value: (width / segments) / length } resolution: { value: [width / segments, length] }
} }
}) })
console.log([width / segments, length])
return material return material
} }
@@ -195,7 +201,7 @@ function animate() {
renderer.render(scene, camera) renderer.render(scene, camera)
} }
let newHill = generateHill(camera.aspect * 10, 2, 25, 4) let newHill = generateHill(camera.aspect * 10, 2, 25, 4, 0)
scene.add(newHill.mesh) scene.add(newHill.mesh)
scene.add(generateHill(camera.aspect * 10, 2, 25, 4, -2, newHill.verts).mesh) scene.add(generateHill(camera.aspect * 10, 2, 25, 4, -2, newHill.verts).mesh)