Skip to content

Add BasisTextureLoader example #16553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 28, 2019
Merged

Add BasisTextureLoader example #16553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a33a47
Add BasisTextureLoader example
takahirox May 24, 2019
76002f1
Add gamma configuration to BasisTextureLoader example
takahirox May 27, 2019
9767cf5
Remove texture.flipY from BasisTextureLoader
takahirox May 27, 2019
c66f949
Move texture.encoding configuration from BasisTextureLoader to its ex…
takahirox May 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/files.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ var files = {
"webgl_loader_sea3d_sound",
"webgl_loader_stl",
"webgl_loader_svg",
"webgl_loader_texture_basis",
"webgl_loader_texture_dds",
"webgl_loader_texture_exr",
"webgl_loader_texture_hdr",
Expand Down
2 changes: 0 additions & 2 deletions examples/js/loaders/BasisTextureLoader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,7 @@ THREE.BasisTextureLoader = class BasisTextureLoader {

texture.minFilter = THREE.LinearMipMapLinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.encoding = THREE.sRGBEncoding;
texture.generateMipmaps = false;
texture.flipY = false;
texture.needsUpdate = true;

return texture;
Expand Down
Binary file added examples/textures/compressed/kodim20.basis
View file
Open in desktop
Binary file not shown.
112 changes: 112 additions & 0 deletions examples/webgl_loader_texture_basis.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - basis texture loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
margin: 0px;
background-color: #050505;
color: #fff;
overflow: hidden;
}

a { color: #e00 }

#info {
position: absolute;
top: 0px;
width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
z-index: 1000;
}
</style>
</head>
<body>

<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - basis texture loader<br />
<a href="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/binomialLLC/basis_universal" target="_blank">Basis Universal GPU Texture Codec</a>
</div>

<script src="../build/three.js"></script>
<script src="js/loaders/BasisTextureLoader.js"></script>

<script>

var camera, scene, renderer;
var mesh;

var clock = new THREE.Clock();

init();
animate();

function init() {

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;
document.body.appendChild( renderer.domElement );
Copy link
Collaborator

@donmccurdy donmccurdy May 24, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BasisTextureLoader currently marks all textures as sRGB:

three.js/examples/js/loaders/BasisTextureLoader.js

Lines 144 to 151 in b39de78

texture.minFilter = THREE.LinearMipMapLinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.encoding = THREE.sRGBEncoding;
texture.generateMipmaps = false;
texture.flipY = false;
texture.needsUpdate = true;
return texture;

We should probably remove that, and the flipY=false preset, which both made sense in the original Basis example but not so much in a general-purpose texture loader.

My suggestion for this PR would be:

  • Remove flipY=false and encoding=sRGBEncoding from the loader
  • Add encoding=sRGBEncoding after loading the texture (in the example itself)
  • set renderer.gammaOutput=true, renderer.gammaFactor=2.2 as best practice.

Copy link
Collaborator Author

@takahirox takahirox May 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove flipY = false from the loader

flipY = true doesn't seem to work for compressed texture and default CompressedTexture.flipY is false. Removing from the loader looks right direction. Updated.

Move encoding = sRGBEncoding into example

Updated.

renderer.gammaOutput = true, renderer.gammaFactor=2.2

Thanks, I missed them. Updated.


camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;

scene = new THREE.Scene();

var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial();

mesh = new THREE.Mesh( geometry, material );

scene.add( mesh );

var loader = new THREE.BasisTextureLoader();
loader.setTranscoderPath( 'js/libs/basis/' );
loader.detectSupport( renderer );

loader.load( 'textures/compressed/kodim20.basis', function ( texture ) {

texture.encoding = THREE.sRGBEncoding;
material.map = texture;
material.needsUpdate = true;

} );

window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

requestAnimationFrame( animate );

var delta = clock.getDelta() * 0.5;

mesh.rotation.x += delta;
mesh.rotation.y += delta;

renderer.render( scene, camera );

}

</script>

</body>
</html>