From ff02e067da03cee4fcddc82c366a743c4babfb32 Mon Sep 17 00:00:00 2001 From: Aaron Lee Date: Sat, 30 May 2026 22:24:51 +0800 Subject: [PATCH] Implement 3D logo and refactor StencilTestingScene - Added `LearnGLESLogo` Jetpack Compose component and updated launcher icons to use the new 3D cube design. - Refactored `StencilTestingScene` to enable `GL_CULL_FACE` and updated the clear color. - Renamed stencil testing shader files to remove numeric prefixes and updated shader precision to `highp`. - Simplified `ic_launcher_background.xml` to a solid dark color. --- .../shaders/depth_testing/depth_testing.frag | 2 +- ...e_color.frag => stencil_single_color.frag} | 0 ...ncil_testing.frag => stencil_testing.frag} | 2 +- ...ncil_testing.vert => stencil_testing.vert} | 0 .../main/cpp/basic/StencilTestingScene.cpp | 39 +++-- .../java/com/minininja/learngles/ui/Logo.kt | 116 +++++++++++++ .../res/drawable/ic_launcher_background.xml | 164 +----------------- .../res/drawable/ic_launcher_foreground.xml | 58 +++++-- 8 files changed, 187 insertions(+), 194 deletions(-) rename tutorial/src/main/assets/shaders/stencil_testing/{2.stencil_single_color.frag => stencil_single_color.frag} (100%) rename tutorial/src/main/assets/shaders/stencil_testing/{2.stencil_testing.frag => stencil_testing.frag} (85%) rename tutorial/src/main/assets/shaders/stencil_testing/{2.stencil_testing.vert => stencil_testing.vert} (100%) create mode 100644 tutorial/src/main/java/com/minininja/learngles/ui/Logo.kt diff --git a/tutorial/src/main/assets/shaders/depth_testing/depth_testing.frag b/tutorial/src/main/assets/shaders/depth_testing/depth_testing.frag index 371325b7..4c3d481d 100644 --- a/tutorial/src/main/assets/shaders/depth_testing/depth_testing.frag +++ b/tutorial/src/main/assets/shaders/depth_testing/depth_testing.frag @@ -1,5 +1,5 @@ #version 320 es -precision mediump float; +precision highp float; out vec4 FragColor; diff --git a/tutorial/src/main/assets/shaders/stencil_testing/2.stencil_single_color.frag b/tutorial/src/main/assets/shaders/stencil_testing/stencil_single_color.frag similarity index 100% rename from tutorial/src/main/assets/shaders/stencil_testing/2.stencil_single_color.frag rename to tutorial/src/main/assets/shaders/stencil_testing/stencil_single_color.frag diff --git a/tutorial/src/main/assets/shaders/stencil_testing/2.stencil_testing.frag b/tutorial/src/main/assets/shaders/stencil_testing/stencil_testing.frag similarity index 85% rename from tutorial/src/main/assets/shaders/stencil_testing/2.stencil_testing.frag rename to tutorial/src/main/assets/shaders/stencil_testing/stencil_testing.frag index 3a92553a..fe6aba56 100644 --- a/tutorial/src/main/assets/shaders/stencil_testing/2.stencil_testing.frag +++ b/tutorial/src/main/assets/shaders/stencil_testing/stencil_testing.frag @@ -1,5 +1,5 @@ #version 320 es -precision mediump float; +precision highp float; out vec4 FragColor; in vec2 TexCoords; diff --git a/tutorial/src/main/assets/shaders/stencil_testing/2.stencil_testing.vert b/tutorial/src/main/assets/shaders/stencil_testing/stencil_testing.vert similarity index 100% rename from tutorial/src/main/assets/shaders/stencil_testing/2.stencil_testing.vert rename to tutorial/src/main/assets/shaders/stencil_testing/stencil_testing.vert diff --git a/tutorial/src/main/cpp/basic/StencilTestingScene.cpp b/tutorial/src/main/cpp/basic/StencilTestingScene.cpp index 32e0ddaa..6441b0c6 100644 --- a/tutorial/src/main/cpp/basic/StencilTestingScene.cpp +++ b/tutorial/src/main/cpp/basic/StencilTestingScene.cpp @@ -13,8 +13,9 @@ StencilTestingScene::StencilTestingScene() { void StencilTestingScene::init() { m_camera = new TargetCamera; -// configure global opengl state + // configure global opengl state // ----------------------------- + glEnable(GL_CULL_FACE); glEnable(GL_DEPTH_TEST); glDepthFunc(GL_LESS); glEnable(GL_STENCIL_TEST); @@ -23,10 +24,10 @@ void StencilTestingScene::init() { // build and compile our shader zprogram // ------------------------------------ - m_pShader = new Shader("shaders/stencil_testing/2.stencil_testing.vert", - "shaders/stencil_testing/2.stencil_testing.frag"); - m_pShaderSingleColor = new Shader("shaders/stencil_testing/2.stencil_testing.vert", - "shaders/stencil_testing/2.stencil_single_color.frag"); + m_pShader = new Shader("shaders/stencil_testing/stencil_testing.vert", + "shaders/stencil_testing/stencil_testing.frag"); + m_pShaderSingleColor = new Shader("shaders/stencil_testing/stencil_testing.vert", + "shaders/stencil_testing/stencil_single_color.frag"); // set up vertex data (and buffer(s)) and configure vertex attributes // ------------------------------------------------------------------ @@ -128,10 +129,11 @@ void StencilTestingScene::resize(int width, int height) { void StencilTestingScene::draw() { m_camera->update(); -// render + // render // ------ - glClearColor(0.1f, 0.1f, 0.1f, 1.0f); - glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT); // don't forget to clear the stencil buffer! + glClearColor(0.65f, 0.65f, 0.65f, 1.0f); + // don't forget to clear the stencil buffer! + glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT); // set uniforms glm::mat4 view = m_camera->getViewMatrix(); @@ -151,7 +153,9 @@ void StencilTestingScene::draw() { m_pShader->setMat4("projection", projection); } - // draw floor as normal, but don't write the floor to the stencil buffer, we only care about the containers. We set its mask to 0x00 to not write to the stencil buffer. + // draw floor as normal, but don't write the floor to the stencil buffer, + // we only care about the containers. + // We set its mask to 0x00 to not write to the stencil buffer. glStencilMask(0x00); // floor glBindVertexArray(m_planeVAO); @@ -180,10 +184,12 @@ void StencilTestingScene::draw() { m_pShader->setMat4("model", model); glDrawArrays(GL_TRIANGLES, 0, 36); - // 2nd. render pass: now draw slightly scaled versions of the objects, this time disabling stencil writing. - // Because the stencil buffer is now filled with several 1s. The parts of the buffer that are 1 are not drawn, thus only drawing + // 2nd. render pass: now draw slightly scaled versions of the objects, + // this time disabling stencil writing. + // Because the stencil buffer is now filled with several 1s. + // The parts of the buffer that are 1 are not drawn, thus only drawing // the objects' size differences, making it look like borders. - // ----------------------------------------------------------------------------------------------------------------------------- + // ------------------------------------------------------------------------------ glStencilFunc(GL_NOTEQUAL, 1, 0xFF); glStencilMask(0x00); glDisable(GL_DEPTH_TEST); @@ -252,7 +258,8 @@ void StencilTestingScene::parseTargetCameraEvent(std::map if (it->second.type() == typeid(std::vector)) { const auto& val = std::any_cast&>(it->second); if (val.size() >= 4) { - targetCamera->onSingleTouching(glm::vec2(val[0], val[1]), glm::vec2(val[2], val[3])); + targetCamera->onSingleTouching(glm::vec2(val[0], val[1]), + glm::vec2(val[2], val[3])); } } } @@ -261,8 +268,10 @@ void StencilTestingScene::parseTargetCameraEvent(std::map if (it->second.type() == typeid(std::vector)) { const auto& val = std::any_cast&>(it->second); if (val.size() >= 8) { - targetCamera->onDoubleTouching(glm::vec2(val[0], val[1]), glm::vec2(val[2], val[3]), - glm::vec2(val[4], val[5]), glm::vec2(val[6], val[7])); + targetCamera->onDoubleTouching(glm::vec2(val[0], val[1]), + glm::vec2(val[2], val[3]), + glm::vec2(val[4], val[5]), + glm::vec2(val[6], val[7])); } } } diff --git a/tutorial/src/main/java/com/minininja/learngles/ui/Logo.kt b/tutorial/src/main/java/com/minininja/learngles/ui/Logo.kt new file mode 100644 index 00000000..efe3ac7d --- /dev/null +++ b/tutorial/src/main/java/com/minininja/learngles/ui/Logo.kt @@ -0,0 +1,116 @@ +package com.minininja.learngles.ui + +import androidx.compose.foundation.Canvas +import androidx.compose.foundation.layout.aspectRatio +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Path +import androidx.compose.ui.graphics.drawscope.Stroke +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp + +@Composable +fun LearnGLESLogo(modifier: Modifier = Modifier) { + Canvas( + modifier = modifier + .aspectRatio(1f) + .padding(16.dp) + ) { + val width = size.width + val height = size.height + + // Define points based on the vector coordinates (normalized to size) + val center = Offset(width * 0.5f, height * 0.5f) + val top = Offset(width * 0.5f, height * 0.23f) + val bottom = Offset(width * 0.5f, height * 0.78f) + val left = Offset(width * 0.22f, height * 0.37f) + val right = Offset(width * 0.78f, height * 0.37f) + val bottomLeft = Offset(width * 0.22f, height * 0.65f) + val bottomRight = Offset(width * 0.78f, height * 0.65f) + val innerCenter = Offset(width * 0.5f, height * 0.51f) + + // Right Face (Blue) + val rightFace = Path().apply { + moveTo(top.x, top.y) + lineTo(right.x, right.y) + lineTo(bottomRight.x, bottomRight.y) + lineTo(bottom.x, bottom.y) + close() + } + drawPath( + path = rightFace, + brush = Brush.linearGradient( + colors = listOf(Color(0xFF007FFF), Color(0xFF003366)), + start = top, + end = bottomRight + ), + alpha = 0.8f + ) + + // Left Face (Green) + val leftFace = Path().apply { + moveTo(top.x, top.y) + lineTo(left.x, left.y) + lineTo(bottomLeft.x, bottomLeft.y) + lineTo(bottom.x, bottom.y) + close() + } + drawPath( + path = leftFace, + brush = Brush.linearGradient( + colors = listOf(Color(0xFF00FF7F), Color(0xFF006633)), + start = top, + end = bottomLeft + ), + alpha = 0.9f + ) + + // Top Face (Red) + val topFace = Path().apply { + moveTo(top.x, top.y) + lineTo(right.x, right.y) + lineTo(innerCenter.x, innerCenter.y) + lineTo(left.x, left.y) + close() + } + drawPath( + path = topFace, + brush = Brush.linearGradient( + colors = listOf(Color(0xFFFF4D4D), Color(0xFF990000)), + start = top, + end = innerCenter + ) + ) + + // Wireframe Highlights + drawLine( + color = Color.White.copy(alpha = 0.3f), + start = top, + end = innerCenter, + strokeWidth = 2f + ) + drawLine( + color = Color.White.copy(alpha = 0.3f), + start = innerCenter, + end = left, + strokeWidth = 2f + ) + drawLine( + color = Color.White.copy(alpha = 0.3f), + start = innerCenter, + end = right, + strokeWidth = 2f + ) + } +} + +@Preview(showBackground = true, backgroundColor = 0xFF1A1A1A) +@Composable +fun PreviewLogo() { + LearnGLESLogo(Modifier.padding(50.dp)) +} diff --git a/tutorial/src/main/res/drawable/ic_launcher_background.xml b/tutorial/src/main/res/drawable/ic_launcher_background.xml index 07d5da9c..4c0dda76 100644 --- a/tutorial/src/main/res/drawable/ic_launcher_background.xml +++ b/tutorial/src/main/res/drawable/ic_launcher_background.xml @@ -5,166 +5,6 @@ android:viewportWidth="108" android:viewportHeight="108"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/tutorial/src/main/res/drawable/ic_launcher_foreground.xml b/tutorial/src/main/res/drawable/ic_launcher_foreground.xml index 2b068d11..9a4ab082 100644 --- a/tutorial/src/main/res/drawable/ic_launcher_foreground.xml +++ b/tutorial/src/main/res/drawable/ic_launcher_foreground.xml @@ -4,27 +4,55 @@ android:height="108dp" android:viewportWidth="108" android:viewportHeight="108"> - + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + android:strokeAlpha="0.3"/> \ No newline at end of file