interaction.js Example File
interaction/qml/interaction/interaction.js
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the QtCanvas3D module of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
Qt.include("gl-matrix.js")
Qt.include("ThreeJSLoader.js")
var gl;
var texturedShaderProgram = 0;
var vertexShader = 0;
var fragmentShader = 0;
var vertexPositionAttribute;
var textureCoordAttribute;
var vertexNormalAttribute;
var pMatrixUniform;
var mvMatrixUniform;
var nMatrixUniform;
var textureSamplerUniform;
var barrelTexture = 0;
var mvMatrix = mat4.create();
var pMatrix = mat4.create();
var nMatrix = mat4.create();
var startTime;
var canvas3d;
var isLogEnabled = false;
function log(message) {
if (isLogEnabled)
console.log(message)
}
function Model() {
this.verticesVBO = 0;
this.normalsVBO = 0;
this.texCoordVBO = 0;
this.indexVBO = 0;
this.count = 0;
}
var theModel = new Model();
function initializeGL(canvas) {
canvas3d = canvas
log("*******************************************************************************************")
log("initializeGL ENTER...")
try {
startTime = Date.now();
// Get the OpenGL context jsonObj that represents the API we call
log("Getting Context");
gl = canvas.getContext("canvas3d", {depth:true, antialias:true, alpha:false});
log("Context received "+gl);
var contextConfig = gl.getContextAttributes();
log("Depth: "+contextConfig.alpha);
log("Stencil: "+contextConfig.stencil);
log("Antialiasing: "+contextConfig.antialias);
log("Premultiplied alpha: "+contextConfig.premultipliedAlpha);
log("Preserve drawingbuffer: "+contextConfig.preserveDrawingBuffer);
log("Prefer Low Power To High Performance: "+contextConfig.preferLowPowerToHighPerformance);
log("Fail If Major Performance Caveat: "+contextConfig.failIfMajorPerformanceCaveat);
// Setup the OpenGL state
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.frontFace(gl.CCW);
gl.cullFace(gl.BACK);
gl.disable(gl.BLEND);
gl.clearColor(0.98, 0.98, 0.98, 1.0);
gl.clearDepth(1.0);
// Set viewport
gl.viewport(0, 0,
canvas.width * canvas.devicePixelRatio,
canvas.height * canvas.devicePixelRatio);
// Initialize the shader program
initShaders();
// Initialize buffers
theModel.verticesVBO = gl.createBuffer();
theModel.verticesVBO.name = "BarrelModel.verticesVBO";
theModel.normalsVBO = gl.createBuffer();
theModel.normalsVBO.name = "BarrelModel.normalsVBO";
theModel.texCoordVBO = gl.createBuffer();
theModel.texCoordVBO.name = "BarrelModel.texCoordVBO";
theModel.indexVBO = gl.createBuffer();
theModel.indexVBO.name = "BarrelModel.indexVBO";
// Load the barrel texture
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
// Load the Qt logo as texture
var barrelImage = TextureImageFactory.newTexImage();
barrelImage.imageLoaded.connect(function() {
barrelTexture = gl.createTexture();
barrelTexture.name = "barrelTexture"
gl.bindTexture(gl.TEXTURE_2D, barrelTexture);
gl.texImage2D(gl.TEXTURE_2D, // target
0, // level
gl.RGBA, // internalformat
gl.RGBA, // format
gl.UNSIGNED_BYTE, // type
barrelImage); // pixels
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);
});
barrelImage.imageLoadingFailed.connect(function() {
console.log("Texture load FAILED, "+barrelImage.errorString);
});
// Aliasing doesn't work correctly with QtQuick compiler for some reason,
// so use full names for barrel.jpg and barrel.json
barrelImage.src = "qrc:/qml/interaction/barrel.jpg";
// Load the model
log(" Create XMLHttpRequest")
var request = new XMLHttpRequest();
log(" XMLHttpRequest.open")
request.open("GET", "qrc:/qml/interaction/barrel.json");
log(" XMLHttpRequest.onreadystatechange")
request.onreadystatechange = function () {
if (request.readyState === XMLHttpRequest.DONE) {
handleLoadedModel(JSON.parse(request.responseText));
}
}
log(" XMLHttpRequest.send")
request.send();
log("...initializeGL EXIT");
} catch(e) {
console.log("...initializeGL FAILURE!");
console.log(""+e);
console.log(""+e.message);
}
log("*******************************************************************************************");
}
function resizeGL(canvas)
{
var pixelRatio = canvas.devicePixelRatio;
canvas.pixelSize = Qt.size(canvas.width * pixelRatio,
canvas.height * pixelRatio);
if (gl)
gl.viewport(0, 0,
canvas.width * canvas.devicePixelRatio,
canvas.height * canvas.devicePixelRatio);
}
function paintGL(canvas) {
// draw
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// draw only when we have the mesh and texture
if (theModel.count <= 0 || barrelTexture == 0) return;
gl.useProgram(texturedShaderProgram);
// Calculate the perspective projection
mat4.perspective(pMatrix, degToRad(45), canvas.width / canvas.height, 0.1, 10000.0);
gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix);
// Bind the correct buffers
gl.bindBuffer(gl.ARRAY_BUFFER, theModel.verticesVBO);
gl.enableVertexAttribArray(vertexPositionAttribute);
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, theModel.normalsVBO);
gl.enableVertexAttribArray(vertexNormalAttribute);
gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, theModel.texCoordVBO);
gl.enableVertexAttribArray(textureCoordAttribute);
gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, barrelTexture);
gl.uniform1i(textureSamplerUniform, 0);
// Calculate and apply the modelview matrix
mvMatrix = mat4.identity(mvMatrix);
mvMatrix = mat4.translate(mvMatrix, mvMatrix, [0, -40, -700]);
mvMatrix = mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.xRotSlider), [1, 0, 0]);
mvMatrix = mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.yRotSlider), [0, 1, 0]);
mvMatrix = mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.zRotSlider), [0, 0, 1]);
gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix);
// Calculate normal matrix
nMatrix = mat4.invert(nMatrix, mvMatrix);
nMatrix = mat4.transpose(nMatrix, nMatrix);
gl.uniformMatrix4fv(nMatrixUniform, false, nMatrix);
// Draw the barrel
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, theModel.indexVBO);
gl.drawElements(gl.TRIANGLES, theModel.count, gl.UNSIGNED_SHORT, 0);
// Calculate and apply the modelview matrix
mvMatrix = mat4.identity(mvMatrix);
mvMatrix = mat4.translate(mvMatrix, mvMatrix, [-250, -50, -700]);
mvMatrix = mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.xRotSlider), [0, 1, 0]);
gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix);
// Calculate normal matrix
nMatrix = mat4.invert(nMatrix, mvMatrix);
nMatrix = mat4.transpose(nMatrix, nMatrix);
gl.uniformMatrix4fv(nMatrixUniform, false, nMatrix);
// Draw the barrel
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, theModel.indexVBO);
gl.drawElements(gl.POINTS, theModel.count, gl.UNSIGNED_SHORT, 0);
// Calculate and apply the modelview matrix
mvMatrix = mat4.identity(mvMatrix);
mvMatrix = mat4.translate(mvMatrix, mvMatrix, [250, -50, -700]);
mvMatrix = mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.zRotSlider), [0, 1, 0]);
gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix);
// Calculate normal matrix
nMatrix = mat4.invert(nMatrix, mvMatrix);
nMatrix = mat4.transpose(nMatrix, nMatrix);
gl.uniformMatrix4fv(nMatrixUniform, false, nMatrix);
// Draw the barrel
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, theModel.indexVBO);
gl.drawElements(gl.LINES, theModel.count, gl.UNSIGNED_SHORT, 0);
}
function handleLoadedModel(jsonObj) {
log("*******************************************************************************************");
log("handleLoadedModel ENTER...")
var modelData = parseJSON3DModel(jsonObj, "");
log(" "+theModel.verticesVBO);
gl.bindBuffer(gl.ARRAY_BUFFER, theModel.verticesVBO);
gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array(modelData.vertices),
gl.STATIC_DRAW);
log(" "+theModel.normalsVBO);
gl.bindBuffer(gl.ARRAY_BUFFER, theModel.normalsVBO);
gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array(modelData.normals),
gl.STATIC_DRAW);
log(" "+theModel.texCoordVBO);
gl.bindBuffer(gl.ARRAY_BUFFER, theModel.texCoordVBO);
gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array(modelData.texCoords[0]),
gl.STATIC_DRAW);
log(" "+theModel.indexVBO);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, theModel.indexVBO);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
new Uint16Array(modelData.indices),
gl.STATIC_DRAW);
theModel.count = modelData.indices.length;
log("...handleLoadedModel EXIT");
log("*******************************************************************************************");
}
function degToRad(degrees) {
return degrees * Math.PI / 180;
}
function initShaders()
{
log(" initShaders ENTER...")
vertexShader = getShader(gl,
"attribute highp vec3 aVertexNormal; \
attribute highp vec3 aVertexPosition; \
attribute highp vec2 aTextureCoord; \
\
uniform highp mat4 uNormalMatrix; \
uniform mat4 uMVMatrix; \
uniform mat4 uPMatrix; \
\
varying highp vec2 vTextureCoord; \
varying highp vec3 vLighting; \
\
void main(void) { \
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); \
vTextureCoord = aTextureCoord; \
highp vec3 ambientLight = vec3(0.5, 0.5, 0.5); \
highp vec3 directionalLightColor = vec3(0.75, 0.75, 0.75); \
highp vec3 directionalVector = vec3(0.85, 0.8, 0.75); \
highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0); \
\
highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0); \
vLighting = ambientLight + (directionalLightColor * directional); \
gl_PointSize = 1.0; \
}", gl.VERTEX_SHADER);
fragmentShader = getShader(gl,
"varying highp vec2 vTextureCoord; \
varying highp vec3 vLighting; \
\
uniform sampler2D uSampler; \
\
void main(void) { \
mediump vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); \
gl_FragColor = vec4(texelColor.rgb * vLighting, 1.0); \
}", gl.FRAGMENT_SHADER);
texturedShaderProgram = gl.createProgram();
texturedShaderProgram.name = "TexturedShaderProgram";
gl.attachShader(texturedShaderProgram, vertexShader);
gl.attachShader(texturedShaderProgram, fragmentShader);
gl.linkProgram(texturedShaderProgram);
if (!gl.getProgramParameter(texturedShaderProgram, gl.LINK_STATUS)) {
console.log("Could not initialize shaders");
console.log(gl.getProgramInfoLog(texturedShaderProgram));
}
gl.useProgram(texturedShaderProgram);
// look up where the vertex data needs to go.
vertexPositionAttribute = gl.getAttribLocation(texturedShaderProgram, "aVertexPosition");
vertexPositionAttribute.name = "aVertexPosition_AttribLocation";
gl.enableVertexAttribArray(vertexPositionAttribute);
vertexNormalAttribute = gl.getAttribLocation(texturedShaderProgram, "aVertexNormal");
vertexPositionAttribute.name = "aVertexNormal_AttribLocation";
gl.enableVertexAttribArray(vertexNormalAttribute);
textureCoordAttribute = gl.getAttribLocation(texturedShaderProgram, "aTextureCoord");
vertexPositionAttribute.name = "aTextureCoord_AttribLocation";
gl.enableVertexAttribArray(textureCoordAttribute);
pMatrixUniform = gl.getUniformLocation(texturedShaderProgram, "uPMatrix");
pMatrixUniform.name = "uPMatrix_UniformLocation";
mvMatrixUniform = gl.getUniformLocation(texturedShaderProgram, "uMVMatrix");
mvMatrixUniform.name = "uMVMatrix_UniformLocation";
textureSamplerUniform = gl.getUniformLocation(texturedShaderProgram, "uSampler")
textureSamplerUniform.name = "uSampler_UniformLocation";
nMatrixUniform = gl.getUniformLocation(texturedShaderProgram, "uNormalMatrix");
nMatrixUniform.name = "uNormalMatrix_UniformLocation";
log(" ... initShaders EXIT");
}
function getShader(gl, str, type) {
var shader = gl.createShader(type);
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.log("JS:Shader compile failed");
console.log(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
