ragusa-it/ragusaitweb
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

fix: rendering issues on chrome for background effect

Browse Source
This commit is contained in:
Melvin Ragusa
2026-01-23 11:49:27 +01:00
parent 4955c41dc0
commit 4d8fc7ad85
3 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/effects/GradientBlinds.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react';
import { Renderer, Program, Mesh, Triangle } from 'ogl';
import { Renderer, Program, Mesh, Geometry } from 'ogl';
import './GradientBlinds.css';
export interface GradientBlindsProps {
@@ -60,8 +60,8 @@ const GradientBlinds: React.FC<GradientBlindsProps> = ({
const containerRef = useRef<HTMLDivElement | null>(null);
const rafRef = useRef<number | null>(null);
const programRef = useRef<Program | null>(null);
const meshRef = useRef<Mesh<Triangle> | null>(null);
const geometryRef = useRef<Triangle | null>(null);
const meshRef = useRef<Mesh | null>(null);
const geometryRef = useRef<Geometry | null>(null);
const rendererRef = useRef<Renderer | null>(null);
const mouseTargetRef = useRef<[number, number]>([0, 0]);
const lastTimeRef = useRef<number>(0);
@@ -98,7 +98,7 @@ void main() {
const fragment = `
#ifdef GL_ES
precision mediump float;
precision highp float;
#endif
uniform vec3 iResolution;
@@ -264,7 +264,13 @@ void main() {
});
programRef.current = program;
const geometry = new Triangle(gl);
// Create a quad (two triangles) to ensure full screen coverage without relying on a single large triangle
// which might face precision or clipping issues on some GPU/browser combinations.
const geometry = new Geometry(gl, {
position: { size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3]) },
uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) }
});
geometryRef.current = geometry;
const mesh = new Mesh(gl, { geometry, program });
meshRef.current = mesh;