Polarised Safety Glasses
63 Items
$69.99 AUD
4.8 (54)
Get notified via email or SMS when this product is back in stock
$392.50 AUD
$392.50 AUD
$392.50 AUD
$69.99 AUD
4.9 (884)
Get notified via email or SMS when this product is back in stock
$74.99 AUD
4.9 (773)
Get notified via email or SMS when this product is back in stock
$119.99 AUD
4.8 (41)
Get notified via email or SMS when this product is back in stock
$74.99 AUD
4.9 (2102)
Get notified via email or SMS when this product is back in stock
$69.99 AUD
4.9 (884)
Get notified via email or SMS when this product is back in stock
$69.99 AUD
4.8 (54)
Get notified via email or SMS when this product is back in stock
$69.99 AUD
4.9 (884)
Get notified via email or SMS when this product is back in stock
$392.50 AUD
$69.99 AUD
5.0 (1)
Get notified via email or SMS when this product is back in stock
$69.99 AUD
5.0 (1)
Get notified via email or SMS when this product is back in stock
You've viewed 63 of 63 products
${product.title}
`;
product_element.addEventListener("click", () => {
this.load_new_product(product_element);
});
document.querySelector(".ssvto-products-inner").appendChild(product_element);
}
document.querySelector(".ssvto-mobile-product-prev").addEventListener("click", () => {
this.prev();
});
document.querySelector(".ssvto-mobile-product-next").addEventListener("click", () => {
this.next();
});
[...document.querySelectorAll(".ssvto-add-to-cart-button")].forEach((el) =>
el.addEventListener("click", async () => {
const selected_product = document.querySelector(".ssvto-product.selected");
this.product_index = Array.from(selected_product.parentElement.children).indexOf(selected_product);
const product_data = ssto_config.products[product_index];
if (ssto_config.on_add_to_cart) {
this.loading.style.display = "flex";
await ssto_config.on_add_to_cart(product_data);
this.loading.style.display = "none";
}
})
);
window.addEventListener("resize", () => {
this.handleResize();
this.adjustProductView();
});
window.addEventListener("orientationchange", () => {
this.handleResize();
this.adjustProductView();
});
document.getElementById("ssvto-accept-button").onclick = function () {
self.set_cookie("ssto_accept", "yes");
document.querySelector(".ssvto-accept").style.display = "none";
document.querySelector(".ssvto-app-init").style.display = "flex";
self.run_ssvto();
window.ss_ab?.("signal", { signal: "virtual-try-on-terms-accepted" });
};
document.getElementById("ssvto-decline-button").onclick = function () {
self.set_cookie("ssto_accept", "no");
document.body.removeChild(dialog);
document.body.classList.remove("noscroll");
window.ss_ab?.("signal", { signal: "virtual-try-on-terms-declined" });
};
document.getElementById("ssvto-init-cancel-button").onclick = function () {
if (self.webcamRunning) self.webcamRunning = false;
if (self.stream) self.stream.getTracks().forEach((track) => track.stop());
document.body.removeChild(dialog);
document.body.classList.remove("noscroll");
};
if (this.get_cookie("ssto_accept") === "yes") {
document.querySelector(".ssvto-accept").style.display = "none";
document.querySelector(".ssvto-app-init").style.display = "flex";
this.run_ssvto();
} else {
document.querySelector(".ssvto-accept").style.display = "flex";
document.querySelector(".ssvto-app").style.display = "none";
}
// touch events
this.touchstartX = 0;
this.touchendX = 0;
this.canvas_element.addEventListener("touchstart", (e) => {
this.touchstartX = e.changedTouches[0].screenX;
});
this.canvas_element.addEventListener("touchend", (e) => {
this.touchendX = e.changedTouches[0].screenX;
this.checkDirection(e);
});
// controls (unchanged)
document.getElementById("sstvto-control-x-shift").addEventListener("change", (e) => {
if (this.model_scene) this.model_scene.position.x = parseFloat(e.target.value);
});
document.getElementById("sstvto-control-y-shift").addEventListener("change", (e) => {
if (this.model_scene) this.model_scene.position.y = parseFloat(e.target.value);
});
document.getElementById("sstvto-control-z-shift").addEventListener("change", (e) => {
if (this.model_scene) this.model_scene.position.z = parseFloat(e.target.value);
});
document.getElementById("sstvto-control-x-tilt").addEventListener("change", (e) => {
if (this.model_scene) this.model_scene.rotation.x = parseFloat(e.target.value);
});
document.getElementById("sstvto-control-scale").addEventListener("change", (e) => {
if (this.model_scene) {
const s = parseFloat(e.target.value);
this.model_scene.scale.set(s, s, s);
}
});
const btn = (id, fn) => document.getElementById(id).addEventListener("click", fn);
btn("sstvto-control-x-shift-plus-one", () => this._bumpPos("x", 1, "sstvto-control-x-shift"));
btn("sstvto-control-x-shift-plus-point-one", () => this._bumpPos("x", 0.1, "sstvto-control-x-shift"));
btn("sstvto-control-x-shift-minus-one", () => this._bumpPos("x", -1, "sstvto-control-x-shift"));
btn("sstvto-control-x-shift-minus-point-one", () => this._bumpPos("x", -0.1, "sstvto-control-x-shift"));
btn("sstvto-control-y-shift-plus-one", () => this._bumpPos("y", 1, "sstvto-control-y-shift"));
btn("sstvto-control-y-shift-plus-point-one", () => this._bumpPos("y", 0.1, "sstvto-control-y-shift"));
btn("sstvto-control-y-shift-minus-one", () => this._bumpPos("y", -1, "sstvto-control-y-shift"));
btn("sstvto-control-y-shift-minus-point-one", () => this._bumpPos("y", -0.1, "sstvto-control-y-shift"));
btn("sstvto-control-z-shift-plus-one", () => this._bumpPos("z", 1, "sstvto-control-z-shift"));
btn("sstvto-control-z-shift-plus-point-one", () => this._bumpPos("z", 0.1, "sstvto-control-z-shift"));
btn("sstvto-control-z-shift-minus-one", () => this._bumpPos("z", -1, "sstvto-control-z-shift"));
btn("sstvto-control-z-shift-minus-point-one", () => this._bumpPos("z", -0.1, "sstvto-control-z-shift"));
btn("sstvto-control-x-tilt-plus-one", () => this._bumpRotX(1, "sstvto-control-x-tilt"));
btn("sstvto-control-x-tilt-plus-point-one", () => this._bumpRotX(0.1, "sstvto-control-x-tilt"));
btn("sstvto-control-x-tilt-minus-one", () => this._bumpRotX(-1, "sstvto-control-x-tilt"));
btn("sstvto-control-x-tilt-minus-point-one", () => this._bumpRotX(-0.1, "sstvto-control-x-tilt"));
btn("sstvto-control-scale-plus-one", () => this._bumpScale(1, "sstvto-control-scale"));
btn("sstvto-control-scale-plus-point-one", () => this._bumpScale(0.1, "sstvto-control-scale"));
btn("sstvto-control-scale-minus-one", () => this._bumpScale(-1, "sstvto-control-scale"));
btn("sstvto-control-scale-minus-point-one", () => this._bumpScale(-0.1, "sstvto-control-scale"));
document.getElementById("ssvto-controls-button").addEventListener("click", () => {
document.getElementById("ssvto-controls").style.display = "flex";
document.getElementById("ssvto-controls-button").style.display = "none";
});
document.getElementById("ssvvt-control-save-button").addEventListener("click", async () => {
const model = this.ssto_config.products[this.product_index];
const adjustments = {
x_shift: document.getElementById("sstvto-control-x-shift").value,
y_shift: document.getElementById("sstvto-control-y-shift").value,
z_shift: document.getElementById("sstvto-control-z-shift").value,
x_tilt: document.getElementById("sstvto-control-x-tilt").value,
scale: document.getElementById("sstvto-control-scale").value,
};
model.adjustments_json = JSON.stringify(adjustments);
await this.save_adjustments(model);
});
}
_bumpPos(axis, delta, inputId) {
if (!this.model_scene) return;
this.model_scene.position[axis] += delta;
document.getElementById(inputId).value = this.model_scene.position[axis];
}
_bumpRotX(delta, inputId) {
if (!this.model_scene) return;
this.model_scene.rotation.x += delta;
document.getElementById(inputId).value = this.model_scene.rotation.x;
}
_bumpScale(delta, inputId) {
if (!this.model_scene) return;
const s = this.model_scene.scale.x + delta;
this.model_scene.scale.set(s, s, s);
document.getElementById(inputId).value = s;
}
async save_adjustments(model) {
this.loading.style.display = "flex";
const response = await fetch("https://portal.safestyle.com.au/service/ssvto-adjustments", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(model),
});
await response.json();
this.loading.style.display = "none";
}
run_ssvto() {
const self = this;
this.createFaceLandmarker().then(() => {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
this.loading.style.display = "none";
document.querySelector(".ssvto-app-init").innerHTML =
'Unable to access camera in this browser.
';
document.getElementById("ssvto-init-cancel-button").onclick = function () {
if (self.webcamRunning) self.webcamRunning = false;
if (self.stream) self.stream.getTracks().forEach((track) => track.stop());
const container = document.querySelector(".ssvto-container");
if (container) document.body.removeChild(container);
document.body.classList.remove("noscroll");
};
return;
}
navigator.mediaDevices
.getUserMedia({ video: { width: 640 } })
.then((stream) => {
this.stream = stream;
this.video.srcObject = stream;
this.webcamRunning = true;
document.querySelector(".ssvto-app-init").style.display = "none";
document.querySelector(".ssvto-app").style.display = "flex";
let started = false;
const start_video_pipeline = async () => {
if (started) return;
started = true;
// Hide DOM video; we render it inside WebGL
this.video.style.display = "none";
// Create video background once we have dimensions
this.initVideoBackground();
// initial sizing
this.handleResize();
self.predictWebcam();
this.webcam_running = true;
this.check_disable_loader();
};
self.video.addEventListener("loadeddata", start_video_pipeline, {
once: true,
});
self.video.addEventListener("loadedmetadata", start_video_pipeline, {
once: true,
});
// Explicit play helps some desktop browsers start stream decoding reliably.
this.video.play().catch((error) => {
console.error("SSTO video.play() failed", error);
});
})
.catch((error) => {
console.error("SSTO getUserMedia failed", error);
this.loading.style.display = "none";
document.querySelector(".ssvto-app-init").innerHTML =
'Unable to access camera.
Check browser camera permissions and try again.
';
document.getElementById("ssvto-init-cancel-button").onclick = function () {
if (self.webcamRunning) self.webcamRunning = false;
if (self.stream) self.stream.getTracks().forEach((track) => track.stop());
const container = document.querySelector(".ssvto-container");
if (container) document.body.removeChild(container);
document.body.classList.remove("noscroll");
};
});
// keep your original behavior
this.webcamRunning = false;
this.loader = new GLTFLoader();
this.DRACOLoader = new DRACOLoader();
this.DRACOLoader.setDecoderPath("https://www.gstatic.com/draco/v1/decoders/");
this.loader.setDRACOLoader(this.DRACOLoader);
// Foreground scene
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({
canvas: this.canvas_element,
alpha: false, // camera is in-canvas now
antialias: true,
});
const environment = new RoomEnvironment();
const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
this.renderer.toneMappingExposure = 0.5;
this.scene.environment = pmremGenerator.fromScene(environment).texture;
this.renderer.outputEncoding = THREE.sRGBEncoding;
this.renderer.localClippingEnabled = true;
this.faceGroup = new THREE.Group();
this.faceGroup.matrixAutoUpdate = false;
this.scene.add(this.faceGroup);
this.clipPlaneVector = new THREE.Vector3(0, 0, 1);
this.clipPlane = new THREE.Plane(this.clipPlaneVector, 84);
this.clipPlanes = [this.clipPlane];
const model = this.ssto_config.products[this.product_index];
this.load_model(model);
});
}
// ----- NEW: WebGL background video compositing -----
// DROP-IN: replace your current initVideoBackground() with this version.
// It fixes the “lighter” camera by bypassing tone mapping on the background
// and using sRGB encoding for the video texture (Three r129 compatible).
initVideoBackground() {
this.bgScene = new THREE.Scene();
this.bgCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
this.videoTexture = new THREE.VideoTexture(this.video);
this.videoTexture.minFilter = THREE.LinearFilter;
this.videoTexture.magFilter = THREE.LinearFilter;
this.videoTexture.generateMipmaps = false;
this.videoTexture.wrapS = THREE.ClampToEdgeWrapping;
this.videoTexture.wrapT = THREE.ClampToEdgeWrapping;
// ✅ helps match DOM Check browser camera permissions and try again.
Polarised Safety Glasses
Shop the ultimate polarised safety glasses. SafeStyle's polarised safety glasses reduce glare from reflective surfaces whilst blocking the sun's harsh UV rays.
Polarised light is has been filtered to vibrate in a single direction. This is how polarised lenses work, and this minimises glare, protects your eyes and improves visibility.
