如何用3D流体实现逼真水流效果?

如何,3d,流体,实现,逼真,水流,效果 · 浏览次数 : 192

小编点评

**排版** **XRenderView** ```java public class XRenderView extends RenderView { ... } ``` **DemoActivity** ```java private GestureEvent gesture; private void createFluidScene(Context context) { ... gesture = new GestureEvent(fluidComponent, displayMetrics.widthPixels, displayMetrics.heightPixels); } ``` **GestureEvent** ```java public class GestureEvent implements View.OnTouchListener { ... } ``` **创建流体场景** ```java private Node fluidNode; private void createFluidScene(Context context) { ... fluidNode = renderView.getScene().createNode("fluidNode"); ... } ``` **注册传感器事件** ```java private SensorManager sensorManager; private Sensor sensor; private int rotation; private void createFluidScene(Context context) { ... gesture = new GestureEvent(fluidComponent, displayMetrics.widthPixels, displayMetrics.heightPixels); ... sensorManager = context.getSystemService(SensorManager.class); sensor = sensorManager.getSensor(Sensor.TYPE_GYRO); sensor.setOnTouchListener(gesture); ... } ``` **创建触屏交互手势事件** ```java private GestureEvent gesture; private void createFluidScene(Context context) { ... gesture = new GestureEvent(fluidComponent, displayMetrics.widthPixels, displayMetrics.heightPixels); } ``` **在DemoActivity的onCreate方法中调用createFluidScene方法,完成流体场景创建** ```java private void createFluidScene() { ... createFluidScene(context); } ```

正文

华为应用市场在2022年HDC大会期间发布了一款3D水流主题,基于华为HMS Core Scene Kit服务能力,展现立体灵动的水流岛屿,可跟随用户指尖实现实时流体波动效果,既趣味又解压。

让变幻莫测的物质来实现我们在影视和游戏等多种应用场景中的奇思妙想,从早期步骤繁重的特效制作演变到如今,已经有了更为轻量易用的解题范式,只需花费10分钟便可打造一个逼真的3D流体效果。

什么是Scene Kit流体模拟?

Scene Kit即图形引擎服务,提供轻量级3D图形渲染引擎,可以为游戏、AR & VR等移动端应用提供易于使用的渲染接口,助力打造精致酷炫的视觉体验。

Scene Kit的3D流体技术,目前支持移动端水、油、岩浆等不同类型的物理真实流体模拟。服务中包含原子化接口,场景话接口,离线简模插件,实时光追插件等。

性能优越:基于三维图形渲染框架和算法,提供高性能低功耗的三维立体场景构建能力。

轻量易用:提供场景化移动应用接口,简化三维图形应用开发,易于为二维图形应用拓展构建三维立体场景。

效果逼真:基于物理的渲染能力,提供高画质三维场景效果和沉浸式图形体验。

实操环节:用3D流体实现逼真水流效果

开发环境

安装Android Studio 3.6.1及以上。

JDK 1.8(推荐)。

您的应用应满足以下条件:

minSdkVersion 19及以上。

targetSdkVersion 30(推荐)。

compileSdkVersion 30(推荐)。

Gradle 5.4.1及以上(推荐)。

如果同时使用多个HMS Core的服务,则需要使用各个Kit对应的最大值。

测试应用的设备:Android 4.4及以上。

开发配置

详细准备步骤请参考图形引擎服务开发者联盟官网

开发准备

Android Studio的代码库配置在Gradle插件7.0以下版本、7.0版本和7.1及以上版本有所不同。请根据您当前的Gradle插件版本,选择对应的配置过程。

  1. 在“buildscript > repositories”中配置HMS Core SDK的Maven仓地址。

  2. 如果App中添加了“agconnect-services.json”文件则需要在“buildscript > dependencies”中增加agcp插件配置。打开项目级“settings.gradle”文件,配置HMS Core SDK的Maven仓地址。

buildscript {
    repositories {
        google()
        jcenter()
        // 配置HMS Core SDK的Maven仓地址。
        maven {url 'https://developer.huawei.com/repo/'}
    }
    dependencies {
        ...
        // 增加agcp插件配置,推荐您使用最新版本的agcp插件。
        classpath 'com.huawei.agconnect:agcp:
1.6.0.300
'
    }
}

dependencyResolutionManagement {
...
repositories {
google()
jcenter() 
// 配置HMS Core SDK的Maven仓地址。
maven {url 'https://developer.huawei.com/repo/'}
}
}

添加权限

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
<uses-permission android:name="android.permission.CAMERA" />

开发步骤

  1. 创建两个Activity:MainActivity和SampleActivity。其中MainActivity负责完成SceneKit初始化,SampleActivity用于容纳渲染视图,并呈现最终效果。

  2. 在MainActivity中添加初始化标识和初始化方法。在初始化方法中设置SceneKit全局属性,并使用同步初始化接口initializeSync初始化SceneKit。

private static final int REQ_CODE_UPDATE_SCENE_KIT = 10001;
private boolean initialized = false;


private void initializeSceneKit() {
    // 如果已经初始化,不再重复初始化。
    if (initialized) {
        return;
    }
    // 创建SceneKit属性,配置AppId与图形后端API。
    SceneKit.Property property = SceneKit.Property.builder()
        .setAppId("${app_id}")
        .setGraphicsBackend(SceneKit.Property.GraphicsBackend.GLES)
        .build();
    try {
        // 使用同步接口进行初始化。
        SceneKit.getInstance()
            .setProperty(property)
            .initializeSync(getApplicationContext());
        initialized = true;
        Toast.makeText(this, "SceneKit initialized", Toast.LENGTH_SHORT).show();
    } catch (UpdateNeededException e) {
        // 捕获需要升级异常,拉起升级Activity。
        startActivityForResult(e.getIntent(), REQ_CODE_UPDATE_SCENE_KIT);
    } catch (Exception e) {
        // 处理初始化异常。
        Toast.makeText(this, "failed to initialize SceneKit: " + e.getMessage(), Toast.LENGTH_SHORT).show();
    }
}
  1. 复写MainActivity的onActivityResult方法,处理升级结果
// resultCode为-1时代表升级成功,其他resultCode均代表升级失败。
private static final int RES_CODE_UPDATE_SUCCESS = -1;

@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    // 如果升级成功,尝试重新初始化。
    if (requestCode == REQ_CODE_UPDATE_SCENE_KIT
        && resultCode == RES_CODE_UPDATE_SUCCESS) {
        try {
            SceneKit.getInstance()
                .initializeSync(getApplicationContext());
            initialized = true;
            Toast.makeText(this, "SceneKit initialized", Toast.LENGTH_SHORT).show();
        } catch (Exception e) {
            // 重新尝试初始化时不再捕获升级异常。
            Toast.makeText(this, "failed to initialize SceneKit: " + e.getMessage(), Toast.LENGTH_SHORT).show();
        }
}
}
  1. 在MainActivity的Layout文件中添加按钮,用于跳转至SampleActivity。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_render_view_demo_text"
        android:onClick="onBtnRenderViewDemoClicked"/>
</LinearLayout>
  1. 在MainActivity中添加按钮回调。
public void onBtnRenderViewDemoClicked(View view) {
    // 如果未初始化,先初始化。
    if (!initialized) {
        initializeSceneKit();
        return;
    }
    // 跳转到SampleActivity。
    startActivity(new Intent(this, SampleActivity.class));
}
  1. 新建渲染视图子类XRenderView,需要在这个子类中添加相机与灯光组件,详情请见布置场景
.public class XRenderView extends RenderView {
    public XRenderView(Context context) {
        //...
        prepareScene();
    }
    //...
}
  1. 创建SampleActivity为展示效果页面
public class DemoActivity extends Activity implements SensorEventListener {
    private XRenderView renderView;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        renderView = new XRenderView(this);
        setContentView(renderView);
        //...
    }
}
  1. 添加createFluidSecene方法用于流体布局

3D流体组件不支持动态加载,只有在流体场景初始化时设置,才生效

private Node fluidNode;
private void createFluidScene(Context context) {
    // 创建3D流体节点。
    fluidNode = renderView.getScene().createNode("fluidNode");
    // 添加3D流体组件。
    FluidComponent fluidComponent = fluidNode.addComponent(FluidComponent.descriptor());
}
  1. 创建流体边界形状,设置流体体积量
private void createFluidScene(Context context) {
    // ...


    // 创建球形流体边界形状。
    SdfSphereShape sphere = fluidComponent.createSdfSphereShape();
    // 设置球体半径。
    sphere.setRadius(12.0f);
    // 设置流体体积量。
    fluidComponent.setFluidVolume(0.4f);
}
  1. 注册传感器事件,获取加速度传感器信息
private SensorManager sensorManager;
private Sensor sensor;
private int rotation;

private void createFluidScene(Context context) {
    // ...


    sensorManager = (SensorManager)getSystemService(SENSOR_SERVICE);
    // 获取加速度传感器。
    sensor = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
}

@Override
protected void onResume() {
    super.onResume();
    // 注册传感器事件。
    sensorManager.registerListener(this, sensor, SensorManager.SENSOR_DELAY_NORMAL);
    //...
}
@Override
protected void onPause() {
    super.onPause();
    // 去注册传感器事件。
    sensorManager.unregisterListener(this);
    //...
}
  1. 复写传感器onSensorChanged方法,根据加速度传感器获取的值,更新流体系统的重力加速度。
@Override
public void onAccuracyChanged(Sensor sensor, int accuracy) {
}
@Override
public void onSensorChanged(SensorEvent event) {
    if (event.sensor == null) {
        return;
    }
    // 加速度传感器。
    if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) {
        int x = (int) event.values[0];
        int y = (int) event.values[1];
        int z = (int) event.values[2];
        int gravityX = 0;
        int gravityY = 0;
        int gravityZ = 0;
        // 屏幕的旋转信息。
        rotation = this.getWindowManager().getDefaultDisplay().getRotation();
        // 根据屏幕的旋转角度,更新加速度信息。
        switch (rotation) {
            case Surface.ROTATION_0:
                gravityX = -x;
                gravityY = -y;
                gravityZ = -z;
                break;
            case Surface.ROTATION_90:
                gravityX = y;
                gravityY = -x;
                gravityZ = -z;
                break;
            case Surface.ROTATION_180:
                gravityX = x;
                gravityY = y;
                gravityZ = -z;
                break;
            case Surface.ROTATION_270:
                gravityX = -y;
                gravityY = x;
                gravityZ = -z;
                break;
            default:
                break;
        }


        FluidComponent fluidComponent = fluidNode.getComponent(FluidComponent.descriptor());
        if (fluidComponent != null) {
            // 设置流体系统的重力加速度。
            fluidComponent.setGravity(new Vector3(gravityX, gravityY, gravityZ));
        }
    }
}


@Override
public void onAccuracyChanged(Sensor sensor, int accuracy) {
}
  1. 新建触屏交互手势事件子类GestureEvent。
public class GestureEvent implements View.OnTouchListener {
    private FluidComponent fluidComponent;
    private int surfaceWidth;
    private int surfaceHeight;
    private boolean sceneReady;


    public GestureEvent(FluidComponent fluidComponent, int surfaceWidth, int surfaceHeight) {
        this.fluidComponent = fluidComponent;
        this.surfaceWidth = surfaceWidth;
        this.surfaceHeight = surfaceHeight;
        sceneReady = fluidComponent != null && surfaceWidth != 0 && surfaceHeight != 0;
    }
    @Override
    public boolean onTouch(View view, MotionEvent event) {
        if (!sceneReady) {
            return false;
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                // 流体触屏交互接口,滑动流体,模拟流体晃动的效果。
                fluidComponent.setGesture(event.getX() / surfaceWidth, event.getY() / surfaceHeight);
                break;
            case MotionEvent.ACTION_UP:
                fluidComponent.setGesture(-1.0f, -1.0f);
                break;
            default:
                break;
        }
        return true;
    }
}
  1. 注册触屏交互的手势事件,支持触屏滑动流体,模拟流动飞溅效果。复写DemoActivity中的onTouchEvent方法。
private GestureEvent gesture;
private void createFluidScene(Context context) {
    // ...
    // 获取屏幕信息。
    DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
    // 注册手势事件。
    gesture = new GestureEvent(fluidComponent, displayMetrics.widthPixels, displayMetrics.heightPixels);
}


@Override
public boolean onTouchEvent(MotionEvent motionEvent) {
    if (gesture != null) {
        gesture.onTouch(renderView, motionEvent);
    }
    return true;
}
  1. 在DemoActivity的onCreate方法中调用createFluidScene方法,完成流体场景创建。
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    //...
    createFluidScene();
}

完成上述步骤后,运行应用,启动DemoActivity,就能够看见流体在不可视的球形边界内流动。细节详情见原子化接口3D流体示例代码

了解更多详情>>

访问华为开发者联盟官网
获取开发指导文档
华为移动服务开源仓库地址:GitHubGitee

关注我们,第一时间了解 HMS Core 最新技术资讯~

与如何用3D流体实现逼真水流效果?相似的内容:

如何用3D流体实现逼真水流效果?

华为应用市场在2022年HDC大会期间发布了一款3D水流主题,基于华为HMS Core Scene Kit服务能力,展现立体灵动的水流岛屿,可跟随用户指尖实现实时流体波动效果,既趣味又解压。 让变幻莫测的物质来实现我们在影视和游戏等多种应用场景中的奇思妙想,从早期步骤繁重的特效制作演变到如今,已经有

如何用3D流体实现逼真水流效果?

华为应用市场在2022年HDC大会期间发布了一款3D水流主题,基于华为HMS Core Scene Kit服务能力,展现立体灵动的水流岛屿,可跟随用户指尖实现实时流体波动效果,既趣味又解压。 让变幻莫测的物质来实现我们在影视和游戏等多种应用场景中的奇思妙想,从早期步骤繁重的特效制作演变到如今,已经有

如何使用Python和Plotly绘制3D图形

本文分享自华为云社区《Plotly绘制3D图形》 ,作者:柠檬味拥抱。 在数据可视化领域,三维图形是一种强大的工具,可以展示数据之间的复杂关系和结构。Python语言拥有丰富的数据可视化库,其中Plotly是一款流行的工具,提供了绘制高质量三维图形的功能。本文将介绍如何使用Python和Plotly

可视化学习:如何用WebGL绘制3D物体

在学习2D绘图的时候,我们提过很多次关于GPU的高效渲染,但是2D图形的绘制只展示了WebGL部分的能力,WebGL更强大的地方在于,它可以绘制各种3D图形,而3D图形能够极大地增强可视化的表现能力。相信很多小伙伴都对此有所耳闻,也有不少人学习WebGL,就是冲着它的3D绘图能力。接下来,文本就用一...

shell的date的部分处理--需要记住..

在Linux中,可以使用date命令获取日期, date 获取当前完整日期 date --date="3 days ago" 获取3天前的完整日期 date --date="3 days ago" +%Y%m%d 获取3天前的年月日;在date命令中,可以用%指定要显示内容,显示结果为如下形式:20

国产大语言模型ChatGLM3本地搭建、使用和功能扩展

1、官网 ChatGLM3 2、下载ChatGLM3源码 直接在https://github.com/THUDM/ChatGLM3,下载源码 3、下载模型 如果显卡8G一下建议下载ChatGLM3-6B,ModelScope是国内的,下载比较快 用下面两种方式都可以下载 使用git在MadelSco

如何用Three.js + Blender打造一个web 3D展览馆

运营活动新玩法层出不穷,web 3D炙手可热,本文将一步步带大家了解如何利用Three.js和Blender来打造一个沉浸式web 3D展览馆。

如何基于three.js(webgl)引擎架构,研发一套通过配置就能自动生成的3D机房系统

自动化3D机房、微模块、3D机房、3D数据中心、科技感数据中心、三维机房、3d建筑,3d消防,消防演习模拟,3d库房,3d档案室,3d密集架,webGL,threejs,3d机房,bim管理系统

如何优化大场景实时渲染?HMS Core 3D Engine这么做

在先前举办的华为开发者大会2022(HDC)上,华为通过3D数字溪村展示了自有3D引擎“HMS Core 3D Engine”(以下简称3D Engine)的强大能力。作为一款高性能、高画质、高扩展性的3D引擎,3D Engine不仅能通过实时光追、水体渲染、体积云雾、多维GPU粒子系统等技术还原真

如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课(一)

three.js、webgl、3D煤矿隧道、三维井下人员定位、掘进面三维可视化、纵采面可视化、采集面可视化展示、设备检测、数字孪生、物联网3D、3d建筑、3d库房,bim管理系统