 |
|
||||
Você está aqui: WebGL (Web Graphics Library) ::: Dicas de Estudo e Anotações ::: Passos Iniciais |
Como retornar o contexto de desenho do WebGL usando o método getContext() do objeto Canvas do HTML5Quantidade de visualizações: 858 vezes |
|
Esta é, claro, uma dica para iniciantes em WebGL + HTML5, e o motivo de eu estar documentando ela aqui é para poupar aos iniciantes uma dor de cabeça imensa tentando entender onde e como iniciar a execução de seus códigos WebGL. Assim, o primeiro procedimento que temos que fazer é entender como adquirir o contexto de desenho do WebGL a partir do Canvas do HTML5. Uma vez adquirido o contexto e verificado o seu correto funcionamento, os demais passos serão, com certeza, mais fáceis. No momento que escrevo esta dica, o objeto Canvas do HTML5 nos fornece duas formas a partir das quais podemos obter o contexto de desenho: "2d" e "webgl". O valor "webgl" pode ser trocado por "experimental-webgl" de forma a obter recursos adicionais, mas pode variar de um browser para outro. Assim, na dúvida, vamos ficar com o valor "webgl" mesmo. Então, sem mais enrolação, para obter o contexto de desenho do WebGL, só precisamos chamar o método getContext() do objeto Canvas do HTML5, fornecendo o valor "webgl" como argumento. Veja: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Estudos WebGL</title>
</head>
<body>
<canvas id="tela" width="400px" height="300px"
style="background-color: red">
Seu navegador não suporta o objeto Canvas do HTML5
</canvas>
<script type="text/javascript">
var webGL = null; // referência ao WebGL
// função que inicializa e testa o WebGL
function inicializarWebGL(){
// obtemos a referência ao Canvas
var canvas = document.getElementById("tela");
// e tentamos obter o contexto de desenho WebGL
try{
// recebe o contexto de desenho
webGL = canvas.getContext("webgl");
// vamos definir a cor de fundo padrão
webGL.clearColor(0.0, 1.0, 0.0, 1.0);
// vamos aplicar a cor
webGL.clear(webGL.COLOR_BUFFER_BIT);
}
catch(e){
window.alert("Não consegui obter o contexto de desenho WebGL");
}
}
// vamos chamar tudo quando o documento HTML estiver carregado
window.onload = inicializarWebGL;
</script>
</body>
</html>
Salve este código como estudos_webgl.html e abra-o no seu navegador. Se seu browser oferecer suporte ao WebGL e tudo correr bem, você verá um objeto Canvas com seu contexto de desenho pintado de verde (ou vermelho, em caso de erro). |
 Link para compartilhar na Internet ou com seus amigos: |
Vamos testar seus conhecimentos em JavaScript |
| Qual das instruções JavaScript abaixo envolve um array? A) var a = b ^ i; B) var a = b(i); C) var a = b[i]; D) var a = b >> i; Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Velocidade de entrada e saída de um fluido O tanque tem uma entrada e uma saída de água. Determine a altura H do tanque em função da área A, velocidade de entrada V1 em um bocal com diâmetro d1 e velocidade de saída V2 em um bocal com diâmetro d2, após um intervalo de tempo t, sendo que o tanque se encontrava vazio. Determine também o tempo de enchimento do tanque conforme os dados: H = 10m; A = 2,5m2; V1 = 0,7m/s; d1 = 20cm; V2 = 3m/s; d2 = 15 cm. A) H = (V2d22 - V1d12)tπ/4A 0,08 segundos. B) H = (V2 - V1)t/A 10,87 segundos. C) H = (V2d22 - V1d12)tπ/4A 806 segundos. D) H = (V2d22 - V1d12)tπ/A 201 segundos. E) H = (V2d22 - V1d12)tπ/2A 403 segundos. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Perda de Carga Localizada, Acessórios de Tubulação Considerando a questão: "Qual a perda de carga singular em um conduto de 100 m, diâmetro de 100 mm, com um fluido escoando a 2 m/s, apresentando as seguintes singularidades rosqueadas na tubulação: válvula globo totalmente aberta e cotovelo de 45º com raio normal?". Qual o valor do fator de atrito f na tubulação anteriormente citada? Qual valor do somatório de Ks tornaria a perda de carga singular idêntica à perda de carga linear? A) 0,66 e 66,2. B) 0,066 e 66,2. C) 0,132 e 66,2. D) 0,066 e 132,4. E) 0,132 e 132,4. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em AutoCAD Civil 3D |
| Sistema de Coordenadas no Civil 3D Na janela Drawing Settings do AutoCAD Civil 3D, qual aba usamos para definir ou alterar o sistema de coordenadas do desenho? A) Units and Zone B) Transformation C) Ambient Settings D) Object Layers Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil |
| Formas: Confecção e colocação Em relação aos materiais utilizados para formas, assinale a alternativa correta. A) A fibra de vidro é muito utilizada para pilares e vigas. B) Formas em poliestireno expandido são altamente reaproveitadas. C) Vidro é muito utilizado para concreto aparente. D) Tubos de papelão são muito usados em pilares de seção circular e em estruturas com caixão perdido. E) As tábuas são os materiais que proporcionam o maior reaproveitamento. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de WebGL (Web Graphics Library) |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
