WebGL Tutorial 02 - Rotating 3D Cube

Indigo Code · 152K views · 2016 · 40:07

Open on YouTube

Computer graphics & renderingWeb developmenttutorial

Why Stack Overflow recommends it

Stack Overflow users cite it as the tutorial they are following, or as an example of WebGL practice, when asking about stretched rendering and color conventions in their own WebGL code.

Recommended by 1 people across 1 different months, 2016 to 2019.

What it is

A 40-minute tutorial from Indigo Code, part of a from-scratch WebGL series that avoids libraries like Three.js. It explains how 3D scenes are projected onto a 2D screen and walks through building a rotating 3D cube with the glMatrix math library.

What people said

Recommends someuser2491 · 2019-10 · Stack Overflow · on “How to rotate a 3d cube along x axis using css?”

i am new to programming and i want to rotate the 3d cube along x axis using css. I have added the cube and below is the html and css to it. could someone let me know how to add the animation. below is the code, <div id="wrapper"> <div class="cube"> <!--Front--> <div></div> <!--Back--> <div></div> <!--Left--> <div></div> <!--Right--> <div></div> <!--Top--> <div></div> <!--Bottom--> <div></div> </div> </div> #wrapper{ width:300px; height:300px; perspective:700px; -webkit-perspective:700px; margin:100px auto; } .cube{ position:relative; width:150px; height:150px; transform-style:preserve-3d; transform:rotateY(35deg) rotatex(-38deg); } .cube div{ position:absolute; width:150px; height:150px; bac

Cites technik3k · 2016-06 · Stack Overflow · on “Is WebGL supposed to be stretched out on canvas”

I'm learning webgl. I'm fallowing a tutorial [this video] on youtube. My issue is the traingle I'm rendering to the canvas is streched out. [LINK] on a wider canvas. [LINK] on a more square canvas. (These are the same triangles.) Is that supposed to happen and how can I fix it.

Cites user3186555 · 2017-09 · Stack Overflow · on “WebGL color conventions - which do I use and why?”

So I'm learning WebGL for the first time, and I'm having difficulty understanding WebGL colors. My concern is that I have seen 2 formats or conventions for writing RGBA color data (or vectors if that is what they are called? - regarding shaders) Mozilla uses color on a scale of 0 to 255: Here is an example [LINK] However, I have seen other cases where developers (like this [this video] ) use color on a scale of 0 to 1.0, Is this a preference? Is it mandatory what convention you use per situation? If it is preference and not mandate, can I mix and match the two? Do browsers have a preference? For example in regards to mixing, is [1.0, 255, 1.0, 255] fully opaque white?