<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>textureandlight.js Example File | Qt Canvas 3D (deprecated) 5.12.2</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtcanvas3d-index.html">Qt Canvas 3D (deprecated)</a></td><td ><a href="qtcanvas3d-textureandlight-example.html">Lit and Textured Cube Example</a></td><td >textureandlight.js Example File</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtcanvas3d-index.html">Qt 5.12.2 Reference Documentation</a></td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">textureandlight.js Example File</h1>
<span class="subtitle">textureandlight/qml/textureandlight/textureandlight.js</span>
<!-- $$$textureandlight/qml/textureandlight/textureandlight.js-description -->
<div class="descr"> <a name="details"></a>
<pre class="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")
//
// Draws a cube that has the Qt logo as decal texture on each face.
// A simple per vertex lighting equation is used to emulate light landing on the rotating cube.
//
var gl;
var cubeTexture = 0;
var vertexPositionAttribute;
var textureCoordAttribute;
var vertexNormalAttribute;
var mvMatrix = mat4.create();
var pMatrix = mat4.create();
var nMatrix = mat4.create();
var pMatrixUniform;
var mvMatrixUniform;
var nUniform;
var width = 0;
var height = 0;
var canvas3d;
var pixelSize;
function initializeGL(canvas) {
canvas3d = canvas;
// Get the OpenGL context object that represents the API we call
gl = canvas.getContext("canvas3d", {depth:true, antialias:true, alpha:false});
// Setup the OpenGL state
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LESS);
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.BACK);
gl.clearColor(0.98, 0.98, 0.98, 1.0);
gl.clearDepth(1.0);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
// Set viewport
gl.viewport(0, 0, canvas.width, canvas.height);
// Initialize the shader program
initShaders();
// Initialize vertex and color buffers
initBuffers();
// Load the textures
var qtLogoImage = TextureImageFactory.newTexImage();
qtLogoImage.imageLoaded.connect(function() {
console.log("Texture loaded, "+qtLogoImage.src);
// Create the Canvas3DTexture object
cubeTexture = gl.createTexture();
// Bind it
gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
// Set the properties
gl.texImage2D(gl.TEXTURE_2D, // target
0, // level
gl.RGBA, // internalformat
gl.RGBA, // format
gl.UNSIGNED_BYTE, // type
qtLogoImage); // pixels
// Set texture filtering parameters
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
// Generate mipmap
gl.generateMipmap(gl.TEXTURE_2D);
});
qtLogoImage.imageLoadingFailed.connect(function() {
console.log("Texture load FAILED, "+qtLogoImage.errorString);
});
qtLogoImage.src = "qrc:/qtlogo.png";
}
function resizeGL(canvas)
{
var pixelRatio = canvas.devicePixelRatio;
canvas.pixelSize = Qt.size(canvas.width * pixelRatio,
canvas.height * pixelRatio);
}
function degToRad(degrees) {
return degrees * Math.PI / 180;
}
function paintGL(canvas) {
var pixelRatio = canvas.devicePixelRatio;
var currentWidth = canvas.width * pixelRatio;
var currentHeight = canvas.height * pixelRatio;
if (currentWidth !== width || currentHeight !== height ) {
width = currentWidth;
height = currentHeight;
gl.viewport(0, 0, width, height);
mat4.perspective(pMatrix, degToRad(45), width / height, 0.1, 500.0);
gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix);
}
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, mvMatrix, [(canvas.yRotAnim - 120.0) / 120.0,
(canvas.xRotAnim - 60.0) / 50.0,
-10.0]);
mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.xRotAnim), [0, 1, 0]);
mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.yRotAnim), [1, 0, 0]);
mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.zRotAnim), [0, 0, 1]);
gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix);
mat4.invert(nMatrix, mvMatrix);
mat4.transpose(nMatrix, nMatrix);
gl.uniformMatrix4fv(nUniform, false, nMatrix);
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
}
function initBuffers()
{
var cubeVertexPositionBuffer = gl.createBuffer();
cubeVertexPositionBuffer.name = "cubeVertexPositionBuffer";
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([// Front face
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
// Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
// Top face
-1.0, 1.0, -1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0,
// Bottom face
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,
// Right face
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
1.0, 1.0, 1.0,
1.0, -1.0, 1.0,
// Left face
-1.0, -1.0, -1.0,
-1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0
]),
gl.STATIC_DRAW);
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
var cubeVertexIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
new Uint16Array([
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // back
8, 9, 10, 8, 10, 11, // top
12, 13, 14, 12, 14, 15, // bottom
16, 17, 18, 16, 18, 19, // right
20, 21, 22, 20, 22, 23 // left
]),
gl.STATIC_DRAW);
var cubeVerticesTextureCoordBuffer = gl.createBuffer();
cubeVerticesTextureCoordBuffer.name = "cubeVerticesTextureCoordBuffer";
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
var textureCoordinates = [
// Front
1.0, 0.0,
0.0, 0.0,
0.0, 1.0,
1.0, 1.0,
// Back
1.0, 0.0,
0.0, 0.0,
0.0, 1.0,
1.0, 1.0,
// Top
1.0, 0.0,
0.0, 0.0,
0.0, 1.0,
1.0, 1.0,
// Bottom
1.0, 0.0,
0.0, 0.0,
0.0, 1.0,
1.0, 1.0,
// Right
1.0, 0.0,
0.0, 0.0,
0.0, 1.0,
1.0, 1.0,
// Left
1.0, 0.0,
0.0, 0.0,
0.0, 1.0,
1.0, 1.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
gl.STATIC_DRAW);
gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
var cubeVerticesNormalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
// Front
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
// Back
0.0, 0.0, -1.0,
0.0, 0.0, -1.0,
0.0, 0.0, -1.0,
0.0, 0.0, -1.0,
// Top
0.0, 1.0, 0.0,
0.0, 1.0, 0.0,
0.0, 1.0, 0.0,
0.0, 1.0, 0.0,
// Bottom
0.0, -1.0, 0.0,
0.0, -1.0, 0.0,
0.0, -1.0, 0.0,
0.0, -1.0, 0.0,
// Right
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
// Left
-1.0, 0.0, 0.0,
-1.0, 0.0, 0.0,
-1.0, 0.0, 0.0,
-1.0, 0.0, 0.0
]), gl.STATIC_DRAW);
gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
}
function initShaders()
{
var 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 mediump vec4 vColor; \
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.VERTEX_SHADER);
var fragmentShader = getShader(gl,
"varying highp vec2 vTextureCoord; \
varying highp vec3 vLighting; \
\
uniform sampler2D uSampler; \
\
void main(void) { \
mediump vec3 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)).rgb; \
gl_FragColor = vec4(texelColor * vLighting, 1.0); \
}", gl.FRAGMENT_SHADER);
// Create the Canvas3DProgram for shader
var shaderProgram = gl.createProgram();
// Attach the shader sources to the shader program
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
// Link the program
gl.linkProgram(shaderProgram);
// Check the linking status
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.log("Could not initialise shaders");
console.log(gl.getProgramInfoLog(shaderProgram));
}
// Take the shader program into use
gl.useProgram(shaderProgram);
// Look up where the vertex data needs to go
vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(vertexPositionAttribute);
textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
gl.enableVertexAttribArray(textureCoordAttribute);
vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
gl.enableVertexAttribArray(vertexNormalAttribute);
// Get the uniform locations
pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");
// Setup texture sampler uniform
var textureSamplerUniform = gl.getUniformLocation(shaderProgram, "uSampler")
gl.activeTexture(gl.TEXTURE0);
gl.uniform1i(textureSamplerUniform, 0);
gl.bindTexture(gl.TEXTURE_2D, 0);
}
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;
}
</pre>
</div>
<!-- @@@textureandlight/qml/textureandlight/textureandlight.js -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br/> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
7
>
armv7hl
>
media
>
core-release
>
by-pkgid
>
0a1223a3e4bb8a61fd0c6bd9fadbd0af
>
files
>
208
