Three.js: 일부 ES6 기능 채택

에 만든 2015년 04월 16일 · 74코멘트 · 출처: mrdoob/three.js

브라우저와 도구가 빠르게 지원되는 ES6이 출시됩니다. THREE.js는 ES6의 새로운 기능 중 일부에서 엄청난 이점을 얻을 수 있다고 생각합니다.

재미를 위해 그리고 가능한 프로젝트 마이그레이션에 대한 토론을 장려하기 위해 이 문제를 만들고 몇 가지 코드 예제를 만들었습니다.

아래 예에서 보여지는 기능:

기본 매개변수
차단 범위 let 키워드
반복자 + For..Of
클래스
화살표 함수
발전기
모듈

클래스 예시

import Object3D from '../core/Object3D';
import Geometry from '../core/Geometry';
import MeshBasicMaterial from '../materials/MeshBasicMaterial';

class Mesh extends Object3D {
    constructor(
        geometry = new Geometry(),
        material = new MeshBasicMaterial({color: Math.random() * 0xffffff}
    ) {
        super();

        this.geometry = geometry;
        this.material = material;

        this.updateMorphTargets();
    }
}

export default Mesh;

순회 생성기 예제

class Object3D {
    constructor() {
        ...
    }

    traverse(callback) {
        callback(this);

        for (let object of this.children) {
            object.traverse(callback);
        }
    },

    *traversalGenerator() {
        this.traverse(object => yield object);
    }

    ...
}

사용 중인 발전기:

for (let object of scene.traversalGenerator()) {
    if (object.name === 'Blah') {
        break;
    }
}

참고 : 나는 이것을 테스트하지 않았습니다.

Suggestion

출처

lmcd

가장 유용한 댓글

https://github.com/mrdoob/three.js/commit/1017a5432eede4487436d6d34807fda24b506088

좋습니다. let 및 const 에서 src/ 시작할 수 있다고 생각합니다.

@DefinitelyMaybe 이것이 당신이 도와주고 싶은 것입니까?

mrdoob 에 2020년 05월 22일

🎉4

모든 74 댓글

아마 조금 일찍? 지원은 일관되게 훌륭한 크로스 브라우저가 아닙니다: http://kangax.github.io/compat-table/es6/

let FF에서는 노출되지 않으며 Chrome 및 IE에서는 100% 상황이 아닙니다.
generators IE에서 사용할 수 없음
class 는 현재 버전보다 2단계 높은 Win10 및 FF39용 Chrome, IE12(Spartan) 기술 프리뷰에만 있습니다.
import 은(는) 아직 어디에서나 사용할 수 없습니다.
super 는 IE11, Chrome 또는 FF가 아닌 IE12에서만 사용할 수 있습니다.
arrow functions IE11 또는 Chrome에 없음

또한 제너레이터와 for-of 는 모두 Chrome의 최적화 킬러입니다.

benaadams 에 2015년 04월 16일

Imo는 또한 더 멋진 구문을 보기에는 너무 이르다. 목록에 있는 항목이 눈에 띄는 성능 향상 또는 코드 가독성 이점을 제공할 때 논쟁의 여지가 있습니다. 코드베이스와 ES6 기능을 아는 사람이 이에 대해 언급할 수 있습니다.

jonnenauha 에 2015년 04월 17일

ES6 파티에 조금 늦었습니다. 이것은 나에게 다른 언어처럼 보입니다. 나는 정기적으로 Three.js에 기여하지만 위의 스니펫처럼 보인다면 계속할지 모르겠습니다. 저는 기본적으로 'new function()' 및 'object.prototype'과 동일한 작업을 수행하지만 더 느릴 수 있는 다른 모양과 다른 기능의 JavaScript 버전을 배울 인내심이 없습니다.

이것이 웹 커뮤니티가 ES6 언어 위원회에 요구한 것입니까? 나는 20년 동안 코딩을 해왔고 '클래스'라는 단어는 내 프로젝트의 어디에도 나타나지 않습니다. 솔직히 JavaScript는 JAVA...(script)처럼 보이기 시작했습니다. :-\

저는 @benaadams 및 @jonnenauha 와 함께 있습니다 ; 너무 이르고 Chrome과 Firefox가 이미 내부에서 JavaScript(V8 등...)를 최적화하고 있는 것처럼 이 새 버전의 언어를 크게 최적화하지 않으면 코드 속도가 느려질 수 있습니다.

erichlof 에 2015년 04월 17일

:+1:

ghost 에 2015년 04월 17일

@erichlof 글쎄요, 저는 사실 ES6 클래스와 모듈 지원을 가장 기다리고 있습니다. 현재 내 앱에 AMD를 사용하고 있습니다. 내가 작업하는 주요 JS 프로젝트는 수백 개의 "클래스"가 있는 ~10k 라인이고 AMD는 생명의 은인입니다. 개발 중 및 빌드 생성 시 모두. 크거나 더 작은 프로젝트에는 일종의 모듈 시스템과 의존하는 대상을 선언하는 방법이 필요합니다. 복잡한 프로젝트 구조를 갖게 되면 관리하기가 너무 복잡해집니다. 프로그램이 25x <script> 태그를 어떤 순서로 배치할지 알아낼 수 있도록 남겨두어서는 안 됩니다. three.js와 같은 파일 양이 많으면 어리석은 일입니다. 대부분의 프로젝트는 하나의 큰 js 파일(예: three.js)을 빌드하여 이 문제를 해결한 다음 다른 항목을 포함할 수 있는 임의의 extras/helpers 폴더가 있습니다. 이것은 다소 제한적이며 ~모든 것을 태양 아래에서 얻으려면 ~500kb(축소) 빌드를 포함해야 합니다.

어느 시점에서 나는 세 가지가 AMD 지원을 추가했다고 생각하지만 AMD가 사용되는지 감지하고 효과적으로 window.THREE를 선언하는 대신 함수를 호출하는 작은 코드 블록일 뿐입니다. 필요하지 않은 기능을 삭제하고 코어 외부에 원하는 것을 추가하고 순서대로 로드하는 단일 작업 파일로 최적화하는 맞춤형 빌드를 만드는 것이 현재 얼마나 어려운 일인지 모릅니다.

프로젝트에 "클래스"가 없을 수도 있지만 object.prototype(3.js가 많이 사용하는 것처럼)을 사용하면 사실상 동일한 것입니다. 동의하시겠습니까? 우리는 물건을 조합하고 목적을 부여하는 것을 좋아합니다. 그런 다음 다른 코드는 해당 개체와 깨끗한 선언적 방법을 사용하여 가져오기를 원합니다.

내가 말하는 것은 ES6 클래스와 모듈이 빌드를 위한 더 많은 구조와 모듈성을 제공하기 위해 three.js에 추가하는 것도 좋은 방법이라는 것입니다. 예를 들어 브라우저가 지원하지 않기 때문에 너무 이르다. 아직 모듈. 다른 사람들은 사용을 시작하고 babel 등을 사용하고 ES5 호환 빌드를 출력해야 한다고 말할 수도 있습니다. 좋은 생각인지는 모르겠지만 누가 알겠습니까. 이것은 개발을 더 어렵게 만들고, 파일을 저장할 때 빌드를 자동으로 시작해야 하며, 디버깅도 더 복잡해질 수 있습니다. 이것만으로도 나는 이 트랜스파일러가 가치가 없다고 생각하는 경향이 있습니다.

PS는 three.js에 대한 호언장담이 아니라 브라우저 지원이 제공되면 three.js와 같은 프로젝트에 대해 ES6에 이점이 있을 수 있다고 말했습니다. 그것은 단지 더 많은 것을 가질 것입니다.

jonnenauha 에 2015년 04월 18일

three.js에 도움이 될 수 있는 또 다른 기능은 WeakMap 및 WeakSet 입니다. 그 의미는 확실하지 않지만 "소유자"가 더 이상 ref를 보유하지 않으면 GC가 작업을 수행하지 않고 추적하는 데 사용할 수 있는 것 같습니다. three.js에는 이와 같은 상태가 많이 있으며 이를 내부적으로 사용하면 차이가 날 수 있습니다. 이것은 소유권 선언에 대한 C++의 공유/약한 ptrs와 약간 유사한 것 같습니다.

좋은 후보는 https://github.com/mrdoob/three.js/blob/master/src/lights/SpotLight.js#L12 와 같이 약한 참조일 수 있으며 대상이 다음과 같은 경우 자동으로 지워집니다. 현장에서 제거하고 수집했습니다. 그러나 어쨌든 컬렉션에 의존할 수는 없지만 일단 대상이 장면에서 제거되면 어쨌든 이를 무효화해야 할 것입니다.

이 모든 기능이 일반적으로 앱에 어떤 이점이 있는지 전문가가 블로그 게시물을 작성하기를 누가 알겠습니까? :)

jonnenauha 에 2015년 04월 18일

안녕하세요 @jonnenauha 입니다 .

예, '가져오기' 및 '내보내기'와 같은 새로운 기능이 특히 모듈성과 관련된 경우 유용할 것이라는 데 동의합니다. 이것이 @coballast 와 @kumavis 가 THREE.js를 사용자 정의 빌드와 코드 기반 유지 관리를 위해 모듈화하고 관리하기 쉽게 만드는 방향으로 가고 있다고 믿습니다. 저는 특히 THREE.js와 같은 대규모 라이브러리 형식이 있는 경우 모듈과 객체 및 함수의 재사용을 지지합니다.

그러나 기본적으로 JavaScript에서 수십 년 동안 사용되어 왔으며 이미 많은 견인력. 나는 구식일지 모르지만 JavaScript는 이미 객체 지향 언어(즉, 함수 = 객체 = 일급 시민)이지만 '고전적인' 언어는 아니라고 Douglas Crockford와 함께합니다. 클래스를 JavaScript로 구부립니다. 다른 접근 방식으로 설계되었습니다. 처음에는 (1990년대의 C/C++ 프로그래밍에서 유래) 당황했지만, 코드를 작성하거나 코드 아키텍처를 풀려고 할 때마다 점점 더 동의하는 접근 방식입니다. 문제.

THREE.js에 대한 구문 변경 대신 새로운 SIMD 프로그래밍 인터페이스와 같은 기능으로의 마이그레이션을 보고 싶습니다. THREE의 모든 수학 코드(특히 Vector3 및 Matrix4)가 이로부터 큰 이점을 얻을 수 있다고 생각합니다. 다음은 비디오 링크입니다(타임 코드에서 22:51 확인).
https://youtu.be/CbMXkbqQBcQ?t=1371
이 기능이 주요 브라우저에 도입되면 모든 THREE.js 사용자는 결과적으로 프레임 속도가 눈에 띄게 빨라지는 것을 볼 수 있습니다.

내 이전 게시물이 호언장담처럼 들렸다면 죄송합니다. 저는 THREE.js가 지금 어떻게 보이는지 좋아합니다. 임의의 부분을 쉽게 선택할 수 있고 무슨 일이 일어나고 있는지, 어디서 왔는지, 무엇을 사용하는지 알 수 있습니다. :)

erichlof 에 2015년 04월 18일

@erichlof @jonnenauha es6 클래스는 설탕일 뿐이며 내부적으로 프로토타입 메커니즘을 사용하여 런타임에 모든 것을 구현하고 있다는 점을 지적하고 싶습니다.

저는 es6 기능이 계산 성능에 영향을 미치지 않을 것이라고 상당히 낙관합니다. es6 모듈은 하나의 큰 파일이 아닌 여러 개의 작은 파일을 가져오기 때문에 엔진에 의해 최종적으로 구현될 때 로드 시간에 영향을 미칠 수 있습니다. HTTP/2는 문제가 되지 않을 수 있습니다. 어느 쪽이든 es6 모듈을 사용하는 경우 항상 하는 것처럼 browserify를 사용하여 번들을 빌드할 수 있습니다.

저는 개인적으로 코드를 더 간결하게 만들고 오류를 줄일 수 있기 때문에 코드베이스에서 es6 구문을 최대한 많이 사용합니다. 많은 사람들이 프로토타입 체인을 남용하고 잘못 사용하는 경향이 있다고 생각합니다. 좋은 예가 없습니다.

ghost 에 2015년 04월 18일

나는 또한 앉아서 es6이 엔진에 구현되기를 기다리는 것은 잘못된 생각이라고 생각합니다. 현재 브라우저에서 실행되는 좋은 결과를 생성하는 변환기를 지금 사용할 수 있습니다. 이렇게 하면 얻을 수 있는 이점이 엄청나기 때문에 조급해 하고 즉시 작업을 시작해야 합니다.

수동으로 코드를 옮기는 것은 좋은 생각이 아니라고 생각합니다. 유닉스 파이프의 발명가이자 일반적으로 반신반인 Doug McIlroy는 다음과 같이 말했습니다.
"도구를 만들기 위해 우회해야 하고 사용을 마친 후에 일부를 버릴 것으로 예상하더라도 프로그래밍 작업을 가볍게 하려면 미숙한 도움보다 도구를 사용하십시오."

es6에 관심이 있는 모든 사람이 이 리포지토리에 참여하고 기여하도록 권장합니다: https://github.com/5to6/5to6

ghost 에 2015년 04월 18일

전체 라이브러리를 자바스크립트의 다른 하위 집합으로 변환하는 데 동의하지 않습니다. 언제나처럼 우리는 무엇이 가능하고 장단점이 무엇인지 논의해야 합니다. 버전마다 성능이 다르기 때문입니다.

예를 들어, 약한 맵은 객체의 상태를 처리하기 위해 렌더러에서 큰 이득이 되는 것입니다. 가장 큰 단점은 약한 폴리필과 매우 적은 브라우저 지원 및 알려지지 않은 성능 특성이었습니다. (조사한지 시간이 좀 지나서 변경되었을 가능성이 있음)

그리고 우리는 es6만 보아서는 안됩니다. 예를 들어 ams.js는 소프트웨어 렌더러를 실행하는 기술로 훌륭할 것입니다. 자세한 내용은 http://stackoverflow.com/questions/18427810/three-and-asmjs/18439786#18439786을 참조하세요.

그리고 우리는 자바스크립트가 익숙하고 es6이 아직 대부분의 사람들에게 익숙하지 않기 때문에 대부분의 기여자들이 주로 기여하고 있다는 사실을 잊어서는 안됩니다.

gero3 에 2015년 04월 18일

@gero3 생각지도 못한 좋은점들이

위에서 제가 주로 이야기한 것은 기존 es5 기능과 의미 체계가 동일한 구문 설탕을 사용하는 것이므로 성능에 너무 많은 영향을 미치지 않으면서 트랜스파일러로 구축할 수 있습니다.

업데이트:
아무도 신경쓰지 않을지 모르지만 나는 마음을 바꿨다. 나는 우리가 수업을 사용해서는 안된다고 생각합니다. 나는 여전히 es6 모듈이 좋은 생각이라고 생각합니다.

ghost 에 2015년 04월 18일

저는 수업에 전적으로 찬성합니다. JavaScript의 개체 프로토타입이 할 수 있는 모든 놀라운 일을 얻었습니다. 그러나 THREE.js(및 기타 많은 최신 OS 프로젝트)에서 우리는 프로토타입 상속을 사용하여 클래스를 시뮬레이션하고 있으므로 멋진 구문을 함께 사용하고 다음과 같은 해킹 항목을 제거하는 것이 어떻습니까?

THREE.Object3D.call( this );

그리고

THREE.Scene.prototype = Object.create( THREE.Object3D.prototype );

lmcd 에 2015년 04월 28일

안정적인 Chrome 및 Firefox에서 클래스가 지원되는 즉시 코드 업데이트를 고려하지 않을 것입니다 😊

mrdoob 에 2015년 04월 29일

👍3

@mrdoob 클래스는 현재 안정적인 Chrome 42에서 지원되며 Firefox 39는 6월 FYI 출시 예정입니다 😊

lmcd 에 2015년 04월 30일

요즘은 iOS의 사파리가 끌리는 것 같아요... 😣

mrdoob 에 2015년 04월 30일

수업은 훌륭하고 다른 ES7 기능도 마찬가지입니다. 우리 프로젝트 중 하나에서 사용하고 있지만 Chrome, Firefox, IE 및 Safari와 같은 모든 브라우저에서 실행해야 하기 때문에 크로스 컴파일러(babel.js)를 도입해야 했습니다.

bhouston 에 2015년 04월 30일

babel.js(babelify)를 실행하는 브라우저화 변환이 있으므로 내 노력과 잘 맞을 것입니다.

ghost 에 2015년 04월 30일

그냥 호기심에서, 이들 중 일부에 대한 작업이 시작되었습니까? :)

nylki 에 2015년 07월 09일

우리는 아직 속도에 미치는 영향을 알지 못하기 때문입니다.

gero3 에 2015년 07월 09일

내 이해는 변환됩니다 ES6은 대부분 성능이 좋지 않으므로 브라우저에 구현될 때까지 프로덕션용이 아닙니다. 즉, 새로운 프로젝트 또는 모듈은 오늘날 이러한 편의를 조정해야 하지만 이 결정에는 성능이 고려되어야 합니다.

MasterJames 에 2015년 07월 09일

@erichlof imo에 동의합니다. 가장 유용한 구현은 폴리필을 사용하는 경우에도 SIMD(https://github.com/tc39/ecmascript_simd)입니다. 사용자가 가장 많은 혜택을 볼 수 있을 것 같습니다.

Globegitter 에 2015년 08월 20일

SIMD는 ThreeJS에서 어디에 적합할까요? ThreeJS는 이미 모든 중요한 계산을 GPU로 오프로드하고 있다고 생각합니다. Vector 클래스에서 사용하는 것을 어느 정도 이해할 수 있지만 ThreeJS에서 실제로 수행되는 수학은 거의 없으며 대부분 이러한 벡터가 GPU로 전송됩니다.

이전에 SSE2/SSE4 확장을 구현했을 때의 경험에 비추어 볼 때 대부분의 경우 이점이 일시적이라는 것을 알게 되었습니다. 유일한 실제 사례는 동일한 작업을 수행하기를 원하는 대규모 어레이가 있는 경우였습니다. 작업.

bhouston 에 2015년 08월 20일

안녕하세요 @buston님 .
Matrix 작업에서도 마찬가지입니까? SIMD를 생각할 때 4 X 4 행렬 연산이 가장 이익이 될 것이라고 생각했습니다. 그리고 우리 모두 알다시피, 행렬은 앱의 복잡성에 관계없이 JavaScript/CPU 측에서 Three.js의 모든 애니메이션 프레임에 사용됩니다.

Babylon.js 사용자가 신경 쓰지 않는다면 이 모든 것을 시작하는 방법에 대한 힌트가 있습니다.
https://github.com/BabylonJS/Babylon.js/blob/master/src/Math/babylon.math.js#L2030 -L2093

erichlof 에 2015년 08월 20일

형식을 변환해야 하는 경우 단일 행렬 배수는 실패할 가능성이 높다고 생각합니다. 매트릭스가 항상 SIMD 형식인 경우 이점이 있을 수 있습니다.

그러나 그럼에도 불구하고 행렬 곱셈은 재정렬 작업이 필요한 행과 열을 곱해야 하기 때문에 최적이 아닌 경우가 많습니다.

SIMD 최적화에 대한 대부분의 노력(동종 작업이 있는 대규모 어레이 제외)은 노력할 가치가 없지만 다른 사람들이 벤치마크를 수행하여 알아내는 것은 괜찮습니다.

결과 코드는 디버그 및 유지 관리도 어렵습니다.

작동할 수 있는 한 가지 전략은 모든 벡터와 행렬이 SIMD 호환 메모리 레이아웃을 기본 표현으로 사용하도록 하는 것입니다. 이것이 제가 Quake 3의 수학 라이브러리에서 믿었던 것입니다. 그러나 효율성을 위해 vec2 및 vec3 유형에 대해 4개의 부동 소수점을 사용해야 하지만, GPU에 업로드하려는 경우 이제 추가 부동 소수점이 있기 때문에 문제가 됩니다.

bhouston 에 2015년 08월 20일

무슨 말인지 알겠습니다. 통찰력과 전문 지식에 감사드립니다. 얼마 전 SIMD.js 프레젠테이션에 깊은 인상을 받은 것과 그것을 three.js에 집어넣고 유지하는 것은 두 가지 다른 일이라고 생각합니다. 당신이 몇 가지 성능 비교를 수행했다고 말한 것처럼 흥미로울 것입니다. three.js와 함께 사용되는 Cannon.js 및 Oimo.js와 같은 물리 라이브러리가 SIMD에서 더 많은 이점을 얻을 수 있을까요?

erichlof 에 2015년 08월 20일

@bhouston Ahh

@erichlof 관심이 https://github.com/Globegitter/three.js/tree/include-SIMD 지점을 시작했습니다. 여기서 Vector3을 SIMD로 교체하기 시작했습니다. 그것은 여전히 무거운 WIP이고 내 시간이 제한되어 있으므로 얼마나 멀리 갈 수 있는지 알아 보겠습니다. 또한 최신 Firefox를 야간에 사용하면 폴리필 없이 이 코드를 실행할 수 있습니다(여기서 기본 구현은 폴리필에 비해 분명히 ~20배 더 빠릅니다: https://blog.mozilla.org/javascript/2015/03/10/state -of-simd-js-performance-in-firefox/).

Globegitter 에 2015년 08월 21일

@erichlof @jonnenauha es6 클래스는 설탕일 뿐이며 내부적으로 프로토타입 메커니즘을 사용하여 런타임에 모든 것을 구현하고 있다는 점을 지적하고 싶습니다.
저는 es6 기능이 계산 성능에 영향을 미치지 않을 것이라고 상당히 낙관합니다.

JS 객체의 (상당히 복잡한) 구현에서 모든 JS 엔진에는 실제로 ES6에 대한 다른 코드 경로가 있습니다.

es6 모듈은 하나의 큰 파일이 아닌 여러 개의 작은 파일을 가져오기 때문에 엔진에 의해 최종적으로 구현될 때 로드 시간에 영향을 미칠 수 있습니다. HTTP/2는 문제가 되지 않을 수 있습니다.

클라이언트는 여전히 전체 앱 JS 수준 압축을 사용하여 네트워크 대역폭을 줄이고 지적 재산을 보호하기를 원할 수 있습니다.

클로저 컴파일러가 Three.js를 이해하도록 하면 ES6으로 컴파일하고 전환할 적절한 시점을 확인할 수 있을 뿐만 아니라 많은 추가 이점이 있습니다. 지금은 이런 노력이 필요한 곳이라고 생각합니다...

그러나 그럼에도 불구하고 [SIMD] 행렬 곱셈은 재정렬 작업이 필요한 열과 행을 곱해야 하기 때문에 최적이 아닌 경우가 많습니다.

SIMD 명령어 세트에는 다음과 같은 행렬 곱셈을 구현하기 위해 종종 "스칼라 및 더하기 곱하기" 명령어가 있습니다.

for i : 0..3:
    dst.col[i] = lhs.col[i] * rhs.co[i][0] // multiply vector by scalar
    for j : 1..3:
        dst.col[i] += lhs.col[i] * rhs_col[i][j] // multiply vector by scalar & add

행렬 곱셈은 실제로 오른쪽 피연산자의 열 벡터에 변환을 적용하는 것입니다. 이제 변환은 많은 내적(우리가 일반적으로 펜과 종이에 사용하는 혼란스러운 방식)으로 보거나 대상 공간의 축 벡터 = 왼쪽의 열 벡터의 선형 조합으로 볼 수 있습니다. 피연산자.

tschw 에 2015년 08월 21일

@Globegitter 와우 멋진 시작입니다! 새 분기도 실험할 수 있도록 Firefox Nightly를 사용할 예정입니다!

erichlof 에 2015년 08월 21일

@Globegitter 누군가가 믿을 때 앞장서서 무언가를 하는 것을 좋아합니다. 코드는 토론보다 더 빨리 다양한 관점을 해결합니다.

ghost 에 2015년 08월 21일

기본 구현이 폴리필에 비해 분명히 ~20배 빠릅니다.

또한 폴리필이 SIMD가 아닌 것과 비교하여 얼마나 느린지 알고 싶습니다.

새 분기도 실험할 수 있도록 Firefox Nightly를 사용할 예정입니다!

about:flags 에서 실험 및 asm.js를 켜서 Edge에서 시도할 수도 있어야 합니다 .

benaadams 에 2015년 08월 21일

@Globegitter 편집자가 공백을 변경하여 정말 불쾌한 diff로 이어지는 것 같아요: https://github.com/Globegitter/three.js/commit/d835ca3a22eed4ed4603534773ae55c29d5a8026

SIMD 유형을 사이드카로 만들고 있다는 것을 알았습니다.

https://github.com/Globegitter/three.js/commit/8ed9c1d351a3b0587a1f05051922d271d79f642d

Vector3 x, y, z를 getter/setter로 변경하고 float32x4만 저장하도록 제안해도 될까요? 나는 그러한 접근 방식이 더 적은 변경으로 구현하기가 훨씬 쉬울 수 있다고 생각합니다.

속성을 정의하는 가장 좋은 방법은 확실하지 않지만 mrdoob은 다음과 같은 작업을 수행합니다.

https://github.com/mrdoob/three.js/blob/5c7e0df9b100ba40cdcaaf530196290e16c34858/examples/js/wip/proxys/ProxyVector4.js#L18

수학 유형 뒤의 기본 저장 유형으로 SIMD를 사용하는 것이 가장 효율적일 수 있으며 추가 변환이 필요하지 않습니다. 표준 벡터/행렬 연산에 대한 가이드가 필요한 경우 다음은 Bullet Physics SSE 수학 라이브러리입니다.

https://code.google.com/p/bullet/source/browse/trunk/src/vectormath/sse/

bhouston 에 2015년 08월 22일

@bhouston , 이러한 메모에 감사드립니다. 저는 이전에 3과 SIMD를 많이 사용하지 않고 몇 시간 안에 얼마나 많은 작업을 수행할 수 있는지 알아보기 위해 바로 들어가고 있었습니다(우리는 대부분의 프로젝트에서 이 기능을 사용합니다). 따라서 세 가지를 아는 사람의 이 피드백은 정말 감사합니다. 그리고 예, 내 편집기에서 그것을 꺼야합니다.

Globegitter 에 2015년 08월 22일

@tschw 행렬/벡터 수학에 대한 메모에 감사드립니다! 그게 더 낫다는 말이 맞습니다.

bhouston 에 2015년 08월 22일

@Globegitter 다음은 개체의 프로토타입에 대한 setter/getter의 더 나은 예입니다. https://github.com/mrdoob/three.js/blob/master/src/core/Object3D.js#L83

bhouston 에 2015년 08월 22일

ES2015 작업에 몇 센트(주로 노드에서)

Javascript 엔진(예: V8)이 ES6 기능을 최적화하는 데 필요한 부분이 있습니다.
let x = 1, y = 2 와 같은 내 경험 코드에서 v8이 결국 지원될 것으로 예상하지만 v8을 최적화 해제합니다.
ES5로 트랜스파일된 코드는 ES6 코드보다 느리게 실행될 수 있습니다.
맵과 세트는 성능의 승리입니다.
수업이 좋다
Babel을 사용하는 것은 워크플로에 문제가 될 수 있습니다. 아마도 ES6을 구문용으로만 사용한다면 노력할 가치가 없을 것입니다.

zz85 에 2016년 03월 10일

👍1

반년 전에 나는 몇몇 Three.js 함수(4x4 행렬 곱셈, Vector4 등)를 SIMD로 변환했고 당신은 그것을 시도할 수 있습니다. 어느 시점에서는 북마크로 작동했지만 지금은 최신 Three 버전으로 작업하려면 새로 고침이 필요할 수 있습니다.

Firefox Nightly 는 기본 SIMD를 기본적으로 지원합니다.
--js-flags="--harmony-simd" 플래그가 있는 Chrome은 SIMD의 JS 폴리필을 지원하므로 비-simd 버전보다 느릴 것입니다. 최소한 작동하는지 확인하고 실험할 수 있습니다!

350% 성능 향상은 거짓말입니다 :)

또한 Vector3의 일부를 이식했지만 주석이 달려 있습니다.

https://github.com/DVLP/three.turbo.js

편집: 내 하드 드라이브 어딘가에 최신 버전이 있으므로 이 프로젝트를 곧 업데이트하겠습니다.

DVLP 에 2016년 08월 30일

멋진 시청 및 응시 +1.
성능을 확인하고 해당 성능에 따라 이러한 기능을 활성화 또는 비활성화하는 시스템이 훌륭할 것입니다.

MasterJames 에 2016년 08월 30일

성능을 확인하고 해당 성능에 따라 이러한 기능을 활성화 또는 비활성화하는 시스템이 훌륭할 것입니다.

하나는 Vector3 모듈 내에 두 개의 Vector3 정의가 있고 SIMD가 기본인지 여부에 따라 조건부로 하나 또는 다른 하나를 반환할 것이라고 생각합니다. 나는 그것이 효과가 있다고 생각하지만 다운로드 측면을 증가시킬 것입니다. SIMD를 사용할 수 있는지 여부에 따라 전환되는 몇 가지 함수가 있을 수 있습니다. 아마도 SIMD는 수학 함수의 작은 하위 집합에 대해서만 가장 중요할 것입니다. 전체 코드로 볼 때 이것이 적었다면 지금 넣는 것이 좋을 것입니다. 그러나 SIMD를 사용할 수 없을 때 느려지지 않도록 선택 사항이어야 합니다.

bhouston 에 2016년 08월 30일

Matrix4 의 multiplyMatrices() SIMD 버전은 현재 복잡한 장면에서 가장 많이 호출되는 방법이므로 시작할 수 있습니다.

https://github.com/mrdoob/three.js/blob/dev/src/math/Matrix4.js#L383 -L419

screen shot 2016-08-30 at 20 46 29

mrdoob 에 2016년 08월 31일

@mrdoob 여기에서 보세요. 완료되었습니다.
https://github.com/DVLP/three.turbo.js/blob/master/src/three.turbo.js

북마크로 사용해 보세요:
javascript:(function(){var script=document.createElement('script');script.src='//rawgit.com/DVLP/three.turbo.js/master/src/three.turbo.js';document.head.appendChild(script);})()

책임있는 코드 조각

THREE.Matrix4.prototype.multiplyMatrices = function(a, b) {
    var ae = a.elements,
      be = b.elements,
      tb = this.elements,
      arr1 = SIMD.Float32x4.load(ae, 0),
      arr3 = SIMD.Float32x4.load(ae, 4),
      arr5 = SIMD.Float32x4.load(ae, 8),
      arr7 = SIMD.Float32x4.load(ae, 12),
      arr2,
      arr4,
      arr6,
      arr8,
      res;
    // calculated version
        for (var i = 0; i < 4; i++) {
            arr2 = SIMD.Float32x4.splat(be[i * 4]);
            arr4 = SIMD.Float32x4.splat(be[i * 4 + 1]);
            arr6 = SIMD.Float32x4.splat(be[i * 4 + 2]);
            arr8 = SIMD.Float32x4.splat(be[i * 4 + 3]);
            res = SIMD.Float32x4.add(SIMD.Float32x4.add(SIMD.Float32x4.mul(arr1, arr2), SIMD.Float32x4.mul(arr3, arr4)), SIMD.Float32x4.add(SIMD.Float32x4.mul(arr5, arr6), SIMD.Float32x4.mul(arr7, arr8)));
            SIMD.Float32x4.store(tb, i * 4, res);
          }
}

반년 전에 이것을 테스트했을 때 "for" 루프가 펼쳐진 버전이 최소한으로 빠르다는 것을 알았습니다. 이것이 내 작은 라이브러리에 루프가 주석 처리되고 하드 코드된 버전이 존재하는 이유입니다.

"역" 분기에 더 많은 기능이 있습니다.
https://github.com/DVLP/three.turbo.js/blob/inverse/src/three.turbo.js

DVLP 에 2016년 08월 31일

👍1

성능 차이는 무엇입니까?

mrdoob 에 2016년 09월 01일

https://jsfiddle.net/tk6zx5dm/6/

때에 따라 다르지. Nightly에서 계산 수가 적으면(<1000) 결과가 3배 느려집니다. 계산 수가 10000보다 크면 속도가 ~40% 더 빠릅니다.

--js-flags="--harmony-simd" 플래그가 활성화된 Chrome에는 실제 SIMD가 없지만 JavaScript 폴리필이 있으므로 현재로서는 속도가 몇 배나 느립니다.

테스트하기에 좋은 곳은 Crosswalk 프로젝트(Chromium 기반)입니다. Android용 실제 SIMD가 있으므로 이 JSFiddle의 코드로 프로젝트를 빌드하여 결과를 확인하는 것은 흥미로운 실험이 될 수 있습니다.

DVLP 에 2016년 09월 01일

어쨌든 예제 페이지에 simd polyfill을 포함하고 싶지 않을 수 있습니다. 사람들이 시험해보기에 조금 더 편리합니다. 콘솔에 한 줄을 기록하거나 네이티브를 사용할 수 없을 때 화면에 텍스트를 입력합니다(폴리필은 아마도 활성화되었다는 힌트를 남길 것입니다).

Chrome이 --js-flags="--harmony-simd" js simd polyfill을 로드하는 이유를 상상할 수 없습니다. 이는 사용자 영역에서 이미 수행할 수 있을 때 의미가 없습니다! 이것의 이점은 무엇입니까? 아마도 그들은 점차적으로 물건을 넣기 시작할 것입니다. 플래그에서 실제로 무슨 일이 일어나고 있는지, 좋은 링크가 있다는 것을 어디서 읽었습니까? https://www.chromestatus.com/features/5757910432874496 에서 "개발 중"인 것 같습니다.

편집: 실제 주제로: 성능이 몇 가지 개체에서 많은 개체에 이르기까지 모든 곳에 있는 경우 이 항목을 three.js에 넣는 것이 매우 어렵다고 상상합니다. 모든 구현이 1~N개의 개체로 성능 향상을 제공할 수 있다면 기능을 감지하고 의미가 있는 곳에서 사용해야 합니다. 네이티브 impls가 일관성이 없으면 전체가 어디로 가는지 알 수 없으므로 귀찮게 작업하고 개발 시간을 더 생산적인 데 사용하십시오.

three는 성숙해지면 이에 뛰어들 수 있습니까? 아니면 three.js 지원이 브라우저 구현을 더 잘 할 수 있도록 할 수 있습니까? 언리얼 엔진 및 기타 시뮬레이션/수학 사용 사례가 브라우저 공급업체의 원동력이 될 것이라고 생각합니다. 특히 얼마나 많은 라이브러리가 이 기능을 사용하고 싶어하는지가 아닙니다. 하지만 누가 알겠어요.

jonnenauha 에 2016년 09월 01일

Chrome이 --js-flags="--harmony-simd"를 사용하여 js simd 폴리필을 로드하는 이유를 상상할 수 없습니다.

사용자가 테스트를 시작할 수 있도록 브라우저가 이러한 방식으로 수행하는 것이 일반적인 관행이라고 생각합니다. 예를 들어, 내가 올바르게 이해한다면 이것이 WASM이 처음에 브라우저에 도입되는 방식입니다.

GGAlanSmithee 에 2016년 09월 01일

백부장이 필요하다는 불가피성을 뒷받침하는 모든 주장. 기능을 활성화 또는 비활성화하고 최적의 성능을 결정할 수 있는 성능의 실시간 모니터링. 따라서 그림자 맵 밀도도 카메라 거리 등에 따라 변경되어야 합니다. 어쨌든 저는 이것이 필요하지 않은 타사 도구가 될 것이라는 합의가 있다는 것을 알고 있습니다. 그래도 잠재의식은 아니더라도 그 점을 의식 속에 간직하고 싶습니다.
아마도 Pollyfill을 확인하고 SIMD를 비활성화하지만 다시 FPS가 모든 것을 알려줍니다. 활성화 또는 비활성화할 항목의 우선 순위는 사용자/앱별 기본 설정으로 가장 좋습니다. 듣기 주셔서 감사합니다! 가까운 장래에 더 빠른 GL을 기대합니다. 나머지를 능가할 준비를 합시다.

MasterJames 에 2016년 09월 02일

SIMD에 데이터를 로드하는 프로세스는 Nightly에서 SIMD를 사용하는 이점을 무시하는 오버헤드를 생성할 수 있습니다. Chrome의 성능이 매우 궁금하지만 실제 SIMD가 있는 최신 Chromium은 여기에 있습니다. http://peterjensen.github.io/idf2014-simd/
그것은 낡았다.

DVLP 에 2016년 09월 02일

업데이트:
이제 SIMD는 Edge에서도 작동합니다. about:flags 로 이동하여 "실험적 JavaScript 기능 활성화"(Edge 다시 시작)를 선택하여 활성화할 수 있습니다
이것이 실제 SIMD인지 폴리필인지 확실하지 않습니다. 이 테스트는 내 컴퓨터에서 ~40% 더 느린 SIMD를 렌더링합니다./ https://jsfiddle.net/tk6zx5dm/6/

Matrix4 개체에 캐시된 SIMD 개체를 사용한 테스트 변형, 이것이 유용할지 확실하지 않음
https://jsfiddle.net/tk6zx5dm/15/
흥미로운 점은 캐시된 SIMD 객체가 있는 코드가 polyfill SIMD(...? 이상한)를 사용하는 Chrome에서도 _때때로_ 더 빠릅니다.

THREE.Matrix4.prototype.multiplyMatrices = function(a, b) {
  var i = 4;
  while(i--) {
    SIMD.Float32x4.store(this.elements, i * 4, 
      SIMD.Float32x4.add(
        SIMD.Float32x4.add(
          SIMD.Float32x4.mul(
            a.cacheSIMDRow1,
            b.cacheSIMDSplat[i * 4]
          ),
          SIMD.Float32x4.mul(
            a.cacheSIMDRow2,
            b.cacheSIMDSplat[i * 4 + 1]
          )
        ),
        SIMD.Float32x4.add(
          SIMD.Float32x4.mul(
            a.cacheSIMDRow3,
            b.cacheSIMDSplat[i * 4 + 2]
          ), 
          SIMD.Float32x4.mul(
            a.cacheSIMDRow4,
            b.cacheSIMDSplat[i * 4 + 3]
          )
        )
      )
    );
  }
}

캐싱 - 결국에는 전체 솔루션을 느리게 렌더링할 수 있는 모든 updateMatrix()에서 실행되어야 합니다.

THREE.Matrix4.prototype.updateSIMDCache = function() {
  this.cacheSIMDRow1 = SIMD.Float32x4.load(this.elements, 0);
  this.cacheSIMDRow2 = SIMD.Float32x4.load(this.elements, 4);
  this.cacheSIMDRow3 = SIMD.Float32x4.load(this.elements, 8);
  this.cacheSIMDRow4 = SIMD.Float32x4.load(this.elements, 12);

  if(!this.cacheSIMDSplat) {
    this.cacheSIMDSplat = [];
  }
  for(var i = 0; i < 16; i++) {
    this.cacheSIMDSplat.push(SIMD.Float32x4.splat(this.elements[i]));
  }
};

DVLP 에 2016년 09월 08일

ES6 스타일이 재검토되었는지 궁금합니다. 전체 코드는 연결기를 실행하지 않고는 라이브로 사용할 수 없으므로 babel도 실행하고 적절한 곳에서 ES6 항목을 사용하기 시작하지 않겠습니까?

greggman 에 2017년 01월 31일

전체 코드는 연결기를 실행하지 않고는 라이브로 사용할 수 없으므로 babel도 실행하고 적절한 곳에서 ES6 항목을 사용하기 시작하지 않겠습니까?

주로 babel 생성 코드의 성능 영향에 대한 테스트가 부족하기 때문입니다. 또한 let/const 대신 var를 사용할 때 V8이 더 빠른 코드를 생성한다고 들었습니다.

mrdoob 에 2017년 01월 31일

참고: 저는 최근에 "컴팩트하고 성능이 뛰어난 ES5로 컴파일할 수 있는 ES 기능으로 제한되는" bublé 를 사용하기 시작했습니다.

arose 에 2017년 01월 31일

❤1

이 링크의 하단은 var 대 let in 루프를 설명하는 데 도움이 됩니다.
http://stackoverflow.com/questions/21467642/is-there-a-performance-difference-between-let-and-var
개인적으로 나는 트랜스파일러가 없는 솔루션이 브라우저에 도달하기를 기다리고 있습니다. 'await'는 빠를수록 좋지만 지금은 그런 식으로 작성되고 트랜스파일러를 통해 실행되어야 합니다(끔찍하게 손상됨). 하지만 Chrome에서 작동한다면?! 그래서 다른 브라우저에 대한 테스트? 나는 '케이크를 먹게 하거나 크롬을 사용하게 하라'고 말한다. (내가 가장 좋아하는 표현).
'let'은 테스트를 통해 더 나은 것으로 입증된 상황에서 사용해야 한다고 생각합니다.
범위 지정을 피하기 위해 'var'가 호이스트되는 것처럼 보이지만 원하는 경우 'let'이 가장 좋습니다. 특정 상황에서도 'let'이 메모리 공간을 더 작게 유지해야 한다고 생각합니다.

MasterJames 에 2017년 02월 01일

트랜스파일된 코드는 손으로 최적화하는 것만큼 빠르지 않습니다. JSPerf가 다운된 것은 유감입니다. 저는 구글보다 더 자주 방문하곤 했습니다.
편집: JSPerf.com은 다운되지 않았습니다! 1년 동안 작동하지 않으면 영원히 죽은 줄 알았어
let 내 Chrome Canary에서 var 보다 3배 느림: https://jsperf.com/let-vs-var-performance/14
Firefox와 Edge에서는 속도 차이가 없지만 Chrome이 가장 중요합니다.
누군가 Safari에서 테스트할 수 있습니까?

DVLP 에 2017년 02월 01일

수업은 훌륭하고 현대적인 것 같습니다! 이것이 이미 일정에 있는지 아는 사람이 있습니까?

Rubinhuang9239 에 2018년 04월 17일

@ Rubinhuang9239 나는 그것을 시도하는 사람을 보지 못했습니다.

mrdoob 에 2018년 04월 18일

내 Chrome Canary에서 var보다 3배 더 느립니다: https://jsperf.com/let-vs-var-performance/14

그만한 가치가 있기 때문에 해당 테스트를 사용하여 Chrome 66, Firefox 59 및 Edge 42에서 let 및 const 가 이제 var 보다 약간 빠릅니다.

looeee 에 2018년 04월 18일

클래스 전환은 매우 간단해야 한다고 생각합니다. 대부분의 작업은 꽤 오래 전에 수행된 롤업의 채택이었습니다. 영웅이 ThreeJS에서 몇 시간 만에 클래스를 구현할 수 있다는 사실에 놀라지 않을 것입니다.

글쎄, 수업이 많기 때문에 수동으로 했다면 아마 8시간 정도 걸릴 것입니다.

bhouston 에 2018년 04월 18일

😄1

소규모로 시작하여 수학 수업을 먼저 변환하고 홍보를 할 수도 있습니다. 그것이 효과가 있다면, 다른 사람들로 넘어가십시오.

bhouston 에 2018년 04월 18일

👍1

@looeee 1년이 넘었으므로 ES6이 성능을 따라잡을 수 있었던 것은 놀라운 일이 아닙니다.

DVLP 에 2018년 04월 18일

2019년은 마침내 예제/문서에서 일부 ES6 코드를 채택하기 시작하는 해입니다. @mrdoob? 😄

ES6은 꽤 오랫동안 표준이었으며 새로운 개발자는 ES6을 배웁니다. 또한 #16220에서 논의한 대로 예제에서 IE11 지원을 중단할 수 있습니다. 어떤 개발자가 IE11을 사용하여 three.js 예제를 보나요? 😂

새 사용자를 위한 코드를 단순화하기 위해 가장 필요한 기능은 클래스와 템플릿 문자열이며 현재 기본 const/let을 잊지 않는 것 같습니다.

시작하기로 결정하면 기여할 수 있습니다.

marcofugaro 에 2019년 04월 24일

👍2

단계별로. 지금은 three.module.js 를 사용하도록 예제를 업데이트하여 시작하겠습니다.

mrdoob 에 2019년 04월 27일

🎉2 👍2

단계별로. 지금은 three.module.js를 사용하도록 예제를 업데이트하여 시작하겠습니다.

이 단계는 잠시 동안 완료되었습니다. 이제 공식적으로 다음 단계로 넘어갈 때가 되었습니까?

두 명의 후보자:

const/let
클래스

클래스는 이미 상자 지오메트리에서 얼마 동안 사용되었기 때문에 먼저 그렇게 하는 것에 투표합니다. 또는 동시에 둘 다 할 수 있습니다.

Three.js: 일부 ES6 기능 채택

클래스 예시

순회 생성기 예제

가장 유용한 댓글

모든 74 댓글

관련 문제