<!DOCTYPE html>

<!-- Ported from the OpenGL Samples Pack https://github.com/g-truc/ogl-samples/blob/master/tests/gl-320-texture-3d.cpp -->

<html lang="en">

<head>

<title>WebGL 2 Samples - texture_3d</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<link rel="stylesheet" href="style.css">

<script src="utility.js"></script>

<script src="third-party/gl-matrix-min.js"></script>

<script src="third-party/noise3D.js"></script>

</head>

<body>

<div id="info">WebGL 2 Samples - texture_3d</div>

<p id="description">

This sample demonstrates creating a custom 3D texture from simplex noise.

</p>

<!-- WebGL 2 shaders.

This section is adapted from Example 6.15 and 6.16,

OpenGL® Programming Guide: The Official Guide to Learning OpenGL®, Version 4.3,

Dave Shreiner, Graham Sellers

-->

<script id="vs" type="x-shader/x-vertex">

#version 300 es

#define POSITION_LOCATION 0

#define TEXCOORD_LOCATION 1

precision highp float;

precision highp int;

layout(location = POSITION_LOCATION) in vec2 position;

layout(location = TEXCOORD_LOCATION) in vec2 in_texcoord;

// Output 3D texture coordinate after transformation

out vec3 v_texcoord;

// Matrix to transform the texture coordinates into 3D space

uniform mat4 orientation;

void main()

{

// Multiply the texture coordinate by the transformation

// matrix to place it into 3D space

v_texcoord = (orientation * vec4(in_texcoord - vec2(0.5, 0.5), 0.5, 1.0)).stp;

gl_Position = vec4(position, 0.0, 1.0);

}

</script>

<script id="fs" type="x-shader/x-fragment">

#version 300 es

precision highp float;

precision highp int;

precision highp sampler3D;

uniform sampler3D diffuse;

in vec3 v_texcoord;

out vec4 color;

void main()

{

color = texture(diffuse, v_texcoord);

}

</script>

<script>

(function() {

'use strict';

var canvas = document.createElement('canvas');

canvas.width = Math.min(window.innerWidth, window.innerHeight);

canvas.height = canvas.width;

document.body.appendChild(canvas);

var gl = canvas.getContext( 'webgl2', { antialias: false } );

var isWebGL2 = !!gl;

if(!isWebGL2) {

document.getElementById('info').innerHTML = 'WebGL 2 is not available. See <a href="https://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">How to get a WebGL 2 implementation</a>';

return;

}

// -- Divide viewport

var windowSize = {

x: canvas.width,

y: canvas.height

};

var Corners = {

TOP_LEFT: 0,

TOP_RIGHT: 1,

BOTTOM_RIGHT: 2,

BOTTOM_LEFT: 3,

MAX: 4

};

var viewport = new Array(Corners.MAX);

viewport[Corners.BOTTOM_LEFT] = {

x: 0,

y: 0,

z: windowSize.x / 2,

w: windowSize.y / 2

};

viewport[Corners.BOTTOM_RIGHT] = {

x: windowSize.x / 2,

y: 0,

z: windowSize.x / 2,

w: windowSize.y / 2

};

viewport[Corners.TOP_RIGHT] = {

x: windowSize.x / 2,

y: windowSize.y / 2,

z: windowSize.x / 2,

w: windowSize.y / 2

};

viewport[Corners.TOP_LEFT] = {

x: 0,

y: windowSize.y / 2,

z: windowSize.x / 2,

w: windowSize.y / 2

};

// -- Initialize texture

// Note By @kenrussel: The sample was changed from R32F to R8 for best portability.

// not all devices can render to floating-point textures

// (and, further, this functionality is in a WebGL extension: EXT_color_buffer_float),

// and renderability is a requirement for generating mipmaps.

var SIZE = 32;

var data = new Uint8Array(SIZE * SIZE * SIZE);

for (var k = 0; k < SIZE; ++k) {

for (var j = 0; j < SIZE; ++j) {

for (var i = 0; i < SIZE; ++i) {

data[i + j * SIZE + k * SIZE * SIZE] = snoise([i, j, k]) * 256;

}

}

}

var texture = gl.createTexture();

gl.activeTexture(gl.TEXTURE0);

gl.bindTexture(gl.TEXTURE_3D, texture);

gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_BASE_LEVEL, 0);

gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAX_LEVEL, Math.log2(SIZE));

gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);

gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

gl.texImage3D(

gl.TEXTURE_3D, // target

0, // level

gl.R8, // internalformat

SIZE, // width

SIZE, // height

SIZE, // depth

0, // border

gl.RED, // format

gl.UNSIGNED_BYTE, // type

data // pixel

);

gl.generateMipmap(gl.TEXTURE_3D);

// -- Initialize program

var program = createProgram(gl, getShaderSource('vs'), getShaderSource('fs'));

var uniformTextureMatrixLocation = gl.getUniformLocation(program, 'orientation');

var uniformDiffuseLocation = gl.getUniformLocation(program, 'diffuse');

// -- Initialize buffer

var positions = new Float32Array([

-1.0, -1.0,

1.0, -1.0,

1.0, 1.0,

1.0, 1.0,

-1.0, 1.0,

-1.0, -1.0

]);

var vertexPosBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);

gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

gl.bindBuffer(gl.ARRAY_BUFFER, null);

var texCoords = new Float32Array([

0.0, 1.0,

1.0, 1.0,

1.0, 0.0,

1.0, 0.0,

0.0, 0.0,

0.0, 1.0

]);

var vertexTexBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexBuffer);

gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);

gl.bindBuffer(gl.ARRAY_BUFFER, null);

// -- Initilize vertex array

var vertexArray = gl.createVertexArray();

gl.bindVertexArray(vertexArray);

var vertexPosLocation = 0; // set with GLSL layout qualifier

gl.enableVertexAttribArray(vertexPosLocation);

gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);

gl.vertexAttribPointer(vertexPosLocation, 2, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, null);

var vertexTexLocation = 1; // set with GLSL layout qualifier

gl.enableVertexAttribArray(vertexTexLocation);

gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexBuffer);

gl.vertexAttribPointer(vertexTexLocation, 2, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, null);

gl.bindVertexArray(null);

// -- Render

var orientation = [0.0, 0.0, 0.0];

requestAnimationFrame(render);

function yawPitchRoll(yaw, pitch, roll) {

var cosYaw = Math.cos(yaw);

var sinYaw = Math.sin(yaw);

var cosPitch = Math.cos(pitch);

var sinPitch = Math.sin(pitch);

var cosRoll = Math.cos(roll);

var sinRoll = Math.sin(roll);

return [

cosYaw * cosPitch,

cosYaw * sinPitch * sinRoll - sinYaw * cosRoll,

cosYaw * sinPitch * cosRoll + sinYaw * sinRoll,

0.0,

sinYaw * cosPitch,

sinYaw * sinPitch * sinRoll + cosYaw * cosRoll,

sinYaw * sinPitch * cosRoll - cosYaw * sinRoll,

0.0,

-sinPitch,

cosPitch * sinRoll,

cosPitch * cosRoll,

0.0,

0.0, 0.0, 0.0, 1.0

];

}

function render() {

orientation[0] += 0.020; // yaw

orientation[1] += 0.010; // pitch

orientation[2] += 0.005; // roll

var yawMatrix = new Float32Array(yawPitchRoll(orientation[0], 0.0, 0.0));

var pitchMatrix = new Float32Array(yawPitchRoll(0.0, orientation[1], 0.0));

var rollMatrix = new Float32Array(yawPitchRoll(0.0, 0.0, orientation[2]));

var yawPitchRollMatrix = new Float32Array(yawPitchRoll(orientation[0], orientation[1], orientation[2]));

var matrices = [yawMatrix, pitchMatrix, rollMatrix, yawPitchRollMatrix];

// Clear color buffer

gl.clearColor(0.0, 0.0, 0.0, 1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

// Bind program

gl.useProgram(program);

gl.uniform1i(uniformDiffuseLocation, 0);

gl.activeTexture(gl.TEXTURE0);

gl.bindTexture(gl.TEXTURE_3D, texture);

gl.bindVertexArray(vertexArray);

for (var i = 0; i < Corners.MAX; ++i) {

gl.viewport(viewport[i].x, viewport[i].y, viewport[i].z, viewport[i].w);

gl.uniformMatrix4fv(uniformTextureMatrixLocation, false, matrices[i]);

gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, 1);

}

requestAnimationFrame(render);

}

})();

</script>

<div id="highlightedLines" style="display: none">#L132-L170</div>

</body>

</html>