Home > Developer > Web Develop
With canvas and JavaScript, you can draw 2d images on a page, but for 3d images, there is nothing to do. To draw a 3d image, you must use WEBGL.
In my understanding, WebGL is embedded in the browser, which is used when using JavaScript to invoke the WebGL API provided by the browser and then drawing the image in the canvas drawing area. When I started to touch WebGL, I didn't understand it, so I thought the code would be so messy, repeating it a bunch of simple functions.
Here's one of the simplest WebGL examples
<!DOCTYPE HTML><HTMLLang= ' Zh-cmn-hans '><Head><MetaCharSet= ' Utf-8 '/><title>Canvas-webgl</title></Head><Body><H1>Html5-canvas-webgl</H1><CanvasID= ' GLCanvas 'width= ' $ 'Height= ' $ '></Canvas><Scripttype= "Text/javascript">window.onload= function() {init ();}functioninit () {varCanvas, GL; Canvas=document.getElementById ('GLCanvas'); GL=Canvas.getcontext ('WebGL') ||Canvas.getcontext ('Experimental-webgl'); //get the WebGL drawing context if (!GL) {Console.log ('webgl! not supported '); return; } gl.clearcolor (0.0, 0.0, 0.0, 1.0); //Set Background colorGl.clear (GL. Color_buffer_bit|GL. Depth_buffer_bit); //clear the plot area}</Script></Body></HTML>
It is important to note that in WebGL, the values in the color Rgba are using floating-point numbers, which are from 0.0 to 1.0, such as Red: (1.0, 0.0, 0.0, 1.0)
Learn WebGL: The first code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
