Skip to content

Commit

Permalink
Examples: More clean up. (#23243)
Browse files Browse the repository at this point in the history 
* Examples: More clean up.

* Examples: Use WebGL 2 in blending demo.
  • Loading branch information
@Mugen87
Mugen87 authored Jan 15, 2022
1 parent 721d79d commit 6f7a821
Show file tree
Hide file tree
Showing 7 changed files with 17 additions and 72 deletions.
Binary file modified examples/screenshots/webgl_loader_nrrd.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions examples/webgl_framebuffer_texture.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,7 @@

//

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setClearAlpha( 1 );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
Expand Down
2 changes: 1 addition & 1 deletion examples/webgl_lensflares.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@

// renderer

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding;
Expand Down
76 changes: 11 additions & 65 deletions examples/webgl_loader_nrrd.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
#inset {
width: 150px;
height: 150px;
background-color: transparent; /* or transparent; will show through only if renderer alpha: true */
border: none; /* or none; */
margin: 0;
padding: 0px;
position: absolute;
left: 20px;
bottom: 20px;
z-index: 100;
}
</style>
</head>

<body>
Expand All @@ -44,12 +30,7 @@
camera,
controls,
scene,
renderer,
container2,
renderer2,
camera2,
axes2,
scene2;
renderer;

init();
animate();
Expand All @@ -73,7 +54,7 @@
scene.add( dirLight );

const loader = new NRRDLoader();
loader.load( "models/nrrd/I.nrrd", function ( volume ) {
loader.load( 'models/nrrd/I.nrrd', function ( volume ) {

//box helper to see the extend of the volume
const geometry = new THREE.BoxGeometry( volume.xLength, volume.yLength, volume.zLength );
Expand All @@ -97,38 +78,38 @@
const sliceX = volume.extractSlice( 'x', Math.floor( volume.RASDimensions[ 0 ] / 2 ) );
scene.add( sliceX.mesh );

gui.add( sliceX, "index", 0, volume.RASDimensions[ 0 ], 1 ).name( "indexX" ).onChange( function () {
gui.add( sliceX, 'index', 0, volume.RASDimensions[ 0 ], 1 ).name( 'indexX' ).onChange( function () {

sliceX.repaint.call( sliceX );

} );
gui.add( sliceY, "index", 0, volume.RASDimensions[ 1 ], 1 ).name( "indexY" ).onChange( function () {
gui.add( sliceY, 'index', 0, volume.RASDimensions[ 1 ], 1 ).name( 'indexY' ).onChange( function () {

sliceY.repaint.call( sliceY );

} );
gui.add( sliceZ, "index", 0, volume.RASDimensions[ 2 ], 1 ).name( "indexZ" ).onChange( function () {
gui.add( sliceZ, 'index', 0, volume.RASDimensions[ 2 ], 1 ).name( 'indexZ' ).onChange( function () {

sliceZ.repaint.call( sliceZ );

} );

gui.add( volume, "lowerThreshold", volume.min, volume.max, 1 ).name( "Lower Threshold" ).onChange( function () {
gui.add( volume, 'lowerThreshold', volume.min, volume.max, 1 ).name( 'Lower Threshold' ).onChange( function () {

volume.repaintAllSlices();

} );
gui.add( volume, "upperThreshold", volume.min, volume.max, 1 ).name( "Upper Threshold" ).onChange( function () {
gui.add( volume, 'upperThreshold', volume.min, volume.max, 1 ).name( 'Upper Threshold' ).onChange( function () {

volume.repaintAllSlices();

} );
gui.add( volume, "windowLow", volume.min, volume.max, 1 ).name( "Window Low" ).onChange( function () {
gui.add( volume, 'windowLow', volume.min, volume.max, 1 ).name( 'Window Low' ).onChange( function () {

volume.repaintAllSlices();

} );
gui.add( volume, "windowHigh", volume.min, volume.max, 1 ).name( "Window High" ).onChange( function () {
gui.add( volume, 'windowHigh', volume.min, volume.max, 1 ).name( 'Window High' ).onChange( function () {

volume.repaintAllSlices();

Expand All @@ -139,7 +120,7 @@
const vtkmaterial = new THREE.MeshLambertMaterial( { wireframe: false, side: THREE.DoubleSide, color: 0xff0000 } );

const vtkloader = new VTKLoader();
vtkloader.load( "models/vtk/liver.vtk", function ( geometry ) {
vtkloader.load( 'models/vtk/liver.vtk', function ( geometry ) {

geometry.computeVertexNormals();

Expand All @@ -148,7 +129,7 @@
const visibilityControl = {
visible: true
};
gui.add( visibilityControl, "visible" ).name( "Model Visible" ).onChange( function () {
gui.add( visibilityControl, 'visible' ).name( 'Model Visible' ).onChange( function () {

mesh.visible = visibilityControl.visible;
renderer.render( scene, camera );
Expand Down Expand Up @@ -178,8 +159,6 @@

const gui = new GUI();

setupInset();

window.addEventListener( 'resize', onWindowResize );

}
Expand All @@ -201,45 +180,12 @@

controls.update();

//copy position of the camera into inset
camera2.position.copy( camera.position );
camera2.position.sub( controls.target );
camera2.position.setLength( 300 );
camera2.lookAt( scene2.position );

renderer.render( scene, camera );
renderer2.render( scene2, camera2 );

stats.update();

}

function setupInset() {

const insetWidth = 150, insetHeight = 150;
container2 = document.getElementById( 'inset' );
container2.width = insetWidth;
container2.height = insetHeight;

// renderer
renderer2 = new THREE.WebGLRenderer( { alpha: true } );
renderer2.setClearColor( 0x000000, 0 );
renderer2.setSize( insetWidth, insetHeight );
container2.appendChild( renderer2.domElement );

// scene
scene2 = new THREE.Scene();

// camera
camera2 = new THREE.PerspectiveCamera( 50, insetWidth / insetHeight, 1, 1000 );
camera2.up = camera.up; // important!

// axes
axes2 = new THREE.AxesHelper( 100 );
scene2.add( axes2 );

}

</script>

</body>
Expand Down
2 changes: 1 addition & 1 deletion examples/webgl_materials_blending.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@
}

const canvas = document.createElement( 'canvas' );
const context = canvas.getContext( 'webgl', { alpha: false } ); // TODO Remove workaround
const context = canvas.getContext( 'webgl2', { alpha: false } ); // TODO Remove workaround

// RENDERER

Expand Down
2 changes: 1 addition & 1 deletion examples/webgl_materials_blending_custom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@
// RENDERER

const canvas = document.createElement( 'canvas' );
const context = canvas.getContext( 'webgl', { alpha: false } ); // TODO Remove workaround
const context = canvas.getContext( 'webgl2', { alpha: false } ); // TODO Remove workaround

renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
renderer.setPixelRatio( window.devicePixelRatio );
Expand Down
4 changes: 2 additions & 2 deletions examples/webxr_vr_layers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@

//

renderer = new THREE.WebGLRenderer( { antialias: false, alpha: true } );
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearAlpha( 1 );
renderer.setClearColor( new THREE.Color( 0 ), 0 );
Expand Down Expand Up @@ -375,7 +375,7 @@
session.renderState.layers[ 0 ]
]
} );

video.play();

} );
Expand Down

0 comments on commit 6f7a821

Please sign in to comment.