s0a
July 31, 2022, 5:03pm
1
I need help tracking down and resolving a bug. It’s greatly impacting my workflow.
I’ve filed a chromium bug (1321452 - chromium - An open-source project to help move the web forward. - Monorail ) on advise of people in the Discord server. I imagine this could be a ThreeJS bug. But it would be one that only affects Mac Intel in Chromium browsers starting with Mac OS release 11.6.4 – so there’s that.
Here is a video example (webgl bug on mac intel - YouTube ). I’m getting no love from the Chromium devs after many months. At a minimum, if anyone would mind replicating and up-voting, I would be eternally grateful.
If you believe you can help with this, please tell me how and what you would charge for such an endeavor.
Many thanks
1 Like
What happens if you import 3DBenchy.stl into the three.js editor ? Do you see the same glitch like with your application?
1 Like
s0a
July 31, 2022, 6:01pm
3
yes, the bug presents itself in the threejs editor with benchy on my intel macs, not on m1 macs. it happens in chrome and edge but not in firefox and safari on the same machine.
s0a
July 31, 2022, 6:01pm
4
this is on an intel mac in edge
this is on an m1 mac in edge
I remember now that the same issue was recently discussed at GitHub:
opened 09:02AM - 26 Apr 22 UTC
closed 03:23PM - 28 Apr 22 UTC
Device Issue
**Describe the bug**
I am working on a project in which I need to add an abil… ity to view stl files uploaded by users.
I followed some tutorials and examples, and in all of them I encountered an issue with rendering the stls. They look like that:
<img width="1392" alt="image" src="https://user-images.githubusercontent.com/69106412/165261983-4871dcd6-626e-4009-b8f8-0556201eb337.png">
This happens on Chrome.
On Safari it works normally.
Here is a link to the STL that you see in the screenshot:
https://storage.googleapis.com/ucloud-v3/ccab50f18fb14c91ccca300a.stl
I have tried it on other files, got the same resuilt.
**To Reproduce**
Just run the code below.
***Code***
```js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Stl Viewer</title>
<script>
function STLViewer(model, elementID) {
var elem = document.getElementById(elementID)
var camera = new THREE.PerspectiveCamera(70, elem.clientWidth / elem.clientHeight, 1, 1000)
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setSize(elem.clientWidth, elem.clientHeight)
elem.appendChild(renderer.domElement)
window.addEventListener(
'resize',
function () {
renderer.setSize(elem.clientWidth, elem.clientHeight)
camera.aspect = elem.clientWidth / elem.clientHeight
camera.updateProjectionMatrix()
},
false
)
var controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.rotateSpeed = 0.3
controls.dampingFactor = 0.1
controls.enableZoom = true
controls.autoRotate = false
controls.autoRotateSpeed = 0.75
var scene = new THREE.Scene()
scene.add(new THREE.HemisphereLight(0xffffff, 1.5))
new THREE.STLLoader().load(model, function (geometry) {
const material = new THREE.MeshPhongMaterial({ color: 0xaaaaaa, specular: 0x111111, shininess: 200 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
var middle = new THREE.Vector3()
geometry.computeBoundingBox()
geometry.boundingBox.getCenter(middle)
mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(-middle.x, -middle.y, -middle.z))
mesh.castShadow = false
mesh.receiveShadow = false
var largestDimension = Math.max(
geometry.boundingBox.max.x,
geometry.boundingBox.max.y,
geometry.boundingBox.max.z
)
camera.position.z = largestDimension * 1.5
var animate = function () {
requestAnimationFrame(animate)
controls.update()
renderer.render(scene, camera)
}
animate()
})
}
window.onload = function () {
STLViewer('https://storage.googleapis.com/ucloud-v3/ccab50f18fb14c91ccca300a.stl', 'model')
}
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script src="./lib/three.min.js"></script>
<script src="./lib/STLLoader.js"></script>
<script src="./lib/OrbitControls.js"></script>
<div id="model" style="width: 1500px; height: 1000px"></div>
</body>
</html>
```
I downloaded three.min.js, STLLoader.js and OrbitControls directly from the three.js repo:
https://github.com/mrdoob/three.js/blob/dev/build/three.min.js
https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/STLLoader.js
https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js
I tried also taking from master, same result.
**Expected behavior**
STL should simply render normally.
<img width="1284" alt="image" src="https://user-images.githubusercontent.com/69106412/165263782-26f89191-eadf-4942-970f-be7ac5e89587.png">
**Platform:**
- Device: Desktop
- OS: MacOS
- Browser: Chrome version 100.0.4896.127 (today's latest), Safari (15.3)
- Three.js version: [dev, r???]
The workaround is to use WebGL1Renderer on affected devices. It’s indeed a browser/device related bug.
1 Like
s0a
August 1, 2022, 6:50am
6
thanks. that points me in the direction of a workaround until this is fixed in Chromium.
Convert the STL into GLTF format with blender, that should solve the issue
system
August 30, 2022, 5:04pm
9
This topic was automatically closed after 30 days. New replies are no longer allowed.
