Skip to content

Instantly share code, notes, and snippets.

@bryik

bryik/.block

Last active December 4, 2019 19:21
Show Gist options
  • Save bryik/a82893253ea55f401af114778bc5453b to your computer and use it in GitHub Desktop.
Save bryik/a82893253ea55f401af114778bc5453b to your computer and use it in GitHub Desktop.
Download ZIP
Anisotropic Filtering With and Without
Raw
.block
license: mit
Raw
readme.md

Anisotropic filtering really helps with grid textures, but right now the only way to use it in A-Frame is to muck about with three.js.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js"></script>
<a-scene antialias="true">
<!-- Camera -->
<a-entity position="0 1.6 -2">
<a-entity camera look-controls wasd-controls></a-entity>
</a-entity>
<a-entity bmfont-text="color: black; text: Aniosotropy = 16" position="-2.55 2.5 -4"></a-entity>
<a-plane id="planeWithAA" position="-50 -1.5 0" rotation="-90 0 0" height="100" width="100" material=""></a-plane>
<a-entity bmfont-text="color: black; text: Aniosotropy = 1" position="1 2.5 -4"></a-entity>
<a-plane position="50 -1.5 0" rotation="-90 0 0" height="100" width="100" material="src: url(https://cdn.rawgit.com/bryik/aframe-scatter-component/master/assets/grid.png); repeat: 100 100"></a-plane>
<a-sky color="grey"></a-sky>
</a-scene>
<script>
var plane = document.querySelector('#planeWithAA');
var planeMesh = plane.getObject3D('mesh');
var texture = new THREE.TextureLoader().load('https://cdn.rawgit.com/bryik/aframe-scatter-component/master/assets/grid.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.anisotropy = 16;
texture.repeat.set(100, 100);
var material = new THREE.MeshBasicMaterial({map: texture});
planeMesh.material = material;
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment