如何用3D流體實現逼真水流效果？

HMSCore發表於2022-12-14

華為應用市場在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;

@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();
        }
}
}

在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);
}

@Override
protected void onResume() {
    super.onResume();
    // 註冊感測器事件。
    sensorManager.registerListener(this, sensor, SensorManager.SENSOR_DELAY_NORMAL);
    //...
}
@Override
protected void onPause() {
    super.onPause();
    // 去註冊感測器事件。
    sensorManager.unregisterListener(this);
    //...
}

複寫感測器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) {
}

新建觸屏互動手勢事件子類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);
}


@Override
public boolean onTouchEvent(MotionEvent motionEvent) {
    if (gesture != null) {
        gesture.onTouch(renderView, motionEvent);
    }
    return true;
}

在DemoActivity的onCreate方法中呼叫createFluidScene方法，完成流體場景建立。

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    //...
    createFluidScene();
}

完成上述步驟後，執行應用，啟動DemoActivity，就能夠看見流體在不可視的球形邊界內流動。細節詳情見原子化介面3D流體示例程式碼。

瞭解更多詳情>>

訪問華為開發者聯盟官網
獲取開發指導文件
華為移動服務開源倉庫地址：GitHub、Gitee

關注我們，第一時間瞭解 HMS Core 最新技術資訊~

使用CSS實現逼真的水波紋點選效果
2019-05-10
CSS
Unity 高清渲染管線 ShaderGraph 實現簡單的表面水流效果
2020-08-06
Unity
實現原理揭祕：如何用Unity製作逼真的自然場景？
2020-03-25
Unity
CSS3實現3D魔方效果
2019-03-06
CSSS33D
CSS3實現3D翻牌效果
2018-06-07
CSSS33D
Flutter 實現酷炫的3D效果
2020-07-22
Flutter3D
如何在直播軟體搭建中，實現圖片瀑布流效果？
2021-10-08
巧用模糊實現視覺的 3D 效果
2021-09-03
視覺3D
CSS3實現3d效果照片牆
2020-12-26
CSSS33D
Set a Light 3D Studio: 創造逼真光線效果，輕鬆拍攝 mac/win版
2023-11-27
3DMac
我只用了3步，實現了一個逼真的3D場景渲染
2021-08-27
3D
用Qt(C++)實現如蘋果般的亮屏效果
2021-05-02
QTC++蘋果
怎麼實現一個3d翻書效果
2018-08-26
3D
棒呆！如何用css3實現煙花綻放效果
2018-06-12
CSSS3
教你如何用WPF實現文字粒子閃爍動畫效果
2020-09-10
動畫
在鴻蒙中實現類似瀑布流效果
2021-05-27
鴻蒙
css3帶你實現3D轉換效果
2022-03-01
CSSS33D
CSS3動畫實現3D倒數計時效果
2018-08-01
CSSS3動畫3D
Cocos Creator 3D 材質系統：曲面效果如何實現？
2019-12-31
3D
使用Three.js實現神奇的3D文字懸浮效果
2022-03-09
JS3D
jquery如何用each遍歷實現一個排異切換的效果?
2020-12-13
jQuery
如何用 Cocos Creator 3D 如何實現小姐姐的髮絲高光？
2019-12-25
3D
CSS3多面體3D運動效果
2018-06-20
CSSS33D
實現聚焦效果
2022-05-16
CSS3立方體3D旋轉效果
2018-07-08
CSSS33D
使用 three.js 中的 CSS3DRenderer 實現 3d 卡片的效果
2019-04-16
JSCSSS33D
JS實現動態瀑布流及放大切換圖片效果(js案例)
2019-05-23
JS
流媒體軟體系統可實現哪些功能IPTV？
2021-01-23
css 實現打分效果
2019-02-28
CSS
webgl實現火焰效果
2019-12-03
Web
webgl實現故障效果
2019-11-18
Web
js實現打字效果
2021-09-09
JS
canvas實現波浪效果
2020-12-26
Canvas
文字的3D效果
2020-10-31
3D
【Cesium】新增廣告牌實體實現地點標記效果
2020-12-11
為什麼選擇使用介面（如List）而不是具體實現（如ArrayList）來宣告集合變數？-AI
2024-10-02
變數AI
直播軟體搭建，Android實現文字滾動播放效果
2022-04-13
Android
短視訊軟體開發，RecyclerView實現拖拽效果
2022-07-18
View