How do I enable WebGL in headless chrome in Ubuntu?

This worked for me to get chrome to use osmesa sudo apt-get install libosmesa sudo ln -s /usr/lib/x86_64-linux-gnu/libOSMesa.so.6 /opt/google/chrome/libosmesa.so google-chrome –no-first-run –user-data-dir=~/chrome-stuff –use-gl=osmesa Warning: When running with osmesa the entire page is rendered with osmesa making it pretty slow. So, if there are tests you have that can run without WebGL you probably want to … Read more

Three.js/WebGL: Large spheres appear broken at intersection

The short answer, set your z near plane further away Change camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 0.1, 3500000); to var zNear = 1000; var zFar = 3500000; camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, zNear, zFar); Note: I don’t know if 1000 will work, if it doesn’t try 10000. A zBuffer, … Read more

How to write a web-based music visualizer?

Making something audio reactive is pretty simple. Here’s an open source site with lots audio reactive examples. As for how to do it you basically use the Web Audio API to stream the music and use its AnalyserNode to get audio data out. “use strict”; const ctx = document.querySelector(“canvas”).getContext(“2d”); ctx.fillText(“click to start”, 100, 75); ctx.canvas.addEventListener(‘click’, … Read more

Proper way to detect WebGL support?

The excellent Three library has, in fact, a mechanism for detecting the following: WebGL support File API support Workers support For WebGL, particularly, here is the code that is used: function webgl_support () { try { var canvas = document.createElement(‘canvas’); return !!window.WebGLRenderingContext && (canvas.getContext(‘webgl’) || canvas.getContext(‘experimental-webgl’)); } catch(e) { return false; } }; That code … Read more

Replicating MeshLambertMaterial Using ShaderMaterial ignores textures

three.js was designed to be easy to use, not easy to modify. This may change in the future… You need to set the material.defines like so: var defines = {}; defines[ “USE_MAP” ] = “”;. Then specify defines in the material constructor. var material = new THREE.ShaderMaterial({ name: “TerrainShader”, defines : defines, uniforms : shaderUniforms, … Read more