canvas vs. webGL vs. CSS 3d -> który wybrać?

Do podstawowej aplikacji internetowej 3D, tj. Kilku kostek, rotacji i tłumaczenia w przestrzeni 3d - co jest lepsze?canvas vs. webGL vs. CSS 3d -> który wybrać?

CSS 3d wydaje się najłatwiejszy, ale nie jest obsługiwany w IE9 lub na mapie drogowej dla IE10 i oferuje mniej kontroli niż inne opcje. Płótno & Wydaje się, że WebGL jest bardziej skomplikowany, ale nie wiem, czy są one przyszłościowe.

Dlaczego jest tak wiele różnych technik 3D? co jest lepsze? co jest przyszłym dowodem?

Źródło

2011-10-17 Elad Katz

nie programistą js, ale użyłem [Three.js] (https://github.com/mrdoob/three.js) łatwo i ma wiele renderujących (WebGL, SVG i płótno). Grałem z renderem Canvas i działa on prawie we wszystkich przeglądarkach jakiś czas temu i jedyny problem jaki pamiętam to szybkość przy używaniu tekstury (ponieważ renderowanie Canvas w zasadzie wykonuje wszystkie matematykę i renderowanie tylko na CPU), więc użyłem kolorów głównie . Moje testy również działały na iOS i Androidzie, ale wolniej w przypadku złożonych modeli. Modele Basic/Low-Poly działają nieco przyzwoicie dzięki Canvas nawet na urządzeniach mobilnych. Zobacz moje stare przykłady [tutaj] (http://bit.ly/fOLOgM) HTH –

To szaleństwo, prawda? Chuck Norris używa właśnie divs: http://www.uselesspickles.com/triangles/ – joeytwiddle

BTW, do korzystania z WebGL od teraz, w zasadzie potrzebujesz Canvas. WebGL różni się od Canvas tylko w tym sensie, że dostajesz kontekst WebGL. WebGL - 'document.getElementById ('element canvas'). GetContext (" webgl ");' .. Normalne płótno 2D "document.getElementById (" element canvas "). GetContext (" 2d "); // jeśli zmienisz na "3d", nadal możesz mieć rysunki 3D, bez WebGL'a –

Powodem, dla którego istnieje tak wiele różnych opcji 3D, jest to, że cały czas jest w stanie ciągłej zmiany - 3D w przeglądarce nie jest gotowym standardem, a z wymienionych opcji - jedynym, który działa we wszystkich obecnie dostępnych przeglądarkach Canvas.

W szczególności mało prawdopodobne jest, aby IE dawało ci dużo radości - jak mówisz, 3D nie jest nawet planowane na IE10 w tym momencie. Mimo to SVG został dodany do IE9 dość późno, więc zawsze jest nadzieja. Ale jest mało prawdopodobne, że Microsoft postawił tylko te cechy, które zostały formalnie ratyfikowane jako standardy.

Z wymienionych technologii, Canvas jest zdecydowanie najlepsza obsługiwana wersja, ale Canvas nie jest technologią 3D; jest to płótno 2D, a jeśli chcesz mieć w nim efekty 3D, musisz je napisać samemu i nie będą przyspieszane sprzętowo.

Domyślna odpowiedź na Twoje pytanie zależy od tego, jak ważna jest ta funkcja w Twojej witrynie. Jeśli jest to po prostu cukierek do oczu, którego użytkownicy nieobsługiwanych przeglądarek mogą bez niego mieć, to zrób to z niektórymi 3D CSS. Ale jeśli chcesz, aby była spójna we wszystkich obecnych przeglądarkach, zrób to za pomocą Canvas.

Zalecam, aby nie używać WebGL do swojej sprawy, ponieważ brzmi to jak przesada w stosunku do tego, co robisz.

3D CSS to prawdopodobnie odpowiedź z prawej strony:, ale do tej pory użyj opcji Canvas, aż pozostałe przeglądarki dodadzą obsługę 3D CSS.

Źródło

2011-10-17 10:52:37 Spudley

To jest eye candy, a jeśli nie wszystkie przeglądarki obsługują to teraz, ale w pewnym momencie to jest wystarczająco dobre dla mnie, więc CSS3 brzmi najlepiej. Co do płótna - to po prostu nie jest wystarczająco szybkie - obracanie kilku kostek w przestrzeni sprawiło, że komputer wzdrygnął się na 80% procesora.Wspomniałeś o SVG - w jaki sposób SVG pasuje do obrazu? który z nich najprawdopodobniej będzie standardem? –

Canvas i SVG to dobrze znane standardy. Ale płótno lepiej pasuje do tego, co robisz. SVG nie jest obsługiwany przez przeglądarkę Android aż do wersji 3.0, co stanowi dużą lukę w obsłudze obecnej generacji telefonów komórkowych. Jestem zaskoczony twoim raportem, że płótno walczy z obracaniem kilku kostek; Słyszałem raporty o tym, że działa z pełnym silnikiem 3D. Nie wiem szybko, ale spodziewałem się, że poradzi sobie całkiem dobrze z kilkoma prostymi sześcianami. Ale przeglądarki mogą się różnić. W zależności od twoich potrzeb, inną opcją jest oczywiście sfałszowanie go za pomocą animacji 2D. – Spudley

Czy WebGL nie jest formą płótna? Ludzie mówią, że WebGL vs Canvas, ale WebGL * to * Canvas. To jest mylące. – johnbakers

Naprawdę zależy od tego, co próbujesz zrobić. Jak proste jest proste?

3D CSS jest daleki od użytecznych. Doprowadziło to tylko do firefox. Ma zarówno błędy w firefox, jak i chrome. To nie działa w wersji FF9 beta na OSX. W Chrome ma też problemy co najmniej 16. Zobacz http://greggman.com/downloads/examples/intersecting-elements-3d-css.html i porównaj Safari na OSX prawie z każdą inną przeglądarką.

three.js (https://github.com/mrdoob/three.js/) używane do (i może nadal) zapewniają niektóre proste 3d za pomocą płótna.

W przeciwnym razie, jeśli chcesz coś ciekawego odchodzenie WebGL i wybrać bibliotekę (Three.js, SceneJS, etc ..)

musisz dokonać wyboru. Użyj WebGL i zrezygnuj z IE, użyj Flasha 11, użyj Unity3D, użyj Canvas i uzyskaj bardzo ograniczone 3d lub nie rób 3d.

WebGL jest już używany przez główne witryny. CNN używa teraz WebGL http://www.stinkdigital.com/en/work/ecosphere

Źródło

2011-11-26 10:29:36 gman

Łącze CNN wydaje się być martwe ... – andand

@i znalazłem link archiwizujący projekt Ecosphere i zaktualizowałem go. – Brad

Wiem, że to 2 lata, ale sądzę, że zamieściłbym to tutaj dla przyszłych czytelników.

Co wybrać w zależności od potrzeb.

Potrzebujesz prostego kształtu 3D bez animacji lub bez animacji? Spróbuj, jeśli możesz to zrobić za pomocą CSS3, to jest najłatwiejsze zdecydowanie. W przypadku IE prawdopodobnie można uzyskać bibliotekę, która oferuje wsparcie.

Czy potrzebujesz słodkich modeli 3D z ładną grafiką i potrafiących robić różne rzeczy? Przejdź do WebGL, nie możesz poprosić o większą kontrolę i wydajność dla 3d w przeglądarkach.

Potrzebujesz kształty 3d, które mogą wykonywać różne rzeczy, ale nie potrzebują tekstur i będą działać wszędzie i nie będą wymagały dużej wydajności? Przejdź na płótnie.

CSS3 jest przeznaczony tylko dla miłośników oczu. Możesz zrobić to z łatwością, stylizować w dowolny sposób i bardzo łatwo go utrzymać. Gdy chcesz zrobić coś więcej niż tylko okulary do oczu, załóż rękawiczki, ponieważ będzie to wymagało trochę pracy.

Za pomocą 2d Canvas można tworzyć rzeczy 3d. Jeśli jesteś na to nowy, będzie to bardzo denerwujące i skomplikowane (aby wymienić tylko jeden przykład, musisz wiedzieć o macierzach), możesz zrobić cokolwiek z płótnem 2D, które możesz zrobić w WebGL, ale coś będzie łatwiejsze w WebGL (poważnie, jeśli przechodzisz na Canvas 2D, nie próbuj używać tekstur, to koszmar). WebGL korzysta z OpenGL, co w skrócie oznacza, że zawsze będzie lepiej niż 2d Canvas.

Jednak WebGL wymaga od użytkownika posiadania kompatybilnej karty graficznej.

Źródło

2013-05-01 09:58:50 Johan

Każdy prawdopodobnie ma dość słuchania "to zależy", ale ... to zależy!

Trwa mała "wojna", czy lepiej używać Canvas lub HTML/CSS3, a mianowicie ponieważ Canvas działa wolniej niż DOM na starszych maszynach/urządzeniach. Yeap, DOM jest w niektórych przypadkach o wiele szybszy, a płótno jest szybsze w większości nowoczesnych przeglądarek/urządzeń.

WebGL - najlepsza opcja zarówno dla 2D, jak i 3D, ale ponieważ nie jest wystarczająco dobrze obsługiwana w różnych przeglądarkach i urządzeniach, w razie potrzeby będziesz musiał zastąpić płótno lub DOM.

Canvas - Mniej korzystne dla 3D w porównaniu z WebGL, ale bardziej nadaje się do kompatybilności, społeczność, narzędzia itp

DOM - Szybciej niż większość myśleć, jeśli jest stosowany w prawo, najwyższa wsparcie dookoła, ale nie można go zbyt fantazyjne animacji/w grach.

Nadzieja to pomaga

Źródło

2015-01-30 13:31:41 CatalinBerta

Myślę, że WebGL jest obsługiwany w większości przeglądarek (w tym mobilnych) z wyjątkiem IE. Przeczytaj tutaj: https://www.ichemlabs.com/1375. – Lucky

Tak, odpowiedź została udzielona prawie rok temu. W dzisiejszych czasach obsługa WebGL jest znacznie wyższa, horraay dla nas :) – CatalinBerta

canvas vs. webGL vs. CSS 3d -> który wybrać?

Odpowiedz

Powiązane problemy