Make perspective transformation look exactly same on iOS and Android

[syaau]

Summary:
There is a variation in iOS and Android output while performing perspective transformation. The variation exists even when used in Android devices with different screen density.

Test Plan:
I carried out tests on multiple devices with different perspective value and varying rotation X angle, and back calculated the Camera Distance value from the screen shots. On iOS the values were almost equal to the Pixel Density * Perspective value wheres on Android devices the Distance would always come out to be approximately 2.24 * Perspective value irrespective of the device screen density. I used the following code to use perspective transformation and verified that output matched exactly on all platforms.

const PERSPECTIVE = Platform.OS === 'ios' ? P : (P * PixelRatio.get()) / Math.sqrt(5);

The code was then translated to the BaseViewManager.java and verified that the output matched on all platforms.

Changelog:
[ANDROID] [BUGFIX] [Perspective Transformation] - Corrected perspective transformation to look exactly same on iOS and Android devices.

[pull-bot]

	Warnings
⚠️	📋 Changelog - This PR appears to be missing Changelog. Please add a section called "changelog" and format it as explained in the contributing guidelines.

Generated by 🚫 dangerJS

[facebook-github-bot]

@syaau I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.

[cpojer]

@syaau thanks for this PR. Unfortunately it is a bit hard through the test plan and code to understand what is changing here. Would you be able to provide some before/after screenshots that helps us understand your change? Thank you.

[syaau]

Here is an example code, that rotates a 200x200 square by 45deg on x-axis with a very near perspective distance (120 units).

import React from 'react';
import { StyleSheet, View, Platform, PixelRatio } from 'react-native';

const PERSPECTIVE = 120;
const perspective = PERSPECTIVE;
// const perspective = Platform.OS === 'ios' ? PERSPECTIVE : (PERSPECTIVE * PixelRatio.get()) / Math.sqrt(5);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  ref: {
    position: 'absolute',
    width: 200,
    height: 200,
    backgroundColor: 'yellow',
  },
  perspective: {
    position: 'absolute',
    width: 200,
    height: 200,
    backgroundColor: 'red',
    opacity: 0.5,
    transform: [
      { perspective },
      { rotateX: '45deg' },
    ],
  },
});

const App = () => (
  <View style={styles.container}>
    <View style={styles.ref} />
    <View style={{ position: 'absolute', justifyContent: 'center', alignItems: 'center' }}>
      <View style={styles.perspective} />
    </View>
  </View>
);

export default App;

iPhone Output (same irrespective of pixel density of the phone)

Android Output (on a iphone5x, pixel density of 2.625)

Android Output (on Pixel 2 XL, pixel density of 3.5)

The output went below the screen with the same perspective value

Android Output (after applying the fix, Use the commented line on above code)

[syaau]

@cpojer Please check the screenshots above, where you could see that the perspective values didn't work correctly in between the android devices with different pixel densities. After applying the fix, the output looks exactly the same with the iOS and irrespective of the Pixel Density. Above in the example code, I have applied the fix on the perspective value itself, whereas this pull request implements the same thing in android.

I am not sure why the magic number 5 had been used previously to calculate the camera distance.
private static final float CAMERA_DISTANCE_NORMALIZATION_MULTIPLIER = 5;.

I guess it has got something to do with the matrix that has been used for transformation. But sqrt(5) produced the same output as iOS.

[facebook-github-bot]

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[cpojer]

Thank you for the thorough explanation and the screenshots. I added a link to this Pull Request as a comment so that people can find more information if they come across this.

[facebook-github-bot]

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[cpojer]

Having a bit of a hiccup with the import right now but I'm gonna rebase this PR and will get it landed as soon as possible.

[facebook-github-bot]

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[facebook-github-bot]

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[react-native-bot]

@syaau merged commit 4c10f93 into facebook:master.