Skip to content
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

Examples: More module examples. #16827

Merged
merged 1 commit into from
Jun 18, 2019
Merged

Examples: More module examples. #16827

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 0 additions & 1 deletion examples/files.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,6 @@ var files = {
"webgldeferred_animation"
],
"webgl2": [
"webgl2_loader_gltf",
"webgl2_materials_texture2darray",
"webgl2_materials_texture3d",
"webgl2_multisampled_renderbuffers",
Expand Down
131 changes: 0 additions & 131 deletions examples/webgl2_loader_gltf.html
View file
Open in desktop

This file was deleted.

43 changes: 27 additions & 16 deletions examples/webgl2_materials_texture2darray.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,25 @@
<a href="https://www.codeproject.com/info/cpol10.aspx" target="_blank" rel="noopener">CPOL</a>
</div>

<script src="../build/three.js"></script>
<!--<script src="js/controls/OrbitControls.js"></script>-->

<script src="js/libs/jszip.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/WebGL.js"></script>

<script>
<script type="module">
import {
DataTexture2DArray,
FileLoader,
Mesh,
PerspectiveCamera,
PlaneBufferGeometry,
RedFormat,
Scene,
ShaderMaterial,
Vector2,
UnsignedByteType,
WebGLRenderer
} from "../build/three.module.js";

import Stats from './jsm/libs/stats.module.js';

if ( WEBGL.isWebGL2Available() === false ) {

Expand All @@ -84,40 +95,40 @@
var container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.z = 70;

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

// width 256, height 256, depth 109, 8-bit, zip archived raw data

new THREE.FileLoader()
new FileLoader()
.setResponseType( 'arraybuffer' )
.load( 'textures/3d/head256x256x109.zip', function ( data ) {

var zip = new JSZip( data );
var array = zip.files[ 'head256x256x109' ].asUint8Array();

var texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );
var texture = new DataTexture2DArray( array, 256, 256, 109 );

texture.format = THREE.RedFormat;
texture.type = THREE.UnsignedByteType;
texture.format = RedFormat;
texture.type = UnsignedByteType;

texture.needsUpdate = true;

var material = new THREE.ShaderMaterial( {
var material = new ShaderMaterial( {
uniforms: {
diffuse: { value: texture },
depth: { value: 0 },
size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
size: { value: new Vector2( planeWidth, planeHeight ) }
},
vertexShader: document.getElementById( 'vs' ).textContent.trim(),
fragmentShader: document.getElementById( 'fs' ).textContent.trim()
} );

var geometry = new THREE.PlaneBufferGeometry( planeWidth, planeHeight );
var geometry = new PlaneBufferGeometry( planeWidth, planeHeight );

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

scene.add( mesh );

Expand All @@ -128,7 +139,7 @@
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );

renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas, context: context } );
renderer = new WebGLRenderer( { antialias: true, canvas: canvas, context: context } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
Expand Down
75 changes: 42 additions & 33 deletions examples/webgl2_materials_texture3d.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,28 +13,37 @@
</div>
<div id="inset"></div>

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

<script src="js/controls/OrbitControls.js"></script>

<script src="js/misc/Volume.js"></script>
<script src="js/loaders/NRRDLoader.js"></script>
<script src="js/shaders/VolumeShader.js"></script>

<script src="js/WebGL.js"></script>
<script src="js/libs/gunzip.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>

<script>
<script type="module">
import {
BackSide,
BoxBufferGeometry,
DataTexture3D,
FloatType,
LinearFilter,
Mesh,
OrthographicCamera,
RedFormat,
Scene,
ShaderMaterial,
TextureLoader,
UniformsUtils,
WebGLRenderer
} from "../build/three.module.js";

import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { NRRDLoader } from './jsm/loaders/NRRDLoader.js';
import { VolumeRenderShader1 } from './jsm/shaders/VolumeShader.js';

if ( WEBGL.isWebGL2Available() === false ) {

document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );

}

var container,
renderer,
var renderer,
scene,
camera,
controls,
Expand All @@ -46,69 +55,69 @@

function init() {

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

// Create renderer
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
renderer = new WebGLRenderer( { canvas: canvas, context: context } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// Create camera (The volume renderer does not work very well with perspective yet)
var h = 512; // frustum height
var aspect = window.innerWidth / window.innerHeight;
camera = new THREE.OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
camera = new OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
camera.position.set( 0, 0, 128 );
camera.up.set( 0, 0, 1 ); // In our data, z is up

// Create controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.target.set( 64, 64, 128 );
controls.minZoom = 0.5;
controls.maxZoom = 4;
controls.update();

// scene.add( new THREE.AxesHelper( 128 ) );
// scene.add( new AxesHelper( 128 ) );

// Lighting is baked into the shader a.t.m.
// var dirLight = new THREE.DirectionalLight( 0xffffff );
// var dirLight = new DirectionalLight( 0xffffff );

// The gui for interaction
volconfig = { clim1: 0, clim2: 1, renderstyle: 'iso', isothreshold: 0.15, colormap: 'viridis' };
var gui = new dat.GUI();
var gui = new GUI();
gui.add( volconfig, 'clim1', 0, 1, 0.01 ).onChange( updateUniforms );
gui.add( volconfig, 'clim2', 0, 1, 0.01 ).onChange( updateUniforms );
gui.add( volconfig, 'colormap', { gray: 'gray', viridis: 'viridis' } ).onChange( updateUniforms );
gui.add( volconfig, 'renderstyle', { mip: 'mip', iso: 'iso' } ).onChange( updateUniforms );
gui.add( volconfig, 'isothreshold', 0, 1, 0.01 ).onChange( updateUniforms );

// Load the data ...
new THREE.NRRDLoader().load( "models/nrrd/stent.nrrd", function ( volume ) {
new NRRDLoader().load( "models/nrrd/stent.nrrd", function ( volume ) {

// Texture to hold the volume. We have scalars, so we put our data in the red channel.
// THREEJS will select R32F (33326) based on the RedFormat and FloatType.
// Also see https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE
// TODO: look the dtype up in the volume metadata
var texture = new THREE.DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
texture.format = THREE.RedFormat;
texture.type = THREE.FloatType;
texture.minFilter = texture.magFilter = THREE.LinearFilter;
var texture = new DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
texture.format = RedFormat;
texture.type = FloatType;
texture.minFilter = texture.magFilter = LinearFilter;
texture.unpackAlignment = 1;
texture.needsUpdate = true;

// Colormap textures
cmtextures = {
viridis: new THREE.TextureLoader().load( 'textures/cm_viridis.png', render ),
gray: new THREE.TextureLoader().load( 'textures/cm_gray.png', render )
viridis: new TextureLoader().load( 'textures/cm_viridis.png', render ),
gray: new TextureLoader().load( 'textures/cm_gray.png', render )
};

// Material
var shader = THREE.VolumeRenderShader1;
var shader = VolumeRenderShader1;

var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
var uniforms = UniformsUtils.clone( shader.uniforms );

uniforms[ "u_data" ].value = texture;
uniforms[ "u_size" ].value.set( volume.xLength, volume.yLength, volume.zLength );
Expand All @@ -117,18 +126,18 @@
uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];

material = new THREE.ShaderMaterial( {
material = new ShaderMaterial( {
uniforms: uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader,
side: THREE.BackSide // The volume shader uses the backface as its "reference point"
side: BackSide // The volume shader uses the backface as its "reference point"
} );

// Mesh
var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
var geometry = new BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
geometry.translate( volume.xLength / 2 - 0.5, volume.yLength / 2 - 0.5, volume.zLength / 2 - 0.5 );

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

render();
Expand Down
Loading