Click here to Skip to main content
15,884,472 members

Hein Pauwelyn - Professional Profile



Summary

LinkedIn      Blog RSS
1,250
Author
228
Authority
59
Debator
97
Editor
-1
Enquirer
154
Organiser
1,015
Participant
Hello

I'm Hein Pauwelyn, I'm studying the bachelor education NMCT @ HoWest Kortrijk (a city in Belgium).

I'm programming with .NET, Android. I like things to learn about programming and helping other people.

Form February till June, I go do an internship by Poppr at Gent. I go make a project about Web VR.

Cheers

Hein Pauwelyn



LinkedIn: Hein Pauwelyn | GitHub: HeinPauwelyn | Blog site: heinpauwelyn.github.io

Groups

Below is the list of groups in which the member is participating

Belgium Belgium
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.
This is a Social Group
This member has Member status in this group

1 members
United States United States
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.

The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.
This is a Collaborative Group
This member has Member status in this group

754 members

Reputation

Weekly Data. Recent events may not appear immediately. For information on Reputation please see the FAQ.

Privileges

Members need to achieve at least one of the given member levels in the given reputation categories in order to perform a given action. For example, to store personal files in your account area you will need to achieve Platinum level in either the Author or Authority category. The "If Owner" column means that owners of an item automatically have the privilege. The member types column lists member types who gain the privilege regardless of their reputation level.

ActionAuthorAuthorityDebatorEditorEnquirerOrganiserParticipantIf OwnerMember Types
Have no restrictions on voting frequencysilversilversilversilver
Bypass spam checks when posting contentsilversilversilversilversilversilvergoldSubEditor, Mentor, Protector, Editor
Store personal files in your account areaplatinumplatinumSubEditor, Editor
Have live hyperlinks in your profilebronzebronzebronzebronzebronzebronzesilverSubEditor, Protector, Editor
Have the ability to include a biography in your profilebronzebronzebronzebronzebronzebronzesilverSubEditor, Protector, Editor
Edit a Question in Q&AsilversilversilversilverYesSubEditor, Protector, Editor
Edit an Answer in Q&AsilversilversilversilverYesSubEditor, Protector, Editor
Delete a Question in Q&AYesSubEditor, Protector, Editor
Delete an Answer in Q&AYesSubEditor, Protector, Editor
Report an ArticlesilversilversilversilverSubEditor, Mentor, Protector, Editor
Approve/Disapprove a pending ArticlegoldgoldgoldgoldSubEditor, Mentor, Protector, Editor
Edit other members' articlesSubEditor, Protector, Editor
Create an article without requiring moderationplatinumSubEditor, Mentor, Protector, Editor
Approve/Disapprove a pending QuestionProtector
Approve/Disapprove a pending AnswerProtector
Report a forum messagesilversilverbronzeProtector, Editor
Approve/Disapprove a pending Forum MessageProtector
Have the ability to send direct emails to members in the forumsProtector
Create a new tagsilversilversilversilver
Modify a tagsilversilversilversilver

Actions with a green tick can be performed by this member.


 
NewsReact VR vs. A-frame Pin
Hein Pauwelyn11-Mar-17 5:34
Hein Pauwelyn11-Mar-17 5:34 
I've done some R&D how to create Web VR and found that there are two libraries made for making Web VR applications. Web VR is an experimental JavaScript API that provides access to Virtual Reality devices, such as the Oculus Rift, HTC Vive, Samsung Gear VR, or Google Cardboard, in your browser.

The fist one I've found is A-Frame. This framework uses the Entity-Component-System. This means that A-frame follows the Composition over inheritance principle that allows greater flexibility in defining entities where every object in a game's scene is an entity. The pro of this framework is that it's the documentation is very good and almost every Web VR application uses this framework. Below you could find a demo I've made.
HTML
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>

<a-scene>
  <a-box id="thebox" color="#6173F4" width="2" height="1" depth="1" position="0 1 0" rotation="10 0 10" scale="2.5 0.5 2" src="http://i.imgur.com/NVHVwzd.jpg">
    <a-animation attribute="rotation" begin="click" repeat="indefinite" to="10 1440 10" dur="10000"></a-animation>
    <a-event name="mouseenter" scale="1 0.5 1"></a-event>
  </a-box>

  <a-camera position="0 3 5">
    <a-cursor color="red"></a-cursor>
  </a-camera>

  <a-sky src="http://i.imgur.com/vhdUJIg.jpg"></a-sky>
</a-scene>

The other library I've found is React VR. This framework is really new and the documentation is small and it's difficult to create a working application with it. This comes because the library is not mature enough to develop stable applications with it. The advantage is that the React VR is build on the React Native library that could be used to create native web applications.
JavaScript
import React from 'react';
import { AppRegistry, asset, StyleSheet, Pano, Text, View, Mesh, VrButton, AmbientLight } from 'react-vr';

export class ColorButton extends React.Component {

    selectedColor = "white";

    render() {
        return (
            <VrButton onClick={() => this.colorLight(this.props.name)}>
                <View style={{ margin: 0.1, height: 0.3, backgroundColor: this.props.name }}>
                    <Text style={{ fontSize: 0.2, textAlign: 'center' }}>{this.props.name}</Text>
                </View>
            </VrButton>
        );
    }

    colorLight(color) {
        if (this.selectedColor !== color) {
            this.selectedColor = color;
            console.log(`selectedColor is updated to: ${this.selectedColor}.`);
        }
    }
}

class pokemongo extends React.Component {

    render() {
        return (
            <View>
                <Pano source={'http://i.imgur.com/vhdUJIg.jpg'} />
                <Mesh source={{ mesh: 'https://goo.gl/Pbac72', mtl: 'https://goo.gl/dYCQwQ' }} 
                      style={{ height: 1 }}></Mesh>

                <View style={{ flex: 1,
                               flexDirection: 'column',
                               width: 2,
                               alignItems: 'stretch',
                               transform: [{ translate: [-1, 1, -5] }] }}>

                    <ColorButton name="red"></ColorButton>
                    <ColorButton name="orange"></ColorButton>
                    <ColorButton name="yellow"></ColorButton>
                    <ColorButton name="green"></ColorButton>
                    <ColorButton name="blue"></ColorButton>
                    <ColorButton name="indigo"></ColorButton>
                    <ColorButton name="violet"></ColorButton>
                    <Text>Selected color: 
                        <span onchange={ColorButton.selectedColor.toString()}>
                            {ColorButton.prototype.selectedColor}
                        </span>
                    </Text>
                </View>

                <AmbientLight intensity={100} color={ColorButton.prototype.selectedColor}></AmbientLight>
            </View>
        );
    }
};

AppRegistry.registerComponent('pokemongo', () => pokemongo);

If you use A-frame you can choose to use AngularJS, Angular 2, JQuery or React Native.

Both libraries uses a third party library named Three.js. This is an JavaScript API for rendering interactive 2D and 3D graphics inside a HTML canvas element.

Below you could find a table with an overview of both libraries.
|                               | React VR                                  | A-Frame                                      |
| ----------------------------- | ----------------------------------------- | -------------------------------------------- |
| First release                 | December 13, 2016                         | December 16, 2015                            |
| Official site                 | facebookincubator.github.io/react-vr      | aframe.io                                    |
| Quality of documentation      | Small                                     | Better                                       |
| Difficulty of development     | High                                      | Low                                          |
| Other framework that are used | React native; OVRUI; Three.js             | Three.js                                     |
| Possible to integrate with    | Unknown                                   | React; Angular; JQuery; Redux; Vue.js; d3.js |
| Other information             | Build on React Native                     | Used Entity-Component-System (ECS)           |
| Download with NPM             | npm install --save react-vr               | npm install --save a-frame                   |

GeneralHowest goes Tokyo! Pin
Hein Pauwelyn4-Mar-17 2:52
Hein Pauwelyn4-Mar-17 2:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.