华为应用市场在 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 插件版本，选择对应的配置过程。
在“buildscript > repositories”中配置 HMS Core SDK 的 Maven 仓地址。
如果 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" />
复制代码
开发步骤
创建两个 Activity：MainActivity 和 SampleActivity。其中 MainActivity 负责完成SceneKit初始化，SampleActivity 用于容纳渲染视图，并呈现最终效果。
在 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(); }}
复制代码
复写 MainActivity 的 onActivityResult 方法，处理升级结果
// resultCode为-1时代表升级成功，其他resultCode均代表升级失败。private static final int RES_CODE_UPDATE_SUCCESS = -1;
@Overrideprotected 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(); }}}
复制代码
在 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>
复制代码
在 MainActivity 中添加按钮回调。
public void onBtnRenderViewDemoClicked(View view) { // 如果未初始化，先初始化。 if (!initialized) { initializeSceneKit(); return; } // 跳转到SampleActivity。 startActivity(new Intent(this, SampleActivity.class));}
复制代码
新建渲染视图子类 XRenderView,需要在这个子类中添加相机与灯光组件，详情请见布置场景。
.public class XRenderView extends RenderView { public XRenderView(Context context) { //... prepareScene(); } //...}
复制代码
创建 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); //... }}
复制代码
添加 createFluidSecene 方法用于流体布局
3D 流体组件不支持动态加载，只有在流体场景初始化时设置，才生效
private Node fluidNode;private void createFluidScene(Context context) { // 创建3D流体节点。 fluidNode = renderView.getScene().createNode("fluidNode"); // 添加3D流体组件。 FluidComponent fluidComponent = fluidNode.addComponent(FluidComponent.descriptor());}
复制代码
创建流体边界形状，设置流体体积量
private void createFluidScene(Context context) { // ...
// 创建球形流体边界形状。 SdfSphereShape sphere = fluidComponent.createSdfSphereShape(); // 设置球体半径。 sphere.setRadius(12.0f); // 设置流体体积量。 fluidComponent.setFluidVolume(0.4f);}
复制代码
注册传感器事件，获取加速度传感器信息
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);}
@Overrideprotected void onResume() { super.onResume(); // 注册传感器事件。 sensorManager.registerListener(this, sensor, SensorManager.SENSOR_DELAY_NORMAL); //...}@Overrideprotected void onPause() { super.onPause(); // 去注册传感器事件。 sensorManager.unregisterListener(this); //...}
复制代码
复写传感器 onSensorChanged 方法，根据加速度传感器获取的值，更新流体系统的重力加速度。
@Overridepublic void onAccuracyChanged(Sensor sensor, int accuracy) {}@Overridepublic 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)); } }}
@Overridepublic void onAccuracyChanged(Sensor sensor, int accuracy) {}
复制代码
新建触屏交互手势事件子类 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; }}
复制代码
注册触屏交互的手势事件，支持触屏滑动流体，模拟流动飞溅效果。复写 DemoActivity 中的 onTouchEvent 方法。
private GestureEvent gesture;private void createFluidScene(Context context) { // ... // 获取屏幕信息。 DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics(); // 注册手势事件。 gesture = new GestureEvent(fluidComponent, displayMetrics.widthPixels, displayMetrics.heightPixels);}
@Overridepublic boolean onTouchEvent(MotionEvent motionEvent) { if (gesture != null) { gesture.onTouch(renderView, motionEvent); } return true;}
复制代码
在 DemoActivity 的 onCreate 方法中调用 createFluidScene 方法，完成流体场景创建。
@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) { //... createFluidScene();}
复制代码
完成上述步骤后，运行应用，启动 DemoActivity，就能够看见流体在不可视的球形边界内流动。细节详情见原子化接口3D流体示例代码。
了解更多详情>>
访问华为开发者联盟官网
获取开发指导文档
华为移动服务开源仓库地址：GitHub、Gitee
关注我们，第一时间了解 HMS Core 最新技术资讯~
评论