Improved facial mesh renderer with lighting depth + optimized texture system
// ==UserScript==
// @name Omoggle Canvas Overlay (Hyper Mesh v23)
// @namespace http://tampermonkey.net/
// @version 23.0
// @description Improved facial mesh renderer with lighting depth + optimized texture system
// @author Alex
// @match *://*.omoggle.com/*
// @grant none
// @run-at document-start
// ==/UserScript==
(() => {
'use strict';
let enabled = false;
// ===== MAIN CANVAS =====
const canvas = document.createElement("canvas");
canvas.width = 640;
canvas.height = 480;
const ctx = canvas.getContext("2d", { alpha: false });
// ===== PREBUILT SKIN NOISE (IMPORTANT OPTIMIZATION) =====
const noiseCanvas = document.createElement("canvas");
noiseCanvas.width = 640;
noiseCanvas.height = 480;
const nctx = noiseCanvas.getContext("2d");
(function generateNoise() {
const img = nctx.createImageData(noiseCanvas.width, noiseCanvas.height);
const d = img.data;
for (let i = 0; i < d.length; i += 4) {
const v = (Math.random() * 22) | 0;
d[i] = v;
d[i + 1] = v;
d[i + 2] = v;
d[i + 3] = 14; // subtle grain
}
nctx.putImageData(img, 0, 0);
})();
let raf = null;
// ===== RENDER LOOP =====
function render(t) {
if (!enabled) return;
const time = t * 0.001;
const cx = 320 + Math.sin(time * 0.6) * 1.2;
const cy = 212 + Math.cos(time * 0.8) * 1.0;
// ===== BACKGROUND =====
const bg = ctx.createLinearGradient(0, 0, 0, canvas.height);
bg.addColorStop(0, "#060606");
bg.addColorStop(1, "#000");
ctx.fillStyle = bg;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// ===== SKIN BASE LIGHTING =====
const skin = ctx.createRadialGradient(cx - 25, cy - 50, 20, cx, cy, 180);
skin.addColorStop(0, "#f3caa2");
skin.addColorStop(0.45, "#b07a55");
skin.addColorStop(1, "#2a1a12");
ctx.fillStyle = skin;
ctx.beginPath();
ctx.ellipse(cx, cy + 12, 88, 140, 0, 0, Math.PI * 2);
ctx.fill();
// ===== APPLY PREBUILT NOISE (FAST TEXTURE) =====
ctx.drawImage(noiseCanvas, 0, 0);
// ===== CHEEK SHADING =====
const cheekShadow = ctx.createRadialGradient(cx - 45, cy + 20, 10, cx - 45, cy + 20, 85);
cheekShadow.addColorStop(0, "rgba(0,0,0,0.22)");
cheekShadow.addColorStop(1, "rgba(0,0,0,0)");
ctx.fillStyle = cheekShadow;
ctx.beginPath();
ctx.ellipse(cx - 45, cy + 30, 40, 60, 0, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.ellipse(cx + 45, cy + 30, 40, 60, 0, 0, Math.PI * 2);
ctx.fill();
// ===== EYES (REALISTIC DEPTH) =====
const drawEye = (side) => {
const ex = cx + side * 52;
const ey = cy - 18;
// socket
ctx.fillStyle = "rgba(0,0,0,0.35)";
ctx.beginPath();
ctx.ellipse(ex, ey, 22, 10, side * 0.2, 0, Math.PI * 2);
ctx.fill();
// eyeball
ctx.fillStyle = "#f2f2f2";
ctx.beginPath();
ctx.ellipse(ex, ey, 18, 7, side * 0.15, 0, Math.PI * 2);
ctx.fill();
// pupil
ctx.fillStyle = "#111";
ctx.beginPath();
ctx.arc(ex + side * 2, ey, 3, 0, Math.PI * 2);
ctx.fill();
// highlight
ctx.fillStyle = "rgba(255,255,255,0.7)";
ctx.beginPath();
ctx.arc(ex - 3, ey - 2, 1.5, 0, Math.PI * 2);
ctx.fill();
};
drawEye(-1);
drawEye(1);
// ===== NOSE (soft gradient depth) =====
const nose = ctx.createLinearGradient(cx, cy + 10, cx, cy + 60);
nose.addColorStop(0, "rgba(0,0,0,0.15)");
nose.addColorStop(1, "rgba(0,0,0,0.45)");
ctx.strokeStyle = nose;
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(cx, cy + 18);
ctx.lineTo(cx - 4, cy + 40);
ctx.lineTo(cx + 2, cy + 54);
ctx.stroke();
// ===== MOUTH =====
ctx.strokeStyle = "rgba(0,0,0,0.75)";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(cx - 30, cy + 48);
ctx.quadraticCurveTo(cx, cy + 44, cx + 30, cy + 48);
ctx.stroke();
ctx.strokeStyle = "rgba(255,255,255,0.08)";
ctx.beginPath();
ctx.moveTo(cx - 26, cy + 52);
ctx.quadraticCurveTo(cx, cy + 56, cx + 26, cy + 52);
ctx.stroke();
raf = requestAnimationFrame(render);
}
function start() {
if (!raf) raf = requestAnimationFrame(render);
}
function stop() {
if (raf) cancelAnimationFrame(raf);
raf = null;
}
// ===== WEBGL HOOK =====
function hookGL(proto) {
const original = proto.texImage2D;
proto.texImage2D = function (...args) {
const last = args[args.length - 1];
if (enabled && last instanceof HTMLVideoElement) {
const gl = this;
const t = performance.now();
render(t);
return original.call(
gl,
args[0], args[1], args[2],
args[3], args[4],
canvas
);
}
return original.apply(this, args);
};
}
if (window.WebGLRenderingContext) hookGL(WebGLRenderingContext.prototype);
if (window.WebGL2RenderingContext) hookGL(WebGL2RenderingContext.prototype);
// ===== UI =====
function injectUI() {
if (document.getElementById("overlay-ui")) return;
const ui = document.createElement("div");
ui.id = "overlay-ui";
Object.assign(ui.style, {
position: "fixed",
top: "20px",
left: "20px",
zIndex: 9999999,
background: "#000",
border: "2px solid #00ff88",
borderRadius: "12px",
padding: "12px",
width: "240px",
fontFamily: "monospace",
color: "#00ff88"
});
const title = document.createElement("div");
title.textContent = "Hyper Mesh Renderer";
title.style.marginBottom = "10px";
const btn = document.createElement("button");
btn.textContent = "Enable";
btn.style.cssText = `
width: 100%;
padding: 10px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
background: #00ff88;
color: #000;
`;
btn.onclick = () => {
enabled = !enabled;
if (enabled) {
btn.textContent = "Disable";
btn.style.background = "#fff";
start();
} else {
btn.textContent = "Enable";
btn.style.background = "#00ff88";
stop();
}
};
ui.appendChild(title);
ui.appendChild(btn);
document.body.appendChild(ui);
}
const observer = new MutationObserver(injectUI);
observer.observe(document.documentElement, { childList: true, subtree: true });
})();