How to pick a color in a 3d colored cube in qml?
I am developping a 3D color picker cube in QML, I have developpe the cube textures but I don't know how to code the color picking.
I want when i click on a cube face to have the color on which I clicked, is it possible to do it in qml ?
Here is my code for the cube :
Entity {
id: root
Camera {
id: mainCamera
projectionType: CameraLens.PerspectiveProjection
fieldOfView: 45
aspectRatio: 16/9
nearPlane : 0.1
farPlane : 1000.0
position: Qt.vector3d(0.0, 4.49373, -3.78577)
upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
viewCenter: cubeTransform.translation
}
CustomCameraController {
id: mainCameraController
camera: mainCamera
}
components: [
DirectionalLight{
color: "#e0eef0"
intensity: 0.4
enabled: true
worldDirection: Qt.vector3d(1, 0, 0)
},
DirectionalLight{
color: "#e0eef0"
intensity: 0.4
enabled: true
worldDirection: Qt.vector3d(0, 1, 0)
},
DirectionalLight{
color: "#e0eef0"
intensity: 0.4
enabled: true
worldDirection: Qt.vector3d(-1, 0, 0)
},
DirectionalLight{
color: "#e0eef0"
intensity: 0.4
enabled: true
worldDirection: Qt.vector3d(0, -1, 0)
},
DirectionalLight{
color: "#e0eef0"
intensity: 0.4
enabled: true
worldDirection: Qt.vector3d(0, 0, 1)
},
DirectionalLight{
color: "#e0eef0"
intensity: 0.4
enabled: true
worldDirection: Qt.vector3d(0, 0, -1)
},
RenderSettings {
Viewport {
normalizedRect: Qt.rect(0.0, 0.0, 1.0, 1.0)
RenderSurfaceSelector {
CameraSelector {
id: cameraSelector
camera: mainCamera
FrustumCulling {
ClearBuffers {
buffers: ClearBuffers.AllBuffers
clearColor: "black"
NoDraw {}
}
LayerFilter {
filterMode: LayerFilter.DiscardAnyMatchingLayers
layers: [topLayer]
}
LayerFilter {
filterMode: LayerFilter.AcceptAnyMatchingLayers
layers: [topLayer]
ClearBuffers {
buffers: ClearBuffers.DepthBuffer
}
}
}
}
}
}
},
InputSettings {}
]
Layer {
id: topLayer
recursive: true
}
Entity {
id: cubeEntity
Texture2D {
id: cubeTexture
TextureImage {
source: "qrc:/texture.png"
}
}
Mesh {
id: cubeMesh
source: "qrc:/cube.obj"
}
Transform {
id: cubeTransform
}
ObjectPicker {
id: cubePicker
onClicked: {
console.log("x : " + pick.localIntersection.normalized().x)
console.log("y : " + pick.localIntersection.normalized().y)
console.log("z : " + pick.localIntersection.normalized().z)
}
}
NormalDiffuseMapMaterial{
id: cubeMaterial
diffuse: cubeTexture
normal: cubeTexture
specular: "black"
shininess: 50
}
components: [cubeMesh, cubeTransform, cubeMaterial, cubePicker]
}
}
I add, a picture of my actual cube if someone could help me, it will be great
Solution
Here is the answer for the color picking using qml, opengl and c++:
C++ classes
pixelvaluereader.h
#pragma once
#include <QObject>
#include <Qt3DRender/QRenderCaptureReply>
class PixelValueReader : public QObject
{
Q_OBJECT
public:
explicit PixelValueReader(QObject *parent = nullptr);
Q_INVOKABLE QColor getColor(Qt3DRender::QRenderCaptureReply *reply, int x, int y);
signals:
void newColor(QColor color);
};
pixelvaluereader.cpp
#include "pixelvaluereader.h"
#include <QDebug>
PixelValueReader::PixelValueReader(QObject* parent)
: QObject(parent)
{
}
QColor PixelValueReader::getColor(Qt3DRender::QRenderCaptureReply* reply, int x, int y)
{
QRgb pixel = reply->image().pixel(x, y);
int red = qRed(pixel);
int blue = qBlue(pixel);
int green = qGreen(pixel);
int alpha = qAlpha(pixel);
qDebug() << red * 0xFF000000 + green * 0xFF0000 + blue * 0xFF00 + alpha;
if (red * 0xFF000000 + green * 0xFF0000 + blue * 0xFF00 + alpha > 0) {
emit newColor(QColor(pixel));
qDebug() << "color : " << QColor(pixel).name(); // here is the color of the pixel
}
// RGBA captures the ID but since we masked and right shifted the respective values in the shader
// (e.g. (red & 0xFF000000) >> 24 for red) to prevent overflow in the color values we have to
// undo the shift here again.
return QColor(pixel);
}
main.cpp
#include <Qt3DRender/QAbstractTextureImage>
#include <Qt3DQuickExtras/qt3dquickwindow.h>
#include <Qt3DQuick/QQmlAspectEngine>
#include <QGuiApplication>
#include <QQmlContext>
#include <QQmlEngine>
#include "pixelvaluereader.h"
//Q_DECLARE_METATYPE(Qt3DRender::QAbstractTextureImage)
int main(int argc, char* argv[])
{
QGuiApplication app(argc, argv);
QVector<QVector3D> pos;
pos << QVector3D(1, 1, 0);
pos << QVector3D(-1, 2, 8);
pos << QVector3D(1, 1, 7);
pos << QVector3D(0, 0, 4);
pos << QVector3D(1, 5, 1);
pos << QVector3D(-3, 3, 0);
pos << QVector3D(2, 2, -2);
PixelValueReader *valueReader = new PixelValueReader();
qmlRegisterType<PixelValueReader>("PixelValueReader", 1, 0, "PixelValueReader");
Qt3DExtras::Quick::Qt3DQuickWindow view;
view.setTitle("Instanced Rendering");
view.resize(1600, 800);
view.engine()->qmlEngine()->rootContext()->setContextProperty("_window", &view);
view.engine()->qmlEngine()->rootContext()->setContextProperty("pixelValueReader", valueReader);
view.setSource(QUrl("qrc:/main.qml"));
view.show();
return app.exec();
}
Opengl
For opengl code you can find it in Florian Blume git project : here
QML
main.qml
import QtQuick 2.1 as QQ2
import Qt3D.Core 2.0
import Qt3D.Render 2.10
import Qt3D.Input 2.0
import Qt3D.Extras 2.0
Entity {
components: [
rendSettings,
inputSettings,
light1,
light2,
light3,
light4,
light5,
light6
]
DirectionalLight{
id: light1
color: "#e0eef0"
intensity: 0.4
enabled: true
worldDirection: Qt.vector3d(1, 0, 0)
}
DirectionalLight{
id: light2
color: "#e0eef0"
intensity: 0.4
enabled: true
worldDirection: Qt.vector3d(0, 1, 0)
}
DirectionalLight{
id: light3
color: "#e0eef0"
intensity: 0.4
enabled: true
worldDirection: Qt.vector3d(-1, 0, 0)
}
DirectionalLight{
id: light4
color: "#e0eef0"
intensity: 0.4
enabled: true
worldDirection: Qt.vector3d(0, -1, 0)
}
DirectionalLight{
id: light5
color: "#e0eef0"
intensity: 0.4
enabled: true
worldDirection: Qt.vector3d(0, 0, 1)
}
DirectionalLight{
id: light6
color: "#e0eef0"
intensity: 0.4
enabled: true
worldDirection: Qt.vector3d(0, 0, -1)
}
InputSettings { id: inputSettings }
RenderSettings {
id: rendSettings
activeFrameGraph: RenderSurfaceSelector {
id: surfaceSelector
Viewport {
normalizedRect: Qt.rect(0, 0, 1, 1)
CameraSelector {
camera: camera
ClearBuffers {
buffers: ClearBuffers.ColorDepthBuffer
clearColor: "transparent"
FrustumCulling {
DepthTest {
depthFunction: DepthTest.LessOrEqual
RenderPassFilter {
matchAny: []
}
RenderPassFilter {
matchAny: []
RenderTargetSelector {
target: rt
TextureRenderTarget {
id: rt
width: surfaceSelector.surface ? surfaceSelector.surface.width : 512
height: surfaceSelector.surface ? surfaceSelector.surface.height : 256
}
RenderCapture {
id: renderCapture
}
}
}
}
}
}
}
}
}
}
MouseDevice {
id: mouseDevice
}
MouseHandler {
sourceDevice: mouseDevice
property var reply
property bool isHold: false
property var x
property var y
onReleased: {
if (!isHold) {
x = mouse.x
y = mouse.y
doRenderCapture()
}
isHold = false;
}
onPositionChanged: {
if (mouse.buttons === 1){
isHold = true
}
}
function doRenderCapture() {
reply = renderCapture.requestCapture()
reply.completeChanged.connect(onRenderCaptureCompleted)
}
function onRenderCaptureCompleted() {
var color = pixelValueReader.getColor(reply, x, y)
}
}
Camera {
id: camera
projectionType: CameraLens.PerspectiveProjection
fieldOfView: 45
aspectRatio: 16/9
nearPlane : 0.1
farPlane : 1000.0
position: Qt.vector3d(0.0, 4.49373, -3.78577)
upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
viewCenter: cubeTransform.translation
}
CustomCameraController {camera: camera}
Entity {
id: cubeEntity
Texture2D {
id: cubeTexture
TextureImage {
source: "qrc:/texture.png"
}
}
Mesh {
id: cubeMesh
source: "qrc:/cube.obj"
}
Transform {
id: cubeTransform
}
NormalDiffuseMapMaterial{
id: cubeMaterial
diffuse: cubeTexture
normal: cubeTexture
specular: "black"
shininess: 50
}
components: [cubeMesh, cubeTransform, cubeMaterial]
}
}
TextureRenderTarget.qml
import Qt3D.Core 2.0
import Qt3D.Render 2.0
RenderTarget {
id: rt
property real width: 512
property real height: 512
property alias colorTexture: colorTexture
property variant depthTexture
attachments : [
RenderTargetOutput {
attachmentPoint: RenderTargetOutput.Color0
texture: Texture2D {
id: colorTexture
width: rt.width
height: rt.height
format: Texture.RGBA8_UNorm
minificationFilter: Texture.Linear
magnificationFilter: Texture.Linear
}
},
RenderTargetOutput {
attachmentPoint: RenderTargetOutput.Depth
texture : Texture2D {
id: depthTexture
width: rt.width
height: rt.height
format: Texture.D32
minificationFilter: Texture.Linear
magnificationFilter: Texture.Linear
comparisonFunction: Texture.CompareLessEqual
comparisonMode: Texture.CompareRefToTexture
}
}
]
}
My CustomCameraController don't change
- How to use QTimer
- QML: Hover doesn't work on raspberry pi 4b
- Does Qt support ribbon control?
- How to fix jagged edges when drawing custom shaped translucent QWidget window?
- How to make a QPushButton disabled
- Event propagation in Qt
- 2D plotting library with LGPL
- What does QTimer::singleShot(0, object, SLOT(obj_slot())) do?
- Why QString("FFFFFFFF").toInt(0, 16); returns 0?
- advantage of QString over std::string
- QString character erase function
- How can I make the image return to its original centered position after zooming in, panning, and then zooming out?
- How to prevent QLabel from unnecessary word-wrapping?
- Qt - Setting the buddies
- How to disable dragging content that fits in ScrollView
- How to find the custom recipe created in yocto inside my embedded linux image
- Qt6 OpenGL to OpenGL ES (3.2) code porting
- using getenv and env doesn't give the same results:
- How to keep the screen on in Qt for android?
- matplotlib | QObject::moveToThread: Current thread (0x831f000) is not the object's thread (0x95b40e0). Cannot move to target thread (0x831f000)
- Qt Designer and Frameless Window
- How can I resize frameless window in QML?
- How to deploy a Qt application on Windows?
- QTableWidget: How to find value in specific column
- Add a QPushButton into a QTableWidgetItem in a QTableWidget, How to make it Qt::AlignHCenter
- QZipReader extractAll issue
- Qt and OpenGL: cannot initialize OpenGL VBOs or VAOs after the first call to paintGL?
- QGraphicsItem position after changing boundingRect
- 'nmake' is not recognized as an internal or external command
- Why is necessary to provide path to the library if ldconfig is used?