Nativescript Vue Canvas Three - Extensions not supported

[mho22]

I tried to implement in a Nativescript-vue project :

• @nativescript/canvas
• @nativesrcipt/canvas-three
• three

added some visual code in App.vue :

      this.canvas = event.object;

      let context : WebGLRenderingContext | null = this.canvas.getContext('webgl'); // 'webgl' || 'webgl2'

      this.sizes.width = context.drawingBufferWidth;
      this.sizes.height = context.drawingBufferHeight;

      this.camera = new THREE.PerspectiveCamera(70, this.sizes.width / this.sizes.height, 0.01, 10);

      this.camera.position.z = -1;

      this.scene = new THREE.Scene();

      this.geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
      this.material = new THREE.MeshNormalMaterial();

      this.mesh = new THREE.Mesh( this.geometry, this.material );
      this.scene.add( this.mesh );

      this.renderer = new THREE.WebGLRenderer({ context });
      this.renderer.setSize( this.sizes.width, this.sizes.height );

Results gave me a white screen with indications in console :

JS: THREE.WebGLRenderer: OES_texture_half_float extension not supported.
JS: THREE.WebGLRenderer: OES_texture_half_float_linear extension not supported.

Any idea on how to make it work ?

[triniwiz]

Those extensions depend on the device also depending on the version of the gl context create gl vs gl2 some of those extensions was added to the core version.

[mho22]

I managed to modify webgl2 instead of webgl , everything works probably fine. But nothing happens on my mobile phone.

I tried making a simple nativescript project with canvas three and the simple Normal Cube Mesh is actually correctly rendering, and visible.

I then created a Nativescript-vue project with canvas three in the same way as the simple nativescript project, but I get only a white screen with no error message.

Process :

-ns create three-vue --vue

• add in package.json [ manually because of versioning incompatibilities ] :

    "@nativescript/canvas": "~0.9.2",
    "@nativescript/canvas-polyfill": "^1.0.0-alpha24",
    "@nativescript/canvas-three": "^1.0.0-alpha7",
    "three": "^0.120.1"

• add multiDexEnabled true in app.gradle : android -> defaultConfig [ under generatedDensities = [] ]

In app.js :

import Vue from 'nativescript-vue'
import '@nativescript/canvas-polyfill';
import Canvas from '@nativescript/canvas/vue';
import Home from './components/Home'

Vue.use( Canvas );

new Vue( { render: ( h ) => h('frame', [ h( Home ) ] ), } ).$start();

In Home.vue :

<template>
    <Page actionBarHidden="true" >
        <Canvas id="canvas" width="100%" height="100%" v-on:ready="onCanvasReady( $event )"/>
    </Page>
</template>

<script>

    import * as THREE from 'three';

    export default
    {
        data()
        {
            return {
                canvas: undefined,
                gl: undefined,
                camera: undefined,
                scene: undefined,
                renderer: undefined,
                geometry: undefined,
                material: undefined,
                mesh: undefined,
            }
        },
        methods:
        {
            onCanvasReady( event )
            {
                this.canvas = event.object;

                this.init();
                this.animate();
            },
            init()
            {
                const context = this.canvas.getContext( 'webgl2' );

                this.camera = new THREE.PerspectiveCamera( 70, context.drawingBufferWidthwidth / context.drawingBufferWidth.height, 0.01, 10 );
                this.camera.position.z = 1;

                this.scene = new THREE.Scene();

                this.geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
                this.material = new THREE.MeshNormalMaterial();

                this.mesh = new THREE.Mesh( this.geometry, this.material );
                this.scene.add( this.mesh );

                this.renderer = new THREE.WebGLRenderer( { context } );
                this.renderer.setSize( context.drawingBufferWidth.width, context.drawingBufferWidth.height );
            },
            animate()
            {
                requestAnimationFrame( this.animate );

                this.mesh.rotation.x += 0.01;
                this.mesh.rotation.y += 0.02;

                this.renderer.render( this.scene, this.camera );
            }
        }
    };
</script>

Any idea on how to make it visible this time ?

( thank you and your work )

[VanderSP]

hey you missed to use dots... in camera parameters sizes :D .... also you can try window.innerWidth window.innerHeight

[triniwiz]

Another thing the canvas version should be alpha , that .9.x is pretty old

[mho22]

It worked with window.innerWidth and window.innerHeight and with the canvas version "@nativescript/canvas": "^1.0.0-alpha.18",

Thanks a lot @VanderSP and @triniwiz

[mho22]

Hi @VanderSP and @triniwiz , I got some bad news today, unfortunately.

Everything worked fine yesterday but now, when I ns run my project, I get this following error :

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring root project 'gesturehandler'.
> Could not resolve all files for configuration ':classpath'.
   > Could not find com.android.tools.build:gradle:4.5.6.
     Searched in the following locations:
         https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/4.5.6/gradle-4.5.6.pom
         https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/4.5.6/gradle-4.5.6.jar
         https://jcenter.bintray.com/com/android/tools/build/gradle/4.5.6/gradle-4.5.6.pom
         https://jcenter.bintray.com/com/android/tools/build/gradle/4.5.6/gradle-4.5.6.jar
     Required by:
         project :

I suppose the problem is concerns the gradle version but I actually never indicate a possible 4.5.6 version and Android Studio is up to date.

Any idea about this ?

  "dependencies": {
    "@nativescript/canvas": "^1.0.0-alpha.18",
    "@nativescript/canvas-polyfill": "^1.0.0-alpha24",
    "@nativescript/canvas-three": "^1.0.0-alpha7",
    "@nativescript/core": "~8.0.0",
    "@nativescript/theme": "~3.0.1",
    "nativescript-vue": "~2.9.0",
    "three": "^0.138.3"
  },
  "devDependencies": {
    "@nativescript/android": "8.0.0",
    "@nativescript/webpack": "beta",
    "nativescript-vue-template-compiler": "~2.9.0",
    "sass": "^1.32.8"
  },

[VanderSP]

hey bro, 2 points...

1. actually we are kinda picky with three version... (threejs refactored a lot of stuff in 135~138) stick to < 0.134.0
2. try a ns clean & ns platform remove android
3. good luck!

[triniwiz]

Please update the runtime & core version 8.2 to resolve this issue

[mho22]

Sorry to bother @triniwiz and @VanderSP, after update, new error :

  "dependencies": {
    "@nativescript/canvas": "^1.0.0-alpha.18",
    "@nativescript/canvas-three": "beta",
    "@nativescript/core": "~8.2.0",
    "@nativescript/theme": "~3.0.1",
    "nativescript-vue": "~2.9.0",
    "three": "^0.134.0"
  },
  "devDependencies": {
    "@nativescript/android": "8.2.1",
    "@nativescript/ios": "8.2.1",
    "@nativescript/webpack": "5.0.6",
    "nativescript-vue-template-compiler": "~2.9.0",
    "sass": "^1.32.8"
  },

Warning displayed :

  WARNING in ./node_modules/@nativescript/canvas-polyfill/DOM/HTMLVideoElement.js 9:30-67
Module not found: Error: Can't resolve '@nativescript/canvas-media' in 'nativescript-vue-three/node_modules/@nativescript/canvas-polyfill/DOM'
 @ ./node_modules/@nativescript/canvas-polyfill/window.js 4:0-58 19:86-102 20:53-69
 @ ./node_modules/@nativescript/canvas-polyfill/index.js 13:0-18
 @ ./node_modules/@nativescript/canvas-three/index.js 1:0-40
 @ ./app/app.js 4:0-36

When ns plugin add @nativescript/canvas-media an error occur after webpack compilation :

 FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':verifyReleaseResources'.
> A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action
   > Android resource linking failed
     ERROR:/Users/MHO/.gradle/caches/transforms-3/b984cfb454e5241437e257017d41b6c8/transformed/core-1.7.0/res/values/values.xml:105:5-114:25: AAPT: error: resource android:attr/lStar not found.

[triniwiz]

You should install the 1.0 versions instead of the alpha now , try that an lmk

[mho22]

Hi @triniwiz !

I tried with this configuration :

  "dependencies": {
    "@nativescript/canvas": "^1.0.0",
    "@nativescript/canvas-three": "^1.0.0",
    "@nativescript/core": "~8.2.0",
    "@nativescript/theme": "~3.0.1",
    "nativescript-vue": "~2.9.0",
    "three": "^0.134.0"
  },
  "devDependencies": {
    "@nativescript/android": "8.2.1",
    "@nativescript/ios": "8.2.1",
    "@nativescript/webpack": "5.0.6",
    "nativescript-vue-template-compiler": "~2.9.0",
    "sass": "^1.32.8"
  },

I actually still get the warning :

WARNING in ./node_modules/@nativescript/canvas-polyfill/DOM/HTMLVideoElement.js 9:30-67
Module not found: Error: Can't resolve '@nativescript/canvas-media' in '.../nativescript-vue-three/node_modules/@nativescript/canvas-polyfill/DOM'
 @ ./node_modules/@nativescript/canvas-polyfill/DOM/Document.js 2:0-54 21:27-43
 @ ./node_modules/@nativescript/canvas-polyfill/index.js 12:0-42 18:66-74
 @ ./node_modules/@nativescript/canvas-three/index.js 1:0-40
 @ ./app/app.js 4:0-36

And when I add ns plugin add @nativescript/canvas-media - [ "@nativescript/canvas-media": "^1.0.0" ] I still get the error :

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':verifyReleaseResources'.
> A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action
   > Android resource linking failed
     ERROR:/Users/MHO/.gradle/caches/transforms-3/b984cfb454e5241437e257017d41b6c8/transformed/core-1.7.0/res/values/values.xml:105:5-114:25: AAPT: error: resource android:attr/lStar not found.

[VanderSP]

ns clean

[mho22]

Hi @VanderSP !

I always ns clean when a error or warning occur, I still have the FAILURE with this :

  "dependencies": {
    "@nativescript/canvas": "^1.0.0",
    "@nativescript/canvas-media": "^1.0.0",
    "@nativescript/canvas-three": "^1.0.0",
    "@nativescript/core": "~8.2.0",
    "@nativescript/theme": "~3.0.1",
    "nativescript-vue": "~2.9.0",
    "three": "^0.134.0"
  },
  "devDependencies": {
    "@nativescript/android": "8.2.1",
    "@nativescript/ios": "8.2.1",
    "@nativescript/webpack": "5.0.6",
    "nativescript-vue-template-compiler": "~2.9.0",
    "sass": "^1.32.8"
  },

->

  FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':verifyReleaseResources'.
> A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action
   > Android resource linking failed
     ERROR:/Users/MHO/.gradle/caches/transforms-3/b984cfb454e5241437e257017d41b6c8/transformed/core-1.7.0/res/values/values.xml:105:5-114:25: AAPT: error: resource android:attr/lStar not found.

I made some web searches about the error: resource android:attr/lStar not found and found out that, to correct the error on a native Android project, I had to keep a version of androidXCore = 1.6.0.

However, here is my app.gradle :

android {
  defaultConfig {
    compileSdkVersion 31
    minSdkVersion 17
    generatedDensities = []
    multiDexEnabled true
  }
  aaptOptions {
    additionalParameters "--no-version-vectors"
  }
}

Maybe the problem comes from that ?

[VanderSP]

strange, im getting it working... im on android 10 and you?

my gradle

android { defaultConfig { minSdkVersion 24 generatedDensities = [] multiDexEnabled true } aaptOptions { additionalParameters "--no-version-vectors" } }

[mho22]

I'm on android 10 too and with your app.gradle I still have this :

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':verifyReleaseResources'.
> A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action
   > Android resource linking failed
     ERROR:/Users/MHO/.gradle/caches/transforms-3/b984cfb454e5241437e257017d41b6c8/transformed/core-1.7.0/res/values/values.xml:105:5-114:25: AAPT: error: resource android:attr/lStar not found.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 4s
Failed to build plugin @nativescript/canvas-media :
Error: Command ./gradlew failed with exit code 1

Should it be a problem with Java Virtual Machine : jdk-17.0.2.jdk ? I updated it recently

[ I suppose it is not the problem, ns doctor would indicate it if a problem occured with Javac and JDK ]

[VanderSP]

Yes... stick on java 11... ns used 8 before... java is a long story they changed a lot of licensing after adopt openjdk + a bunch of other open vendors... java versioning went crazy!

[mho22]

Hello @VanderSP :

After hours trying to use multiple JDK and installing temurin-11 as indicated in the nativescript installation documentation... The problem still occurs.

* What went wrong:
Execution failed for task ':verifyReleaseResources'.
> A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action
   > Android resource linking failed
     ERROR:.gradle/caches/transforms-3/b984cfb454e5241437e257017d41b6c8/transformed/core-1.7.0/res/values/values.xml:105:5-114:25: AAPT: error: resource android:attr/lStar not found.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 6s
Failed to build plugin @nativescript/canvas-media :
Error: Command ./gradlew failed with exit code 1

I don't understand, what could be the difference between your configuration and mine.

Steps to reproduce :

ns create 'test' --vue

Install the plugins :

  "dependencies": {
    "@nativescript/canvas": "^1.0.0",
    "@nativescript/canvas-media": "^1.0.0",
    "@nativescript/canvas-three": "^1.0.0",
    "@nativescript/core": "~8.2.0",
    "@nativescript/theme": "~3.0.1",
    "nativescript-vue": "~2.9.0",
    "three": "^0.134.0"
  },
  "devDependencies": {
    "@nativescript/android": "8.2.2",
    "@nativescript/ios": "8.2.1",
    "@nativescript/webpack": "5.0.6",
    "nativescript-vue-template-compiler": "~2.9.0",
    "sass": "^1.32.8"
  },

implementing app.gradle :

  android {

  defaultConfig {
    minSdkVersion 21
    generatedDensities = []
    multiDexEnabled true
  }
  aaptOptions {
    additionalParameters "--no-version-vectors"
  }
}

I don't know what I can do to fix that, maybe the Android SDK ?

Here is what prompts when I ns doctor android

💰  test ns doctor android
✔ Getting environment information

No issues were detected.
✔ Your ANDROID_HOME environment variable is set and points to correct directory.
✔ Your adb from the Android SDK is correctly installed.
✔ The Android SDK is installed.
✔ A compatible Android SDK for compilation is found.
✔ Javac is installed and is configured properly.
✔ The Java Development Kit (JDK) is installed and is configured properly.
✔ Getting NativeScript components versions information...
⚠ Update available for component nativescript. Your current version is 8.0.2 and the latest available version is 8.2.2.
✔ Component @nativescript/core has 8.2.1 version and is up to date.
✔ Component @nativescript/android has 8.2.2 version and is up to date.

When i actually open the built project in Android and launch it on my phone, it runs correctly [ with a exception ] I should probably uninstall / reinstall Android Studio [ whose problem should come from ]

I really appreciate the time you give me to answer

[VanderSP]

strange, have u tested vanilla?

[mho22]

I reproduced the problem using a new ns create test --js updating the packages to match ns doctor and simply adding ns plugin add @nativescript/canvas-media

MacOS : 10.15.7

openjdk version "11.0.14.1" 2022-02-08 OpenJDK Runtime Environment Temurin-11.0.14.1+1 (build 11.0.14.1+1) OpenJDK 64-Bit Server VM Temurin-11.0.14.1+1 (build 11.0.14.1+1, mixed mode)

javac 11.0.14.1

nativescript-cli 8.0.2

FAILURE: Build failed with an exception.

• What went wrong: Execution failed for task ':verifyReleaseResources'.

  A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action Android resource linking failed ERROR:/.gradle/caches/transforms-3/b984cfb454e5241437e257017d41b6c8/transformed/core-1.7.0/res/values/values.xml:105:5-114:25: AAPT: error: resource android:attr/lStar not found.

• Try:

  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 4s Failed to build plugin @nativescript/canvas-media : Error: Command ./gradlew failed with exit code 1 Should I create another issue related to canvas-media ?

[VanderSP]

cli 8.02? u tried to npm i -g nativescript@next ?

also im on windows not macos... and im on 11 openlogic, not temurin one...

also, can u share versions of android sdk etceteras? like build tools version bla bla

[mho22]

@VanderSP , @triniwiz , everything is ok now...

The plot twist was the CLI update to 8.2.2. As simply as it was written...

I apologize for not updating it more quickly [ I didn't understand the sentence in ns doctor ]

Thank you for your time and answers

And for the next topic readers, one advice : Always stick to ns doctor

[VanderSP]

nice you solved... :D