uni-app WebGL版本2无法获取上下文

uni-app WebGL版本2无法获取上下文

开发环境 版本号 项目创建方式
Mac 11.5.2 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Mac

PC开发环境操作系统版本号:11.5.2 (20G95)

HBuilderX类型:正式

HBuilderX版本号:3.2.16

手机系统:Android

手机系统版本号:Android 8.0

手机厂商:华为

手机机型:mate10

页面类型:vue

vue版本:vue2

打包方式:云端

项目创建方式:HBuilderX

示例代码:

<template>
<view>
111
<button @click="sss">444</button>
<button @click="sss2">222</button>
<button @click="sss">444</button>
<button @click="sss">444</button>
<button @click="sss">444</button>
<button @click="sss">444</button>
</view>
</template>

<script>
import * as tf from '@tensorflow/tfjs';

export default {  
    data() {  
        return {  

        }  
    },  
    methods: {  
        sss(){  
            console.log('ok1')  
            // Define a model for linear regression.   
            const model = tf.sequential();   
            model.add(tf.layers.dense({units: 1, inputShape: [1]}));  

            model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});  

            // Generate some synthetic data for training.   
            const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);   
            const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);  

            // Train the model using the data.   
            model.fit(xs, ys, {epochs: 10}).then(() => {   
                // Use the model to do inference on a data point the model hasn't seen before:   
                model.predict(tf.tensor2d([5], [1, 1])).print();  
                 // Open the browser devtools to see the output   
                 console.log('ok')  
                 });  
        },  
        sss2(){  
            console.log('ok1');  
            const a = tf.variable(tf.scalar(Math.random()));  
            const b = tf.variable(tf.scalar(Math.random()));  
            const c = tf.variable(tf.scalar(Math.random()));  
            const d = tf.variable(tf.scalar(Math.random()));  
            function predict(x) {  
              // y = a * x ^ 3 + b * x ^ 2 + c * x + d  
              return tf.tidy(() => {  
                return a.mul(x.pow(tf.scalar(3))) // a * x^3  
                  .add(b.mul(x.square())) // + b * x ^ 2  
                  .add(c.mul(x)) // + c * x  
                  .add(d); // + d  
              });  
            };  
            function loss(predictions, labels) {  
              // 将labels(实际的值)进行抽象  
              // 然后获取平均数.  
              const meanSquareError = predictions.sub(labels).square().mean();  
              return meanSquareError;  
            };  
            const learningRate = 0.5;  
            const optimizer = tf.train.sgd(learningRate);  
            function train(xs, ys, numIterations = 75) {  

              const learningRate = 0.5;  
              const optimizer = tf.train.sgd(learningRate);  

              for (let iter = 0; iter < numIterations; iter++) {  
                optimizer.minimize(() => {  
                  const predsYs = predict(xs);  
                  return loss(predsYs, ys);  
                });  
              };  
              };  
        }  
    }  
}
```

## 操作步骤:
运行到内置模拟器中

## 预期结果:
应该是GL渲染到图片

## 实际结果:
发生报警,没有显示

## bug描述:
在运行tensorflowjs时会有报警
Could not get context for WebGL version 2

更多关于uni-app WebGL版本2无法获取上下文的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

‘’’ import ‘@tensorflow/tfjs-backend-webgl’; import ‘@tensorflow/tfjs-core/dist/public/chained_ops/sum’; // add the ‘sum’ chained op to all tensors ‘’’ 新tf需要添加这些引用,之后警报会消除。

更多关于uni-app WebGL版本2无法获取上下文的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于uni-app的WebView内核在部分Android设备上对WebGL 2.0支持不完整导致的。TensorFlow.js默认会尝试使用WebGL 2.0进行加速,当无法获取WebGL 2.0上下文时会回退到WebGL 1.0,但在这个过程中会抛出警告。

解决方案是在TensorFlow.js初始化前强制指定使用WebGL 1.0后端:

import * as tf from '@tensorflow/tfjs';

// 在调用任何TensorFlow.js操作前添加
tf.setBackend('webgl');

如果仍然有问题,可以更彻底地禁用WebGL 2.0尝试:

// 在App.vue的onLaunch中或页面加载前执行
if (typeof window !== 'undefined') {
    const originalGetContext = HTMLCanvasElement.prototype.getContext;
    HTMLCanvasElement.prototype.getContext = function(contextType, contextAttributes) {
        if (contextType === 'webgl2') {
            return null; // 强制返回null,让TF.js使用webgl1
        }
        return originalGetContext.call(this, contextType, contextAttributes);
    };
}

另外,确保在manifest.json中配置了必要的权限:

{
    "app-plus": {
        "webView": {
            "renderer": "always"
        }
    }
}
回到顶部