In this lesson we cover setting up WebGL for use, including creating a canvas, getting the WebGL rendering context and clearing the canvas to a particular color.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Setup</title>

</head>

<body>

    <canvas id="canvas" width="600" height="600"></canvas>

    <script src="./mian.js"></script>

</body>

</html>
var gl;

initGL();

draw();

function initGL(){

    var canvas = document.getElementById("canvas");

    gl = canvas.getContext("webgl");

    gl.viewport(0,0,canvas.width, canvas.height);

    gl.clearColor(1,0,0,1); //red, blue, green, alpha

}

function draw(){

    gl.clear(gl.COLOR_BUFFER_BIT); //Paint the color to the canvas

}

[WebGL] Setting Up WebGL的更多相关文章

  1. WebGL自学教程——WebGL演示样本：开始

    最终开始WebGL样品演示,...... 开始 使用WebGL步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊>中的 ...

  2. WebGL自学教程——WebGL演示样例：開始

    最终開始WebGL的演示样例了,...... 開始 使用WebGL的步骤,非常easy: 1. 获得WebGL的渲染环境(也叫渲染上下文). 2. 发挥你的想象力,利用<WebGL參考手冊> ...

  3. 【WebGL】《WebGL编程指南》读书笔记——第6章

    一.前言        最近重感冒发烧,妈蛋好难受,请假了3天,驾校也没去,简直僵硬!今天继续WebGL的学习. 二.正文        A. GLSL支持两种数据值类型: 整数型(int)与浮点型( ...

  4. 【WebGL】《WebGL编程指南》读书笔记——第5章

    一.前言        终于到了第五章了,貌似开始越来越复杂了. 二.正文         Example1:使用一个缓冲区去赋值多个顶点数据(包含坐标及点大小) function initVerte ...

  5. 【WebGL】《WebGL编程指南》读书笔记——第3章

    一.前言 根据前面一章的内容,继续第三章的学习. 二.正文       一起绘制三个点,这里要使用到缓存了 var n = initVertexBuffers(gl); //返回绘制点的个数 n ) ...

  6. 【WebGL】《WebGL编程指南》读书笔记——第2章

    一.前言 最近看了<WebGL编程指南>这本书,发现还是很有意思的,故每章阅读后做个笔记. 二.正文 Example1:在canvas中绘制矩形 <!DOCTYPE html> ...

  7. 【WebGL】1.WebGL简介

    OpenGL和WebGL基本概念 OPEN GL:一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库. WebGL:›一个3D ...

  8. 【WebGL】《WebGL编程指南》读书笔记——第4章

    一.前言        今天继续第四章的学习内容,开始学习复合变换的知识. 二.正文        Example1: 复合变换 在书中,作者为我们封装了一套用于变换的矩阵对象:Matrix4对象.它 ...

  9. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

随机推荐

  1. 记录一次MySQL复制问题的处理

    备库: mysql> show slave status\G*************************** 1. row *************************** Slav ...

  2. [Everyday Mathematics]20150110

    试证: $$\bex \vlm{n}\frac{\ln^2n}{n}\sum_{k=2}^{n-2}\frac{1}{\ln k\cdot \ln(n-k)}=1. \eex$$

  3. 程序破解之 API HOOK技术 z

    API HOOK,就是截获API调用的技术,在程序对一个API调用之前先执行你的函数,然后根据你的需要可以执行缺省的API调用或者进行其他处理,假设如果想截获一个进程对网络的访问,一般是几个socke ...

  4. getView 数据最后加一项

    if (position != count-1) {      viewHolder.imgLineEnd.setVisibility(View.GONE); } else {       viewH ...

  5. Procdure for wanfo business report

    CREATE OR REPLACE PROCEDURE PROC_TZ_EXEC_N_YEARREPORT(ssrq varchar2 ) as -----声明变量 v_raise EXCEPTION ...

  6. SQL Server2005安装配置以及测试

    SQL Server2005有2种版本,一种是集成版的, 一种是2个文件夹形式的.这里使用后者,安装文件夹名字为:SQL Server x86,该文件夹里面有Servers和Tools文件夹以及一些其 ...

  7. 【原】Storm 入门教程目录

    Storm入门教程 1. Storm基础 Storm Storm主要特点 Storm基本概念 Storm调度器 Storm配置 Guaranteeing Message Processing(消息处理 ...

  8. 【跟我一起学Python吧】Python 多线程

    其实自我感觉Python的多线程很类似于Java的多线程机制,但是比JAVA的多线程更灵活.在早期的Python多线程实现中,采用了thread模块.例如: from time import ctim ...

  9. 网页抓取：PHP实现网页爬虫方式小结

    来源:http://www.ido321.com/1158.html 抓取某一个网页中的内容,需要对DOM树进行解析,找到指定节点后,再抓取我们需要的内容,过程有点繁琐.LZ总结了几种常用的.易于实现 ...

  10. C#冒泡排序详解

    今天写一简单的冒泡排序,带有详细的中文注释,新手一定要看看! 因为这是找工作面试时经常 笔试 要考的题目. using System; using System.Collections.Generic ...