WebGL | 易学教程

OES_texture_float extension use

阅读更多关于 OES_texture_float extension use

问题 How to use the OES_texture_float extension? I do not understand that it is necessary to specify the arguments the function texImage2D. var fb=gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); var rb=gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, rb); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16,size[0],size[1]); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT,gl.RENDERBUFFER, rb); var texture=gl.createTexture(); gl.bindTexture(gl

Converting OBJ file to VBO using JavaScript

阅读更多关于 Converting OBJ file to VBO using JavaScript

问题 I am trying to convert an OBJ file to data that I can pass to a VBO, but I only managed to load simple models that do not have a lot of vertices. For now I am trying to load a model that has vertices and normals. This is what I have: http://undefined.free.bg/Wavefront%20to%20JSON/ This reads the entire file and stores it in an array, then stores the lines with "v" in front of them in an array of vertices and the ones with "vn" in front in an array of normals. I use the faces to export them,

Rendering Spheres in SVG/Canvas

阅读更多关于 Rendering Spheres in SVG/Canvas

问题 I am getting ready to build some graphics that primarily involve rendering semi-transparent spheres (showing through an inner sphere of a smaller radius). I do need a 3D effect. Can someone recommend what framework I should be using here? D3.JS, webgl, etc.? 回答1: For a simple task it will be much easier to use declarative framework like http://www.x3dom.org/ 来源： https://stackoverflow.com/questions/23619264/rendering-spheres-in-svg-canvas

Drawing parametric shapes in webGL (without three.js)

阅读更多关于 Drawing parametric shapes in webGL (without three.js)

问题 I've written a program that draws some parametric shapes (spheres, toruses, and cylinders) just using HTML5 and regular Javascript. I'm trying to convert this code so that it uses WebGL, implementing the shapes with triangle strips as is done in this tutorial. My point of confusion is how triangle strips are even being used to create spheres at all. The way I was doing it before just featured the calculation of where to draw each horizontal slice or circle based on the latitude lines in a for

three.js exporter 'export object' not working with jsonLoader (r58)

阅读更多关于 three.js exporter 'export object' not working with jsonLoader (r58)

问题 I'm trying to load a model I got from 3DWarehouse into three.js. I was unable to get the Collada Loader to work, so instead I imported it into THREEJS Editor and exported it using the "export object" function. When I loaded the object into my app using the following code: var kiss = new THREE.Object3D(), loader = new THREE.JSONLoader(true); loader.load("model/kiss/kiss.js", function (geometry, meshKiss) { meshKiss = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial()); kiss.addChild

基于 HTML5 WebGL 的 3D 科幻风机

阅读更多关于基于 HTML5 WebGL 的 3D 科幻风机

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前言　　许多世纪以来，风力机同水力机械一样，作为动力源替代人力、畜力，对生产力的发展发挥过重要作用。近代机电动力的广泛应用以及二十世纪50年代中东油田的发现，使风机发电机的发展缓慢下来。 70年代初期，由于“石油危机”，出现了能源紧张的问题，人们认识到常规矿物能源供应的不稳定性和有限性，于是寻求清洁的可再生能源遂成为现代世界的一个重要课题。风能作为可再生的、无污染的自然能源又重新引起了人们重视。现在我希望可以通过这个风机 demo 使风力发电机的各个功能近距离的展示给大家，使大家能更了解风力发电机。本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案。 demo 链接： https://hightopo.com/demo/fan3d-magic/ 风机主要功能介绍效果：　　周围环境功能：　　一. 风速值。　　虚拟一个风速值，风速值会影响风机的发电效率和变桨系统的变化。　　二. 数据统计。　　　　环境温度、机舱温度、齿轮箱温度、风速的图形百分比会随着时间发生改变。　　三. 环境监测。　　　　左边对风机的各个参数实施了监测，右面是风速变化的折线图。　　四. 数据监测。　　　　　　风机在发电的过程中发生的异常情况

Flame is not showing in THREE.js World

阅读更多关于 Flame is not showing in THREE.js World

问题 I am making a flame using the THREE.js and spark.js, but when I render the world I can't see the flame and the world is empty. I saw the console for the error but there is no error regarding this. I tried a lot but can't find out the actual error. Here is the code. threexSparks = new THREEx.Sparks({ maxParticles : 400, counter : new SPARKS.SteadyCounter(300) }); //threexSparks.position.x = 1000; // setup the emitter //var emitter = threexSparks.emitter(); var counter = new SPARKS

How to properly dispose of my WebGL context in order to avoid the 16 WebGL contexts error? [duplicate]

阅读更多关于 How to properly dispose of my WebGL context in order to avoid the 16 WebGL contexts error? [duplicate]

问题 This question already has an answer here : How to free and garbage collect a WebGL context? (1 answer) Closed 10 months ago . This is a follow up question to this one: Exceeded 16 live WebGL contexts for this principal, losing the least recently used one. In that question, it was found that this error happens when you refresh a webGL tab more than 16 times (or collect 16+ contexts across multiple tabs). However it is not clear how to dispose a WebGL context so that the browser can free up one

Is there any method to hide shader used in web application from being inspect by shader editor or other tools

阅读更多关于 Is there any method to hide shader used in web application from being inspect by shader editor or other tools

问题 I am digging 3D web application for VR. And I want to hide my shader from being inspected by firefox shader editer and webGL inspector. I used the way to uglify the shader and put the shader in a return function rather than in a var. But none of them works. So, is there any method to hide web application's shader? 回答1: The answer is simple, no there isn't Just printing out the shaders is pretty easy. All someone has to do is write an extension that does this WebGLRenderingContext.prototype

Native WebGL particle system opacity issue

阅读更多关于 Native WebGL particle system opacity issue

问题 I am trying to render textured particles and i have the problem. Transparent pixels of texture doing a weird thing with render. Looks like particles that are behing nearest (to camera) particles are not rendering at all. But not always, some of them are rendering and look expected. I was tried to play around with depth and blend options but without result. Perhaps that a solution can be found by modifying this part code. gl.enable(gl.DEPTH_TEST); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA