webgl画个点

function main(){
    var canvas = document.getElementById("webgl");
    var gl = getWebGLContext(canvas)
    if (!gl){
        console.log("Fail to get WebGL context");
        return;
    }else{
        ;
    }
    var VSHADER_SOURCE = function(){
        /*
         void main(){
         gl_Position = vec4(0.0,0.0,0.0,1.0);
         gl_PointSize = 10.0;
         }
         */
    }.toString().match(/\/\*([^]*)\*\//)[1];

    var FSHADER_SOURCE = function(){
        /*
         void main(){
         gl_FragColor = vec4(1.0,0.0,0.0,1.0);
         }
         */
    }.toString().match(/\/\*([^]*)\*\//)[1];

    if (!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
        console.log(‘Fail to init shaders‘);
        return;
    }
    gl.clearColor(0.0,0.0,0.0,0.8);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, 1);
}
时间: 2024-11-03 03:30:45

webgl画个点的相关文章

用webgl画个太阳系(线框图)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src="three.min.js"></script> <style type="text/css"> body { color: #808080; font-family

WebGL画一个10px大小的点

WebGL程序在屏幕上同时使用HTML和javascript来创建和显示三维图形.WebGL中新引入的<canvas>元素标签,它定义了网页上的绘图区域. 由于<canvas>元素可以灵活地同时支持维维图形和三维图形,它不直接提供绘图方法,而是提供一种叫上下文(context)的机制来进行绘图.我们首先获取这个上下文. //获取WebGL绘图上下文var gl = getWebGLContext(canvas, true); getWebGLContext(element, [de

TeaPot 用webgl画茶壶(1)

我想通过画一个茶壶,一步步的学习webgl.先画一个完全红的茶壶,在Fragment Shader里每一个像素都画成红的,这样画出来的物体没有立体感,但是我想尽快的现在屏幕上画出一些东西来.茶壶的数据是由网上找的半成品改的,放在TeaPotData.js里,是一个对象变量. var teaPotData = { vertexPositions : new Float32Array([......]),/*好多数据,三个一组,代表Mesh的vertex坐标*/ vertexNormals : ne

TeaPot 用webgl画茶壶(2) Phong Shading

在Fragment Shader里应用Phong Shading使得茶壶更逼真.即使是单一颜色的茶壶,只要光源的位置变化,或眼睛的位置变化,看到的茶壶的各个部分的颜色明暗是不一定一样的.所谓Phong Shading就是Phong这个人提出的一种决定每个像素颜色的方法. 总的来说,我们希望看到怎样的茶壶?我们希望它跟真的一样,有光照着它,所以照到的地方亮,照不到的地方暗,迎着光的地方还有高亮反射光. 点e看到点p有颜色,是因为有光子从p跑到了e.点p有光子,除非p是光源,不然光子肯定是从别的地方

WebGL入门教程(二)-webgl绘制三角形

前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje

有关于OpenGL、OpenGL ES、WebGL的小结

转自原文 有关于OpenGL.OpenGL ES.WebGL的小结 一.   OpenGL简介 OpenGL(全写Open Graphics Library)是个定义了一个跨编程语言.跨平台的编程接口的规格,它用于三维图西象(二维的亦可).OpenGL是个专业的图形程序接口,是一个功能强大,调用方便的底层图形库. 关于其他的介绍我就不说了.这边我说一下有OpenGL的资源网站: OpenGL官网:http://www.opengl.org/resources/libraries/glut/ Ne

WebGl 利用drawArrays、drawElements画三角形

效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGl 利用drawArrays.drawElements画三角形</title> </head> <body> <canvas id="myCanvas" width="500

WebGl 利用缓冲区对象画多个点

效果: 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>WebGl 利用缓冲区对象画多个点</title> 6 </head> 7 <body> 8 9 <canvas id="myCanvas" width="500

无插件纯Web 3D机房,HTML5+WebGL倾力打造

前言 最近项目开发任务告一段落,刚好有时间整理这大半年的一些成果.使用html5时间还不久,对js的认识还不够深入.没办法,以前一直搞java,对js的一些语言特性和概念一时还转换不过来. 上一篇介绍了项目中做的一个彩虹爆炸图,主要用了 html5的canvas的2d绘制技术.这一回我想介绍一下项目中的一个亮点技术:html5的3D,以及如何用它打造精美的3D机房监控系统. 目标效果图 下图是客户给找的一张的效果参考图,希望机房至少能达到下面的3D效果. 懂的人都知道,这可是一张设计公司出的装修