Scalajs WebGL "Hello World!"

Question

好吧，它不是字面意义上的“Hello World!”程序，但等效:它使用 WebGL 渲染上下文将几个三角形输出到 Canvas 。

该程序按其应有的方式工作，但是有什么方法可以摆脱程序后半部分中那些讨厌的动态转换和不雅的 Scalajs Arrays 初始化。显然，我可以创建自己的实用程序函数/类(我使用自己的实用程序来生成着色器源代码)，但我更愿意尽可能使用 scalajs 标准方法。

package pClient
import org.scalajs._
import dom._
import pUtil._

object ClientApp extends scalajs.js.JSApp
  {
    def main(): Unit =  
    {
      var can: html.Canvas =    document.createElement("canvas").asInstanceOf[html.Canvas]
      document.body.appendChild(can)
      can.width = window.innerWidth
      can.height = window.innerHeight - 60

      import raw.WebGLRenderingContext._
      var gl: raw.WebGLRenderingContext = can.getContext("webgl").asInstanceOf[raw.WebGLRenderingContext]     
      gl.clearColor(0.4, 0.0, 0.5, 0.8)
      gl.clear(COLOR_BUFFER_BIT)     

      var vShader = gl.createShader(VERTEX_SHADER)     
      var vertText = "attribute vec2 position;" -+ VMain(Seq("gl_Position = vec4(position, 0, 1);")).out(0)     
      gl.shaderSource(vShader, vertText)     
      gl.compileShader(vShader)     

      var fShader = gl.createShader(FRAGMENT_SHADER)
      var fragText = "precision highp float;" -+ "uniform vec4 color;" -+ VMain(Seq("gl_FragColor = vec4(0, 1, 0, 1);")).out(0)
      gl.shaderSource(fShader, fragText)
      gl.compileShader(fShader)

      var program = gl.createProgram()
      gl.attachShader(program, vShader)
      gl.attachShader(program, fShader)
      gl.linkProgram(program)     

      var tempVertices: scalajs.js.Array[Float] = scalajs.js.Array[Float]()
      tempVertices.push(-0.3f,-0.3f,   0.3f,-0.3f,  0.0f,0.3f,  0.2f,0.2f,   0.6f, 0.6f,   0.4f, -0.4f)     
      import scalajs.js.typedarray.Float32Array
      var vertices: Float32Array = new Float32Array(tempVertices)

      var buffer = gl.createBuffer()
      gl.bindBuffer(ARRAY_BUFFER, buffer)
      gl.bufferData(ARRAY_BUFFER, vertices, STATIC_DRAW)

      gl.useProgram(program)
      var progDyn = program.asInstanceOf[scalajs.js.Dynamic]
      progDyn.color = gl.getUniformLocation(program, "color")
      var temp2 = scalajs.js.Array[Double]()
      temp2.push(0f, 1f, 0.5f, 1.0f)
      gl.uniform4fv(progDyn.color.asInstanceOf[raw.WebGLUniformLocation], temp2)

      progDyn.position = gl.getAttribLocation(program, "position")
      gl.enableVertexAttribArray(progDyn.position.asInstanceOf[Int])
      gl.vertexAttribPointer(progDyn.position.asInstanceOf[Int], 2, FLOAT, false, 0, 0)
      gl.drawArrays(TRIANGLES, 0, vertices.length / 2)     
    } 
}

我正在 Eclipse 中运行该程序。它在路径上有以下 jars:

scalajs-cli-assembly_2.11-0.6.5.jar
scalajs-compiler_2.11.7-0.6.5.jar
scalajs-dom_sjs0.6_2.11-0.9.0-SNAPSHOT.jar
scalajs-library_2.11-0.6.5.jar

我一直在用 sbt 构建。构建.sbt:

enablePlugins(ScalaJSPlugin)
name := "ScalaClient"
scalaVersion := "2.11.7"
libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "0.8.0"
scalaSource in Compile := baseDirectory.value / "src"
scalacOptions := Seq("-feature", "-language:implicitConversions", "-deprecation", "-target:jvm-1.8")
unmanagedSourceDirectories in Compile += file("/sdat/scalaPackages/pUtil")

Answer 1

您可以像这样显着改进数组初始化:

import scala.scalajs.js // common import in Scala.js
import scala.scalajs.js.typedarray._

val vertices = new Float32Array(js.Array(
    -0.3f,-0.3f,  0.3f,-0.3f,  0.0f,0.3f,  0.2f,0.2f,
    0.6f,0.6f,  0.4f,-0.4f))

至于投到 js.Dynamic ，这主要是由于 WebGL 的类型不够好。 WebGLProgram此时为空。随意对这些类型进行改进!