I have tried but failed since I am still leaning ThreeJS.
I will be glad if u can help.
by user 66936191118737408
Sure I’ll send you something since I don’t see the issue here unfortunately, one moment.
You can replace the content in main.ts with this to test:
import "@needle-tools/engine";
import { NeedleEngine, Renderer, prefix } from "@needle-tools/engine";
import { Group, Material, Mesh } from "three";
let gpuHasFrontFacingDoubleSidedBug = false;
NeedleEngine.addContextCreatedCallback((args) => {
const { renderer } = args.context;
var debugInfo = renderer.getContext().getExtension('WEBGL_debug_renderer_info');
if (debugInfo !== null) {
var gpu = renderer.getContext().getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
gpuHasFrontFacingDoubleSidedBug = gpu.match(/adreno.+(5|6)[0-9][0-9]/gi) !== null;
}
console.log("GPU: " + gpu + " has front facing double sided bug?: " + gpuHasFrontFacingDoubleSidedBug);
})
abstract class FixDoubleSidedIssue extends Renderer {
// This is automatically injected into Renderer.start
// see https://engine.needle.tools/docs/reference/typescript-decorators.html
@prefix(Renderer)
start() {
if (gpuHasFrontFacingDoubleSidedBug) {
console.log("FixDoubleSidedIssue.start")
if (this.gameObject instanceof Mesh) {
this.fixDoubleSidedIssue(this.gameObject);
}
else if (this.gameObject instanceof Group) {
for (const ch of this.gameObject.children) {
if (ch instanceof Mesh)
this.fixDoubleSidedIssue(ch);
}
}
}
}
private fixDoubleSidedIssue(obj: Mesh) {
obj.geometry.computeTangents();
if (obj.material instanceof Array) {
for (const mat of obj.material)
this.fixDoubleSidedIssueMaterial(mat);
}
else {
this.fixDoubleSidedIssueMaterial(obj.material);
}
}
private fixDoubleSidedIssueMaterial(mat: Material) {
if ("vertexTangents" in mat)
mat.vertexTangents = true;
mat.needsUpdate = true;
}
}
Strange… worked for me here. Perhaps like this?
import "@needle-tools/engine";
import { NeedleEngine, Renderer, prefix } from "@needle-tools/engine";
import { Group, Material, Mesh } from "three";
let gpuHasFrontFacingDoubleSidedBug = false;
NeedleEngine.addContextCreatedCallback((args) => {
const { renderer } = args.context;
var debugInfo = renderer.getContext().getExtension('WEBGL_debug_renderer_info');
if (debugInfo !== null) {
var gpu = renderer.getContext().getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
gpuHasFrontFacingDoubleSidedBug = gpu.match(/adreno.+(5|6)[0-9][0-9]/gi) !== null;
}
console.log("GPU: " + gpu + " has front facing double sided bug?: " + gpuHasFrontFacingDoubleSidedBug);
})
abstract class FixDoubleSidedIssue extends Renderer {
// This is automatically injected into Renderer.start
// see https://engine.needle.tools/docs/reference/typescript-decorators.html
@prefix(Renderer)
start() {
if (gpuHasFrontFacingDoubleSidedBug) {
console.log("FixDoubleSidedIssue.start")
if (this.gameObject instanceof Mesh) {
fixDoubleSidedIssue(this.gameObject);
}
else if (this.gameObject instanceof Group) {
for (const ch of this.gameObject.children) {
if (ch instanceof Mesh)
fixDoubleSidedIssue(ch);
}
}
}
}
}
function fixDoubleSidedIssue(obj: Mesh) {
obj.geometry.computeTangents();
if (obj.material instanceof Array) {
for (const mat of obj.material)
fixDoubleSidedIssueMaterial(mat);
}
else {
fixDoubleSidedIssueMaterial(obj.material);
}
}
function fixDoubleSidedIssueMaterial(mat: Material) {
if ("vertexTangents" in mat)
mat.vertexTangents = true;
mat.needsUpdate = true;
}
Just a little update.
I changed the materials’ normalMapType from TangentSpace to ObjectSpace.
Although the rendered outcome become wrong as expected, the flickering disappeared.
I think the geometry.computeTangents() may not be the solution for this issue, but the cause should be similar which related to Adreno GPU.
by user 66936191118737408